Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] odstęp pomiędzy div z img
kossa
post 2.03.2007, 01:25:57
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)


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


--------------------
www.digate.pl
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
kwiateusz
post 2.03.2007, 01:55:50
Post #2


Admin Techniczny


Grupa: Administratorzy
Postów: 2 071
Pomógł: 93
Dołączył: 5.07.2005
Skąd: Olsztyn
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
Go to the top of the page
+Quote Post
Zajec
post 2.03.2007, 10:17:51
Post #3





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

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

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
Go to the top of the page
+Quote Post
babejsza
post 2.03.2007, 10:24:24
Post #4





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

[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
Go to the top of the page
+Quote Post
kossa
post 2.03.2007, 12:19:05
Post #5





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

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

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


--------------------
www.digate.pl
Go to the top of the page
+Quote Post
Zoltarianie
post 11.04.2007, 10:33:56
Post #6





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 4.08.2006

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

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


Ten post edytował Zoltarianie 11.04.2007, 10:34:41
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 23.06.2025 - 19:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn