Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Problem w IE z odstępem między divami
dawidoff86
post 16.04.2010, 10:03:00
Post #1





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 17.02.2010

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

witam!
mam wydaje mi się bardzo prosty problem. otóż mam 3 divy, które ułożone są obok siebie. dwa boczne przechowują obrazek, środkowy jakiś dowolny tekst. problem z tym jest taki że w przeglądarce IE występuje małą przerwa pomiędzy divami bocznymi, a środkowym.
kod strony wygląda tak:
[HTML] pobierz, plaintext 
  1.     <body>
  2.         <div id="pasek_naglowek_lewy"><img src="grafika/lewy.gif" alt="" style="width: 50px; height: 50px;"/></div>
  3.         <div id="pasek_naglowek_prawy"><img src="grafika/prawy.gif" alt="" style="width: 50px; height: 50px;"/></div>
  4.          <div id="pasek_naglowek">Przykładowy tekst!</div>
  5.     </body>
[HTML] pobierz, plaintext

a css
[CSS] pobierz, plaintext 
  1. html, body
  2. {
  3.     background-color: green;
  4.     text-align: center;
  5.     color: #000;
  6.     margin: 0;
  7.     padding: 0;
  8. }
  9.  
  10. #pasek_naglowek
  11. {
  12.     margin-left: 50px;
  13.     margin-right: 50px;
  14.     background: url("grafika/srodkowy.gif");
  15.     background-repeat: repeat;
  16.     height: 50px;
  17.     padding-left: 0px;
  18.     padding-right: 0px;
  19.     text-align: left;
  20.     color: white;
  21.     overflow: visible;
  22. }
  23.  
  24.  
  25. #pasek_naglowek_lewy
  26. {
  27.     margin: 0px;
  28.     padding: 0px;
  29.     width: 50px;
  30.     height: 50px;
  31.     float: left;
  32.     overflow: visible;
  33.     position: relative;
  34.     background-color: transparent;
  35. }
  36.  
  37. #pasek_naglowek_prawy
  38. {
  39.     margin: 0px;
  40.     padding: 0px;
  41.     width: 50px;
  42.     height: 50px;
  43.     float: right;
  44.     overflow: visible;
  45.     position: relative;
  46.     background-color: transparent;
  47. }
[CSS] pobierz, plaintext

w IE wygląda to następująco:

a efekt jaki chce uzyskać to:


Ten post edytował dawidoff86 16.04.2010, 10:51:43
Go to the top of the page
+Quote Post
pedro84
post 16.04.2010, 10:15:31
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Musisz ustawić zerowy margin oraz padding ale dla <img>. Powinno pomóc.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
dawidoff86
post 16.04.2010, 10:18:33
Post #3





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 17.02.2010

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

powinno ale nie pomogło
[HTML] pobierz, plaintext 
  1. <div id="pasek_naglowek_lewy"><img src="grafika/lewy.gif" alt="" style="width: 50px; height: 50px; padding: 0px; margin: 0px;"/></div>
  2. <div id="pasek_naglowek_prawy"><img src="grafika/prawy.gif" alt="" style="width: 50px; height: 50px; padding: 0px; margin: 0px;"/></div>
[HTML] pobierz, plaintext

wszystko pozostało bez zmian.

Ten post edytował dawidoff86 16.04.2010, 10:18:54
Go to the top of the page
+Quote Post
pedro84
post 16.04.2010, 10:30:17
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

W jakiej wersji IE?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
dawidoff86
post 16.04.2010, 10:34:38
Post #5





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 17.02.2010

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

IE7

a może jest jakiś inny sposób na uzyskanie takiego efektu?

Ten post edytował dawidoff86 16.04.2010, 11:00:00
Go to the top of the page
+Quote Post
mortus
post 16.04.2010, 11:11:17
Post #6





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

A te marginesy co robią:
[CSS] styl.css - pobierz, plaintext 
  1. #pasek_naglowek {
  2. margin-left: 50px;
  3. margin-right: 50px;
  4. background: url("grafika/srodkowy.gif");
  5. background-repeat: repeat;
  6. height: 50px;
  7. padding-left: 0px;
  8. padding-right: 0px;
  9. text-align: left;
  10. color: white;
  11. overflow: visible;
  12. }
[CSS] styl.css - pobierz, plaintext
Poza tym źle to robisz. Umieszczaj obrazki jako background dla elementów div, a nie w znacznikach <img />. Poczytaj na Google o "rounded corners" lub po polsku "zaokrąglone rogi". Może naprowadzi Cię to na właściwe rozwiązanie.
Go to the top of the page
+Quote Post
dawidoff86
post 16.04.2010, 11:38:59
Post #7





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 17.02.2010

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

Cytat(mortus @ 16.04.2010, 12:11:17 ) *
A te marginesy co robią:

skoro div lewy i prawy mają po 50pixeli,to te marginesy powodują że div środkowy rozpocznie się w miejscu, gdzie kończy się lewy i zakończy gdzie rozpoczyna się prawy.
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 16:57:40
Post #8





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

[CSS] pobierz, plaintext 
  1. <style>
  2.  
  3. #lewa {
  4. width: 100px;
  5. height: 30px;
  6. background: #3399ff;
  7. float: left;
  8. }
  9.  
  10. #srodek {
  11. width: 500px;
  12. height: 30px;
  13. background: #00ff00;
  14. float: left;
  15. }
  16.  
  17. #prawa {
  18. width: 100px;
  19. height: 30px;
  20. background: #ff0000;
  21. float: left;
  22. }
  23. </style>
  24.  
  25. <div id="lewa"></div>
  26. <div id="srodek"></div>
  27. <div id="prawa"></div>
  28.  
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: 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: 12.06.2025 - 17:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn