Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Klikalny div
Forum PHP.pl > Forum > Przedszkole
damian0021
Cześć,

kombinuje i kombinuje, aby zrobić klikalny div.

Chcę aby cały div .productbox był kliklany, możecie jakoś pomóc? Szukałem w sieci, ale jest dużo zastosowań onclick - a ja takiego nie chce.

Używam bootstrapa.

Wygląda to tak:


Mój kod wygląda tak:

  1. <div class="row productbox" style="border:1px solid #eee; padding:10px;">
  2.  
  3. <div class="col-md-4"><img src="https://image.ceneostatic.pl/data/products/56404656/f-amazon-best-gift-meski-t-shirt-bluza-z-kapturem-listwa-swetry-multi-przycisk-przycisk-bluza-z-kapturem-koszulka-t-shirt.jpg"></div>
  4. <div class="col-md-8 product">
  5. <div class="col-md-8 info">
  6. <h2 style="font-size:15px;">Product Name</h2>
  7. <ul class="params">
  8. <li>Category: <strong>1</strong></li>
  9. <li>Category 2 <strong>2</strong></li>
  10. <li>Category 3 <strong>3</strong></li>
  11. </ul>
  12.  
  13. <p class="category-link">
  14. <a class="dotted-link" href="#">Lorem ipsum</a>
  15. </p>
  16. </div>
  17.  
  18. <div class="col-md-4 price">
  19. <button style="background-color:#e85607; padding-left:50px;padding-right:50px; color:#fff;">Price</button>
  20. </div>
  21. </div>
  22. </div>
viking
Najbardziej proste rozwiązanie https://prophp.pl/advice/show/18/linkowanie...wych%29_w_html5
damian0021
Idąc tym tropem, zrobiłem takie coś, ale nie działa sad.gif

  1. <article class="short">
  2.  
  3. <a href="http://wp.pl">
  4. <section>
  5.  
  6.  
  7. <div class="row productbox" style="border:1px solid #eee; padding:10px;">
  8.  
  9. <div class="col-md-4"><img src="https://image.ceneostatic.pl/data/products/56404656/f-amazon-best-gift-meski-t-shirt-bluza-z-kapturem-listwa-swetry-multi-przycisk-przycisk-bluza-z-kapturem-koszulka-t-shirt.jpg"></div>
  10. <div class="col-md-8 product">
  11. <div class="col-md-8 info">
  12. <h2 style="font-size:15px;">Product Name</h2>
  13. <ul class="params">
  14. <li>Category: <strong>1</strong></li>
  15. <li>Category 2 <strong>2</strong></li>
  16. <li>Category 3 <strong>3</strong></li>
  17. </ul>
  18.  
  19. <p class="category-link">
  20. <a class="dotted-link" href="#">Lorem ipsum</a>
  21. </p>
  22. </div>
  23.  
  24. <div class="col-md-4 price">
  25. <button style="background-color:#e85607; padding-left:50px;padding-right:50px; color:#fff;">Price</button>
  26. </div>
  27. </div>
  28. </div>
  29.  
  30. </section>
  31. </a>
  32. </article>
nospor
Czego nie rozumiesz w zdaniu:
Cytat
Wewnątrz linkowanego bloku nie może znajdować się inny element wykonujący akcję (button lub kolejny link).

questionmark.gif
damian0021
Przepraszam nie doczytałem.

A co w przypadku jak muszę mieć 2 odnośniki ?
viking
To zapewne skoro to bootstrap to jest też jquery. A wtedy przykład na dole.
damian0021
Ale niestety pod SEO - jQuery odpada.
viking
No to nie masz innej opcji.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.