Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] odstęp pomiędzy div z img
kossa
post
Post #1





Grupa: Zarejestrowani
Postów: 1 165
Pomógł: 9
Dołączył: 9.04.2002
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Witam,
mam problem z ustawieniem dwóch div'ów obok siebie w których są obrazki.

Mam div kontener (display: inline) a w nim dwa div'y i w każdym obrazek.

W IE pomiędzy tymi dwoma div'ami nie ma odstępu, natomiast w FF i O jest odstęp:

W FF i O jest odstęp (czarne tło)
(IMG:http://www.kossakowski.isp.net.pl/forum1.gif)

W IE nie ma odstępu:
(IMG:http://www.kossakowski.isp.net.pl/forum2.gif)

Oto kod html:

  1. <div id="kontener">
  2.  
  3. <div id="img_div"><img src="images/box_gps.gif" alt="" /></div>
  4. <div id="img_div"><img src="images/box_gps.gif" alt="" /></div>
  5.  
  6. </div>


Kod CSS (już trochę zakręcony, bo próbowałem różnych kombinacji, jak jest ok w FF i O to W IE jest źle...)

body {background-color: #000000;}

  1. #kontener {
  2. display: inline;
  3. float: left;
  4.  
  5. }
  6.  
  7. #img_div {
  8. display: inline;
  9. clear: left;
  10. padding: 0px;
  11. margin: 0px;
  12. }
  13.  
  14. div {
  15. padding: 0px;
  16. margin: 0px;
  17. }
  18.  
  19. img {
  20. border: none;
  21. padding: 0px;
  22. margin: 0px;
  23. }


Proszę o pomoc w rozwiązaniu tego problemu.

Pozdrawiam,
Łukasz
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
babejsza
post
Post #2





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

Ostrzeżenie: (0%)
-----


Nie może być dwóch id o takiej samej nazwie. Id ma być unikalne, czyli zamień to na klasę. Poza tym może to tylko uproszczony przykład, ale jeżeli są identyczne to możesz się do nich odwołać poprzez rodzica na zasadzie #kontener div {...}.

A co do samego problemu to spróbuj dla tych wewnętrznych div'ów zrobić float: left. Dopiero po nich wstaw np. <br style="clear: left" /> i wywal ze stylu div'a clear'a.

Trochę zamotałem. Nie sprawdzałem, ale powinno być ok

  1. #kontener
  2. {
  3. float: left;
  4. }
  5.  
  6. #kontener div
  7. {
  8. float: left;
  9. padding: 0px;
  10. margin: 0px;
  11. }
  12.  
  13. div
  14. {
  15. padding: 0px;
  16. margin: 0px;
  17. }
  18.  
  19. img
  20. {
  21. border: none;
  22. padding: 0px;
  23. margin: 0px;
  24. }
  25.  
  26. <div id="kontener">
  27. <div><img src="images/box_gps.gif" alt="" /></div>
  28. <div><img src="images/box_gps.gif" alt="" /></div>
  29. <br style="clear: left" />
  30. </div>
  31. <br style="clear: left" />
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 14.10.2025 - 22:27