Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]problem z ustalaniem pozycji bloków
Forum PHP.pl > Forum > Przedszkole
maszti88
15.01.2010, 12:52:49
Mam problem z ustaleniem dlaczego poszczególne elementy "li" przesunięte są od górnego obramowania i lewego obramowanua <div> o kilka pikseli, dołączam kod css i plik. Wydaje mi się to nielogiczne bo nie używam ani margin ani padding .

kod style.css :
body { overflow: hidden; }

div {
width: 700px;
height: 100px;
border: solid red 3px;
overflow: hidden;
padding: 0;
}

ul {
text-decoration: none;
list-style:none;
}

ul li {
float: left;
border: solid yellow 2px;
width:100px;
height: 80px;
text-align: center;
overflow:hidden;
}

ul li a {
text-decoration: none;
}

kod na stronie:

<body>

<div>
<ul>
<li><a href="http://onet.pl"><b>Wszystkie</b></a></li>
<li><a href="http://onet.pl"><b>Technologia</b></a></li>
<li><a href="http://onet.pl"><b>Kraj</b></a></li>

</ul>
</div>

</body>
wookieb
15.01.2010, 13:30:46
Ponieważ ul i li mają domyuślne wartosci margi i padding
maszti88
15.01.2010, 14:08:00
a czy mozna usunąć te standardowe margin i padding questionmark.gif
lukaszgolder
15.01.2010, 14:10:01
margin: 0; i padding: 0; w stylach CSS
maszti88
15.01.2010, 14:29:10
a jak wystylizowac styl "ul li a", aby zajmował on cała powierzchnie "li" bo jak wstawiłem taki kod:

ul li a {
margin:0px;
padding:0px;
display: block;
width: 80px;
height: 30px;
background-color: transparent;
}

to blok ten jest przesunięty w dół i nie pokrywa całkowicie powierzchni "li". Dodam że width i height jest takie samo jak w "li".
lukaszgolder
15.01.2010, 14:34:24
Wyżej miałeś dla li ustawione wartości 100 i 80. Spróbuj może width: 100%; height: 100%; albo width: auto; jeśli chcesz dodać jakiś padding.
zordon
15.01.2010, 14:40:48 
[HTML] pobierz, plaintext 
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. ul li a {
  7. margin:0px;
  8. padding:0px;
  9. display: block;
  10. background-color: transparent;
  11. width: 100%;
  12. height: 100%;
  13. }
  14.  
[HTML] pobierz, plaintext
maszti88
15.01.2010, 14:42:05
Nie działa niestety. Zakładamy że li ma width 100 px a height 50 px w "li" znaduje sie odnośnik "a". Chciałbym aby ten odnośnik był tak wystylizowany aby zajmował dokładnie powierzchnie li. Czy "a" również posiada jakieś domyślne wartości margin padding ?
zordon
15.01.2010, 14:45:00
u mnie działa.
może coś zmieniałeś od czasu pierwszego listingu i nie napisałeś co?
oto mój cały dokument html(style w tym samym pliku, ale poradzisz sobie smile.gif )

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. *{
  5. 	margin: 0;
  6. 	padding: 0;
  7. }
  8.  
  9. div {
  10. width: 700px;
  11. height: 100px;
  12. border: solid red 3px;
  13. overflow: hidden;
  14. padding: 0;
  15. }
  16.  
  17. ul {
  18. text-decoration: none;
  19. list-style:none;
  20. }
  21.  
  22. ul li {
  23. float: left;
  24. border: solid yellow 2px;
  25. width:100px;
  26. height: 80px;
  27. text-align: center;
  28. overflow:hidden;
  29. }
  30.  
  31. ul li a {
  32. margin:0px;
  33. padding:0px;
  34. display: block;
  35. background-color: transparent;
  36. width: 100%;
  37. height: 100%;
  38. }
  39.  
  40. </style>
  41. </head>
  42. <body>
  43. <div>
  44. <ul>
  45. <li><a href="http://onet.pl"><b>Wszystkie</b></a></li>
  46. <li><a href="http://onet.pl"><b>Technologia</b></a></li>
  47. <li><a href="http://onet.pl"><b>Kraj</b></a></li>
  48.  
  49. </ul>
  50. </div>
  51.  
  52. </body>
  53. </html>
[HTML] pobierz, plaintext
maszti88
15.01.2010, 17:55:12
kolejny problem jaki się pojawił jest ustawienie elementów w komórce "td". Zakładamy że height jest równe 300px; a blok który ma się w tej komórce znajdować ma mieć 200px; zawartość tego bloku ustawia się na środku komórki "td" a ja chciałbym zrobić aby ustawiało się do góry (przy top). Dodam że nie używam żadnych margin i padding.
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.