[css] rozjeżdzająca się strona przy małej rozdzielczości ekranu

[nitroduxe]

Witam wszystkich.

Mam problem związany z wyświetlaniem się strony przy małej rozdzielczości - obecnie sprawdzam w 1024x768 ale także przy mniejszych się też rozwala.

CSS uczę się dopiero od niedawna. Stronę mam podzieloną na kilka sekcji DIV (calosc a w niej naglowek, menu , glowna-lewo,tresc, glowna prawo, stopka) dodatkowo naglowek mam podzielony na (naglowek-lewy, naglowek-srodek i naglowek-prawy)

Problem najbardziej widać przy rozwalającym się nagłówku
w Divie lewym i prawym mam małe obrazki o szerokości 13px, natomiast nagłowek środek mam szerokości 887px.

Kod:

#NAGLOWEK-LEWY{
    position: absolute;
    margin-left: 150px;
    width: 13px;
    height: 180px;
    background-image: url('index_files/gora_tlo_lewo.png');
    float:left;
}

#NAGLOWEK-SRODEK {
    position: relative; left: 163px;
    height: 180px;
    width: 887px;
    background-image: url('index_files/logo_anim2.gif');
    float: left;    
}

#NAGLOWEK-PRAWY{    
    position:relative; left: 162px;    
    background-image: url('index_files/gora_tlo_prawo.png');
    height:180px;
    width:13px;
    float: left;
    
}

Bardzo proszę o pomoc, ponieważ trochę się już z tym męczę i nie bardzo wiem, gdzie leży problem. Zależy mi na tym aby pozostawić tam te 3 divy i nie chcę kombinować z 1.

Pozdrawiam

[Kartofelek]

Jeżeli chcesz mieć spokój, stosuj 1 z podstawowych technik tworzenia stron na DIVach:

Obejmij wszystko DIV-kontenerem, daj mu width i margin:0 auto. Caly naglowek, content itp idzie do kontenera.
Tyle wystarczy.

[nitroduxe]

Tak też mam teraz i górny obrazek jest jakby mniejszy przez co nie dociąga do dolnej całości

Kod:

    <div id="CALOSC">
    <div id="top">
    <div id="NAGLOWEK">
    <div id="NAGLOWEK-LEWY"></div>
    <div id="NAGLOWEK-SRODEK"></div>
    <div id="NAGLOWEK-PRAWY"></div>
    </div>
    <div id="MENU">
    <div id="kontener">
    <div id="GLOWNA-LEWO">    
    </div>    
    <div id="TRESC">
    </div>    
    <div id="GLOWNA-PRAWO">        
    </div>    
    <div id="MIDDIV2"></div>
    <div id="STOPKA">        
        </div>
    </div>    
    </div>
    </div>
    </div>

[Kartofelek]

Z samego kodu ogólnie średnio się zorientować co jest nie tak.

[nitroduxe]

Tutaj już mam prawie idelanie tylko nie widzę teraz tego div "NAGLOWEK-PRAWY", widze go dopiero przy duzej rozdzielczosci albo jak zmniejsze strone w IE np do 80%

Kod:

#NAGLOWEK-LEWY{
    position: absolute;
    margin-left: 150px;
    width: 13px;
    height: 180px;
    background-image: url('index_files/gora_tlo_lewo.png');
    float:left;
}
#NAGLOWEK-SRODEK {
    position: absolute; left: 162px;
    height: 180px;
    width: 887px;
    background-image: url('index_files/logo_anim2.gif');
    float: left;    
}

#NAGLOWEK-PRAWY{    
    position:relative; /*left: 162px;    */
    background-image: url('index_files/gora_tlo_prawo.png');
    height:180px;
    width:13px;
    left: 1049px;
    /*float: left;*/
}

co więc zrobić z tym Naglowkiem prawym ? (jego szerokosc to 13 px )

TUTAJ miej więcej pokazuje jak to wygląda -> http://img130.imageshack.us/img130/3226/strif.jpg

[Kartofelek]

Zle.
Mieszasz logiki
Albo używasz position:absolute; albo floatów.
Ja pewnie bym to zrobił tak:

lewy = position:absolute; left:0; top:0;
prawy = position:absolute; right:0; top:0;
srodek - zadnego position; margin-left:szersokosc_lewego_elemnu px

lub

