Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Obrazkowy problem, skąd bierze się odstęp?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
marcim
Witam!
Mam taki otóż problem, tworze sobie stronkę i mam menu górne, zrobione z odsyłaczy obrazkowych, poukładanych w lini jeden obok drugiego. I teraz pod tym menu chcę dodać grafikę, to między tym menu a grafiką tworzy się odstęp ok 5px, dzieje się tak w IE, Firefoxie. W operze jest wszystko ok. I zauważyłem że gdy do tego menu dodam obramowanie, to pomiędzy dolnym obramowaniem, i dolną krawędzią grafiki tworzy się ten właśnie odstęp. Znika wszystko jak do diva z menu dodam ustaloną w px wysokość. I teraz moje pytanie, skąd bierze się ten odstęp?
Pozdrawiam

A i jeszcze kod:
  1. <div style="width: 835px; height: 50px; margin: 0 auto;">
  2. <a href="index.php"><img src="grafika/glowna.gif" ></a>
  3. <a href="aktualnosci.php" class="belka"><img src="grafika/aktualnosci.gif" /></a>
  4. <a href="artykuly.php" class="belka"><img src="grafika/artykuly.gif" /></a>
  5. <a href="ksiega.php" class="belka"><img src="grafika/ksiega.gif" /></a>
  6. <a href="redakcja.php" class="belka"><img src="grafika/redakcja.gif" /></a>
  7. <a href="download.php" class="belka"><img src="grafika/download.gif" /></a>
  8. <a href="kontakt.php" class="belka"><img src="grafika/kontakt.gif" /></a>
  9. </div>
  10. <div style="width: 835px; height: 148px; margin: 0 auto; background-image: url(grafika/top.gif)"></div>
  11. <div style="width: 281px; height: 37px; background-image: url(grafika/tlo_belka.gif); float: left;"></div>
  12. <div style="width: 20px; height: 37px; float: left;">
  13. <a href="index.php"><img src="grafika/glowna_mini.gif" style="border: 0px;" alt="Strona Główna"/></a>
  14. </div>
  15. <div style="width: 27px; height: 37px; float: left;">
  16. <a href="kontakt.php"><img src="grafika/napisz.gif" style="border: 0px;" alt="Napisz do Mnie"/></a>
  17. </div>
  18. <div style="width: 15px; height: 37px; float: left;">
  19. <a href="redakcja.php"><img src="grafika/redakcja_mini.gif" style="border: 0px;" alt="Redakcja"/></a>
  20. </div>
  21. <div style="width: 67px; height: 37px; background-image: url(grafika/belka_przejscie.gif); float: left;"></div>
  22. <div style="width: 445px; height: 37px; background-image: url(grafika/belka_imieniny.gif); float: left;"></div>
  23. <div style="width: 17px; height: 37px; background-image: url(grafika/belka_koniec.gif); float: left;"></div>
wookieb
Musisz ustawić line-height: 0px; zeby go nie było.
marcim
Próbowałem, nic nie dawało. Przedewszystkim chciałem się pozbyć wszystkich zbędnych divów. Chciałem ustawiać wszystko jako grafike. Wystarczyło dać dla img float:left i problem zniknął. Wszystko ładnie pasuje, a skąd wziął się ten problem, to już sam nie wiem. Teraz ten powyższy kod wygląda tak:
  1. div style="width: 835px;margin: 0 auto;">
  2. <a href="index.php"><img src="grafika/glowna.gif" ></a>
  3. <a href="aktualnosci.php" class="belka"><img src="grafika/aktualnosci.gif" /></a>
  4. <a href="artykuly.php" class="belka"><img src="grafika/artykuly.gif" /></a>
  5. <a href="ksiega.php" class="belka"><img src="grafika/ksiega.gif" /></a>
  6. <a href="redakcja.php" class="belka"><img src="grafika/redakcja.gif" /></a>
  7. <a href="download.php" class="belka"><img src="grafika/download.gif" /></a>
  8. <a href="kontakt.php" class="belka"><img src="grafika/kontakt.gif" /></a>
  9. <img src="grafika/top.gif" />
  10. </div>
  11. <img src="grafika/tlo_belka.gif" />
  12. <a href="index.php"><img src="grafika/glowna_mini.gif" style="border: 0px;" alt="Strona Główna"/></a>
  13. <a href="kontakt.php"><img src="grafika/napisz.gif" style="border: 0px;" alt="Napisz do Mnie"/></a>
  14. <a href="redakcja.php"><img src="grafika/redakcja_mini.gif" style="border: 0px;" alt="Redakcja"/></a>
  15. <img src="grafika/belka_przejscie.gif" />
  16. <div style="width: 445px; height: 37px; background-image: url(grafika/belka_imieniny.gif); float: left;"></div>
  17. <img src="grafika/belka_koniec.gif" />
Kill3R
display block dla obrazków powinno pomóc

a wyjaśnienie problemu pod poniższym linkiem
objaśnienie do problemu
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.