Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z odstępami dla a
Forum PHP.pl > Forum > Po stronie przegl±darki
Jarod
6.09.2006, 17:52:23
Natrafiłem na do¶ć dziwne zachowanie przegl±darek.

Mam taki kod HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3.  
  4.   <head> 
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6.     <meta http-equiv="Content-language" content="pl" />
  7. 	<link rel="stylesheet" href="css/lhc.css" type="text/css" />
  8.   </head>
  9.  
  10.   <body>
  11.  
  12.       <div id="kontener">
  13.           <div class="panel"><a href="#">To jest jaki¶ większy blok z tesktem 1
  14. 		  To jest jak¶ większy blok z tesktem 1
  15. 		  To jest jak¶ większy blok z tesktem 1
  16. 		  To jest jak¶ większy blok z tesktem 1
  17. 		  To jest jak¶ większy blok z tesktem 1
  18. 		  To jest jak¶ większy blok z tesktem 1
  19. 		  To jest jak¶ większy blok z tesktem 1
  20. 		  </a></div>
  21.  
  22.           <div class="panel"><a href="#">To jest jak¶ większy blok z tesktem 2
  23. 		  To jest jak¶ większy blok z tesktem 2
  24. 		  To jest jak¶ większy blok z tesktem 2
  25. 		  To jest jak¶ większy blok z tesktem 2
  26. 		  To jest jak¶ większy blok z tesktem 2
  27. 		  To jest jak¶ większy blok z tesktem 2
  28. 		  To jest jak¶ większy blok z tesktem 2
  29. 		  To jest jak¶ większy blok z tesktem 2
  30. 		  To jest jak¶ większy blok z tesktem 2
  31. 		  </a></div>
  32.  
  33. 	  </div>
  34.  
  35.   </body>
  36. </html>
[HTML] pobierz, plaintext


i CSS:
[HTML] pobierz, plaintext 
  1. * {
  2.    margin: 0 auto;
  3.    padding: 0;
  4.    font-family: Verdana, Arial, Helvetica, sans-serif;
  5. }
  6. div#kontener {
  7.               margin: 0 auto;
  8.               width: 700px;
  9.               color: black;
  10. 	          background-color: red;
  11.               overflow: auto;
  12. }
  13. .panel a {
  14. 			  margin: 10px 0 20px 20px;
  15. 			  padding: 3px 0 3px 5px;
  16. 			  width: 300px;
  17. 			  color: black;
  18. 			  background-color: green;
  19. 			  border: 1px #C6000C solid;
  20. 			  text-decoration: none;
  21. 			  clear: both;
  22. 			  float: left;
  23. }
  24.  
  25. .panel a:hover {
  26.                     color: #B83C36;
  27. 					background-color: yellow;
  28. }
[HTML] pobierz, plaintext



Wszystko ładnie pięknie. Ale jak usunę ze znacznika .panel a wła¶ciwo¶ci: clear: both; float: left; to wszystko się pier***. Dzięje się tak je¶li blok 1 i blok 2 s± linkami.

Może mi kto¶ wytłumaczyć dlaczego te dwa elementy musz± pływać je¶li chcę zastosować linki?

Pro¶ba do moderatora o przesunięcie do działu CSS.
s_w_ir
6.09.2006, 20:09:42
Kod
display: block;
zamiast clear i float. Jak sie dowiem to potem ewentualna odpowiedĽ dlaczego.


edit.
Zamiast robić operacje width padding margin na <a> rób to na divie. <a> jest od stylu textu, nie od wygl±du bloku.
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-2025 Invision Power Services, Inc.