Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] obramowanie obrazka
Forum PHP.pl > Forum > Przedszkole
poxrimex
25.01.2008, 14:57:35
Witam!

w css jak mam diva logo, którego wysokość jest 100 px i kolor tła czarny. W tego diva wstawiam obrazek również o wysokości 100px, a wtedy sam div rozszerza mi się mniejwięcej do 105px, lecz tylko w przeglądarce IE. Jak to zlikwidować?
b_chmura
25.01.2008, 15:01:35
Kod
img
{
  border: 0px;
}
poxrimex
25.01.2008, 15:03:02
niestety nic to nie pomogło sadsmiley02.gif
phpion
25.01.2008, 15:03:22
Dla tego obrazka w divie ustaw styl:
[HTML] pobierz, plaintext 
  1. display: block; margin: 0px;
[HTML] pobierz, plaintext

a dla samego diva dla pewności jeszcze:
[HTML] pobierz, plaintext 
  1. padding: 0px;
[HTML] pobierz, plaintext

Powinno pomóc.
b_chmura
25.01.2008, 15:04:25
div nie ma czasem marginesów poustawianych lub paddingu?
poxrimex
25.01.2008, 15:10:23
Hehe nadal ni **** nie działa, oto kody:

Strona.css (style):
[HTML] pobierz, plaintext 
  1. html, body
  2. {
  3. margin-top: 0px;
  4. margin-left: 0px;
  5. margin-right: 0px;
  6. margin-bottom: 0px;
  7. }
  8.  
  9. #strona
  10. {
  11. width: 900px;
  12. margin-left: auto;
  13. margin-right: auto;
  14. float: center;
  15. }
  16.  
  17. #logo
  18. {
  19. width: 900px;
  20. text-align: center;
  21. clear: both;
  22. margin-left: auto;
  23. margin-right: auto;
  24. background-color: black;
  25. float: center;
  26. }
[HTML] pobierz, plaintext


a to html:

[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <!-- Początek Atrybutów Head --!>
  4. <head>
  5. <link rel="Stylesheet" type="text/css" href="strona.css" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. <meta name="language" content="pl" />
  8. </head>
  9. <!-- Koniec Atrybutów Head --!>
  10.  
  11. </body>
  12. <!-- Deklaracja divu strona --!>
  13. <div id="site">
  14.  
  15. <div id="logo">
  16. <img src="logo.gif" style="width: 360px; height: 100px;"/>
  17.  
  18.  
  19. </div>
  20.  
  21. </div>
  22. <!-- Div zamykający strona --!>
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29. </body>
  30.  
  31. </html>
[HTML] pobierz, plaintext


Dodam, że tak się dzieje tylko w IE i w IE nie działają mi marginesy do tych divów
pijanyadmin
25.01.2008, 15:12:06
sprawdziłem to przed chwilą i działa bez problemu, jak dodajesz ten obrazek?

Kod
IMG {border: 0px;}


dla

Kod
<img src="img/logo.png" alt="logo" />


nie pisz tego w css jako

Kod
#IMG {border: 0px;}


czy

Kod
.IMG {border: 0px;}
poxrimex
25.01.2008, 15:14:29
No mi nadal nie działa.

Przypominam! Tylko pod Internet Explorer
pijanyadmin
25.01.2008, 15:18:15
css:
Kod
html, body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#strona
{
width: 900px;
margin-left: auto;
margin-right: auto;
float: center;
}

#logo
{
width: 900px;
text-align: center;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: black;
float: center;
}

IMG {border: 0px;}


napewno tak dodałeś?
poxrimex
25.01.2008, 15:20:57
tak samo ;/
mike
25.01.2008, 15:22:27
Cytat(poxrimex @ 25.01.2008, 15:14:29 ) *
Przypominam! Tylko pod Internet Explorer
Kolejny popularny bug badzIEwia.
Nie tak:
[HTML] pobierz, plaintext 
  1. <div id="logo">
  2. <img src="logo.gif" style="width: 360px; height: 100px;"/>
  3.  
  4.  
  5. </div>
[HTML] pobierz, plaintext
tylko tak:
[HTML] pobierz, plaintext 
  1. <div id="logo"><img src="logo.gif" style="width: 360px; height: 100px;"/></div>
[HTML] pobierz, plaintext
smile.gif
poxrimex
25.01.2008, 15:27:30
 Mike smile.gif Twój post mi pomógł biggrin.gif

Faktycznie badziewie IE szkoda że użytkownicy są tacy głupi i z tego korzystają ...

Teraz mam problem, gdyż nie mogę tych divów wyśrodkować, oczywiście w IE
pijanyadmin
25.01.2008, 15:30:09
emm bug? e gadacie, lepiej byłoby logo zrboić osobno w css, po co dodajesz do img

Kod
style="width: 360px; height: 100px;"


Kod
<div id="czarnepole">
   <div id="logo></div>
</div>
poxrimex
25.01.2008, 15:31:43
dobra ta sprawa rozwiązana.

Przy divie gdzie tylko logo jest to mogę to stosować mi to nie przeszkadza. Teraz mi chodzi o to jak wyśrodkować te divy w IE
b_chmura
25.01.2008, 15:48:10
potrzebne Ci będą dwa divy
Kod
<div id="center">
  <div id="tekst">wycentrowany div</div>
</div>


i style
Kod
#center
{
  text-align: center;
  width: 200px;
  height: 200px;
}
#tekst
{
  margin: 0 auto;
  width: 100px;
  height: 100px;
}
pijanyadmin
25.01.2008, 15:55:43
albo jeśli xhtml to w css

Kod
#logo{
margin-left: auto;
margin-right: auto;
background-image: url(logo.gif);
background-repeat:no-repeat;
width: 360px;
height: 100px;
}


za wyśrodkowanie danego elementu odpowaidają:

Kod
margin-left: auto;
margin-right: auto;


natomiast
Kod
text-align:center;
odpowiada tylko za wyśrodkowanie tekstu w div
poxrimex
25.01.2008, 16:02:44
no tak niby
auto
auto
odpowiadają za wyśrodkowanie elementu wszystko ok, ale nie w IE sadsmiley02.gif
potreb
25.01.2008, 16:04:21
Daj w body:
text-align: center;

A w divie text-align: left; margin: 0 auto;

Niestety IE to łopatologia 2 rzędu
pijanyadmin
25.01.2008, 16:27:39
obstawiam że Twoje problemy z IE znikną jeśli napiszesz to odpowiednio jako xhtml i dodasz doctype:

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>costam na belce tytulowej</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>


wtedy zadziała to co Ci napisałem wcześniej
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.