lewy: float:left;
srodek: float:left;
prawy: float:left lub right - tutaj nie ma znaczenia
Oczywiscie wszystkie musza miec ustawione wymiary.

[nitroduxe]

Ok efektem obu przypadków jest taki efekt:

http://img254.imageshack.us/img254/8720/str2.png

kod1:

Kod:

#NAGLOWEK-LEWY{
    position: absolute; left:0; top:0;
    height:180px;
    width:13px;
}
#NAGLOWEK-SRODEK {    
    margin-left:13px;
    background-image: url('index_files/logo_anim2.gif');
    height:180px;
    width:900px;
}

#NAGLOWEK-PRAWY{    
    position:absolute; right:0; top:0;
    height:180px;
    width:13px;
}

KOD2:

Kod:

#NAGLOWEK-LEWY{
    float:left;
    height:180px;
    width:13px;
}
#NAGLOWEK-SRODEK {    
    float:left;
    background-image: url('index_files/logo_anim2.gif');
    height:180px;
    width:900px;
}

#NAGLOWEK-PRAWY{    
    float:left;
    height:180px;
    width:13px;
}

Dodam jeszcze jak wygląda div samego nagłówka w którym siedzą te wszystkie trzy:

Kod:

#NAGLOWEK{
vertical-align: center;
overflow: hidden;
}

[Kartofelek]

Tresc masz w kontenerze. Naglowek masz poza nim. Zapewne oba elementy są inaczej pozycjnowane w poziomie. A może po prostu mają inną szerokość. Jak mówiłem - daj wszystko w jeden blok. Ten blok pozycjonuj jak pisałem. Nie ma prawa nie działać.

[nitroduxe]

Kurde no nie wiem naprawdę nie wiem wywaliłem DIV Nagłówek i dalej mam ten górny obszar czyli naglowek-lewy , naglowek-srodek i naglowek-prawy przesuniete do lewej a calosc jest wysrodkowana.

wkleje caly kod css od tych elementów:

Kod:

#CALOSC{
    width: 0 auto;
    margin: 0 auto 0 auto;
}

#NAGLOWEK-LEWY{
    float:left;
    height:186px;
    width:13px;
}
#NAGLOWEK-SRODEK {    
    float:left;
    background-image: url('index_files/logo_anim2.gif');
    height:186px;
    width:900px;
}

#NAGLOWEK-PRAWY{    
    float:left;
    height:186px;
    width:13px;
}


#MENU {
    padding: 0px;
    background-image: url('index_files/menu_podklad.jpg');
    width: 913px;
    margin-left: 150px;
    height: 40px;
    float: left;
    background-color: #ccc;
    
}

#GLOWNA-LEWO {
    margin-top: 3px;
    padding: 3px;
    width: 180px;
    margin-top: 2px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;    
    float: left;
    background-image: url('index_files/tlo_box_prawy.jpg');
    
}
#TRESC {
    padding: 3px;
    margin-top: 2px;    
    margin-left: 0px;
    margin-right: 0px;
    float: left;
    width: 540px;  
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    background-color: #dcb848;
    
}

#GLOWNA-PRAWO {
    margin-top: 3px;
    padding: 3px;
    width: 175px;
    margin-top: 2px;
    overflow: hidden;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    float: left;
    background-image: url('index_files/tlo_box_lewy.jpg');

}

#kontener{
    overflow: hidden;
}

#MIDDIV2{
    clear: both;
}

#STOPKA {
    position: relative;    
    height: 40px;
    margin-left: 0px;
    margin-right: 00px;
    clear: both;
    background-image: url('index_files/dol_tlo.jpg');
}

i css do tego :

Kod:

    <div id="CALOSC">
    
    <div id="NAGLOWEK-LEWY"></div>
    <div id="NAGLOWEK-SRODEK"></div>
    <div id="NAGLOWEK-PRAWY"></div>
    
    <div id="MENU">
    
    <div id="kontener">
    
    <div id="GLOWNA-LEWO">
    </div>
    
    <div id="TRESC">
    </div>    
    
    <div id="GLOWNA-PRAWO">
    </div>
    
    <div id="MIDDIV2"></div>
    
    <div id="STOPKA">    
    </div>
    
    </div> // koniec kontenera
    </div> // koniec MENU
    </div> // koniec calosci

może gdzie indziej mam coś źle ?

[Engine]

Kod:

#CALOSC{
    width: 0 auto;
    margin: 0 auto;
    width:900px;
}