Forum PHP.pl > [PHP][HTML][CSS] Div poprawne wyświetlanie w IE

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP][HTML][CSS] Div poprawne wyświetlanie w IE

PiiiT

27.10.2008, 17:38:29

Witam, mam problem z wyświetlaniem poprawnie divów w operze i firefoxie. Otóż w IE divy są ułożone jeden pod drugim, w pozostałych przypadkach widoczna jest przerwa ok 3px pomiędzy div id=baner i id= menu.. Natomiast stopka nie wyświetla się wogóle na żadnej przeglądarce mimo iż jest to kopia id=menu i ma wyświetlić tło na całej szerokości ekranu. Z góry dziękuję za pomoc.

[HTML] pobierz, plaintext 
<body style="background-color: #000000" ><div  id="baner" align=center style="background-image:url(images/banerbg.gif); background-position:top; background-repeat:x-repeat;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><img src="images/baner.gif"></div><div  id="menu" align="center" style="background-image:url(images/menubg.gif); background-repeat:x-repeat; "><? include 'menu2.php'; ?></div><table align="center" width="800"><tr><td><div id="content" style="text-indent: 2em; line-height: 150%; text-align: justify; background-color: #000000; color: #2d88f9"><FONT FACE="Verdana"><h3 style="color: #ffffff">Witamy na stronie</h3><p align=right><b>Zapraszamy!</p><BR></FONT></div></td></tr><table><div id="stopka" align="center" style="background-image:url(images/menubg.gif); background-repeat:x-repeat;"></div><BR>
[HTML] pobierz, plaintext

hiszpanespaniol

27.10.2008, 17:50:28

mnóstwo błędów. powycinaj sobie wszystkie style do pliku w którym masz zdefioniowane dla id style. poza tym powinno być repeat-x a nie x-repeat w dwóch miejscach.

poza tym chyba korzystałeś z jakiegoś kreatora i niepotrzebnie narobił Ci bałaganu... naprawdę, przez duże B

edit:
tuż za obrazkiem kończysz div'a który się nigdy nie zaczął

edit2:
zapewne ten niezaczęty div, to div#banner. to lepiej skasuj tego div'a, a id przypisz do obrazka. później w css daj dla obrazka display: block i zerowe marginesy/paddingi. obrazki same w sobie mają odstępy dookoła i to pewnie przyczyna.

div banner jest w porządku, zaczyna się i kończy, przepraszam. ale skasować nie zaszkodzi

PiiiT

27.10.2008, 18:18:04

Czyli nie muszę korzystać z divów żeby nadać poszczególnym elementom tło które się powtarza w poziomie? Nie wiedziałem jak to rozwiązać i tylko przy takim zapisie tło powtarzało się (takie coś znalazłem gdzieś na google), nigdy nie korzystałem z css i może dlatego powstał taki bałagan. Poczytam na temat css. Dzięki za pomoc.Pozdrawiam,

hiszpanespaniol

27.10.2008, 18:28:36

Cytat

Czyli nie muszę korzystać z divów żeby nadać poszczególnym elementom tło które się powtarza w poziomie?

nie musisz korzystać z div'ów prawie nigdy. zależy od złożoności layoutu. za wyświetlanie grafiki odpowiada img, za nagłówek odpowiada h1, za menu odpowiada ul/ol itd. do dowolnego elementu możesz sobie przypisać tło i całkiem zmienić jego zachowanie.

no właśnie jak poznasz css to zobaczysz jakie to piękne jest... w teorii. praktyka bywa wkurzająca z uwagi na niektóre "przeglądarki". ale generalnie pracy i stresu masz około 20 razy mniej

PiiiT

28.10.2008, 19:32:23

Proszę jeszcze o podpowiedź bo nie mogę znaleźć błędu. Mam teraz takie coś w głównym dokumencie:
Obrazek który ma być na środku a tło ma się powtarzać w poziomie:

Kod

i plik ze stylami:

Kod

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:0px;
  background-image: url('images/banerbg.gif');
  background-repeat: repeat-x

}

wyświetla obrazek na środu strony ale nie powtarza tła w poziomie, obrazek jest w podanej lokalizacji. Z góry dziękuję za pomoc!

piotrooo89

29.10.2008, 08:33:10

tak sie zastanawiam czy nie powinieneś tego

[HTML] pobierz, plaintext 
background-image: url('images/banerbg.gif');
  background-repeat: repeat-x
[HTML] pobierz, plaintext

nadać divowi w którym wyświetlany jest obrazek

Barton

29.10.2008, 09:12:27

piotrooo89 ma racje. I nie zapomnij dodać ';' na końcu linijki, tj.:

[HTML] pobierz, plaintext 
background-image: url('images/banerbg.gif');
  background-repeat: repeat-x;
 
}
[HTML] pobierz, plaintext

PiiiT

29.10.2008, 13:12:06

Dzięki wielkie!!

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.