Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] odstęp pomiędzy div z img
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kossa
2.03.2007, 01:25:57
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)


W IE nie ma odstępu:


Oto kod html:

[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext


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;}

[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


Proszę o pomoc w rozwiązaniu tego problemu.

Pozdrawiam,
Łukasz
kwiateusz
2.03.2007, 01:55:50
Próbuje i też mi nie dizie, ale moja wiedza co do css jest skąpa.
Ale przy okazji chciałbym nadmienić że nie mozna mieć dwóch takich samych id, w takim wypadku powinno sie stosować class winksmiley.jpg
Zajec
2.03.2007, 10:17:51
http://zajec.net/test/two.images

[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <title>Obrazek SVG, alternatywnie PNG</title>
  6. <style type="text/css">
  7. img { border: 2px solid brown; float: left; } /* dzieki float nie ma odstepu miedzy obrazkami */
  8. div { overflow: auto; } /* aby div mial wysokosc obrazkow */
  9. .odstep { margin-left: 20px; display: inline; } /* inline naprawia buga ie6 */
  10. </style>
  11. </head>
  12. <body>
  13.  
  14. <div>
  15. <img src="http://www.opera.com/graphics/logos/linux.gif" alt="</span>" />
  16. <<span style='color:blue'>img src="http://www.opera.com/graphics/logos/mac.gif" alt="" class="odstep" />
  17. </div>
  18.  
  19. </body>
  20. </html>
[XML] pobierz, plaintext
babejsza
2.03.2007, 10:24:24
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

[HTML] pobierz, plaintext 
  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" />
[HTML] pobierz, plaintext
kossa
2.03.2007, 12:19:05
Tak, o ID zapomniałem że musi być unikatowe.

Dziękuję Wam za pomoc, oba Wasze przykłady działają.

Wielkie DZIĘKI!


Pozdrawiam,
Łukasz
Zoltarianie
11.04.2007, 10:33:56
Miałem podobny problem tylko że w pionie smile.gif
Do obrazka w FF był dziwny margin 3px i usunąłem go dodając styl img "vertical-align: top;" można też "display: block;" ale wtedy będzie problem z treścią.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4.  <title>test</title>
  5.   <style type="text/css">
  6.    img {vertical-align: top;}
  7.   </style>
  8.  </head>
  9.  <body style="padding: 0px; margin:0px;">
  10.   <div id="kontener">
  11.    <div style="border: 1px solid #0000ff;">
  12.     <img style="border: 1px solid #ff00ff;" src="http://www.opera.com/graphics/logos/linux.gif" alt="" />
  13.    </div>
  14.    <div style="border: 1px solid #0000ff;">
  15.     <img style="border: 1px solid #ff00ff;" src="http://www.opera.com/graphics/logos/linux.gif" alt="" />
  16.    </div>
  17.   </div>	
  18.  </body>
  19. </html>
[HTML] pobierz, plaintext
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.