Forum PHP.pl > [css] pozycjonowanie :/

Pomoc - Szukaj - Użytkownicy - Kalendarz

Assamite

28.08.2006, 12:57:51

Witam.
Mam problem z pozycjonowaniem div-ów w różnych przeglądarkach.
Firefox wyświetla wszystko ok (no prawie, ale o tym za chwilę) i wygląda to tak:

firefox.

I to jest to, co chciałbym uzyskać.
Niestety Netscape już się gubi w jednej rzeczy:

netscape.

Widać, że nie interpretuje poprawnie clear: both (kod poniżej).
A IE, to już wogóle robi misz-masz:

ie.
W IE można pokombinować trochę z rozmiarami i się jakoś te 3 górne div-y robią poprawne, ale lewy, prawy i centrum dalej nie są w jednej linii obok siebie, chociaż zastosowałem taki sam manewr jak niżej z lewym menu i zawartością i tam już działa :/.

Kod strony:

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">

html, body { height: 100%; }

#glowny
{
   margin: auto;
   border-width: 2px;
   border-color: #000000;
   border-style: solid;
   padding: 0px;
   width: 756px;
   background-color: #FFFFFF;
}

#naglowek
{
   border-top: 0px;
   border-left: 0px;
   border-right: 0px;
   border-bottom: 2px;
   border-color: #000000;
   border-style: solid;
   background-color: #FFc123;
}

#logowanie
{
   background-color: #0ec179;
}

#banner
{
   background-color: #0ff119;
}

#menugorne
{
   background-color: #f22551;
}

#stopka
{
   border-top: 2px;
   border-left: 0px;
   border-right: 0px;
   border-bottom: 0px;
   border-color: #000000;
   border-style: solid;
   background-color: #555511;
}

#srodek
{
   background-color: #123456;
   clear: both;
}

#lewemenu
{
   float: left;
   margin-left: -177px;
   width: 178px;
   position: relative;
   background-color: #0000FF;
   left: -3px;
}

#zawartosc
{
   border-top: 0px;
   border-left: 2px;
   border-right: 0px;
   border-bottom: 0px;
   border-color: #000000;
   border-style: solid;
   background-color: #00FF00;
   margin-left: 178px;
}
html #zawartosc { height: 1%; margin-left: 178px; }

#random
{
   background-color: #00FFFF;
   border-top: 2px;
   border-left: 0px;
   border-right: 0px;
   border-bottom: 0px;
   border-color: #000000;
   border-style: solid;
}

#lewe
{
   background-color: #FFFF00;
   width: 252px;
   float: left;
}

#centrum
{
   background-color: #F0F0F0;
   width: 252px;
   margin-left: 252px;
}
html #centrum { height: 1%; margin-left: 504px; }

#prawe
{
   background-color: #5F0F0F;
   width: 252px;
   float: left;
   margin-left: -252px;
   position: relative;
}

</style>
</head>
<body>

<div id="glowny">
   <div id="naglowek">
    <div id="logowanie">
        logowanie
        </div>
    <div id="banner">
        <img src="logo.jpg" width="600" height="150">
        </div>
    <div id="menugorne">
        menugorne
        </div>
        <div id="random">
        <div id="lewe">
            lewe
        </div>
        <div id="centrum">
            <div id="prawe">
                prawe, prawe, prawe<br>
                prawe, prawe, prawe<br>
                prawe, prawe, prawe<br>
                prawe, prawe, prawe<br>
            </div>
            srodek, srodek, srodek, srodek, srodek, srodek
        </div>
        </div>
   </div>
   <div id="srodek">
        <div id="zawartosc">
            <div id="lewemenu">
                lewemenu<br>
                lewemenu<br>
                lewemenu<br>
                lewemenu<br>
            </div>
            tresc<br>
            tresc<br>
            tresc<br>
            tresc<br>
            tresc<br>
            tresc<br>
            tresc, tresc, tresc, tresc
        </div>
   </div>
   <div id="stopka">
        stopka
   </div>
</div>

</body>
</html>

Druga sprawa to taka, że nie działają mi w tym przypadku obrazki, co mnie już wogóle zdziwiło. Tutaj o dziwo najlepiej radzi sobie IE, który ten obrazek pokazuje (jest pusty link do obrazka, ale wymiary są podane, aby było widać gdzie jest):

ie_obrazek.

Natomiast Mozilla i Netscape wogóle nie pokazują tego obrazka (obie przeglądarki tak samo):

firefox_obrazek.

Będę wdzięczny za wszelkie sugestie, dotyczące zarówno tego złego pozycjonowania, jak również znikania obrazków.

Assamite

Ps. Z tym pozycjonowaniem, to domyślam się, że chodzi o relative, ale absolute mnie wogóle nie satysfakcjonuje. A jeśli chodzi o to, które zastosowałem, to wzorowałem się na tym: wzor.

Jeszcze raz z góry dziękuję.

MatheW

28.08.2006, 13:02:06

bardzo pomocne sa hacki, gdzie mozesz dac inne pozycjonowanie dla IE, a inne dla FF, Opery http://www.mynthon.net/articles/css/szybkie_hacki

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.