Witajcie. Mam ogromny problem i nie umiem sobie poradzić. Pomóżcie.
Efekt jaki chciałem osiągnąć to:
1. Środkowa kolumna zawsze na środku o niezmniejszajacej sie szerokosci, np. zawsze 200px. Nic na nia nie zachodzi, moze sie powiekszac w szerokosc ale nie mniej niz minimum.
2. Kolumna lewa i prawa wypelnia pozostala czesc ekranu
3. WAZNE! Podczas zmniejszenia szerokosci kolumn skrajnych ucinaja sie one od zewnatrz a nie od strony kolumny srodkowej (tam bowiem mam rozjasnienie)
Kod na stronie (teraz jest tak)
Kod
.nakladka_prawa {
position:absolute;
top:40px;
right:0;
width:40%;
background-image: url(../elements/nakladka_prawa.png);
background-repeat: no-repeat;
background-position: 0px 0px;
min-height: 100%;
height: auto !important;
height: 100%;
background-color:green;
opacity:0.1;
display:inline;
}
#nakladka_pusta {
top:40px;
width:20%;
min-width:200px !important;
background-repeat: no-repeat;
background-position: 8% 0px;
height:250px;
position:absolute;
margin-left:40%;
background-color:red;
opacity:0.1;
position:absolute;
display:inline;
}
.nakladka_lewa {
position:absolute;
top:40px;
width:40%;
left:0;
background-image: url(../elements/nakladka_lewa.png);
background-repeat: no-repeat;
background-position: 0px right;
min-height: 100%;
height: auto !important;
height: 100%;
}
position:absolute;
top:40px;
right:0;
width:40%;
background-image: url(../elements/nakladka_prawa.png);
background-repeat: no-repeat;
background-position: 0px 0px;
min-height: 100%;
height: auto !important;
height: 100%;
background-color:green;
opacity:0.1;
display:inline;
}
#nakladka_pusta {
top:40px;
width:20%;
min-width:200px !important;
background-repeat: no-repeat;
background-position: 8% 0px;
height:250px;
position:absolute;
margin-left:40%;
background-color:red;
opacity:0.1;
position:absolute;
display:inline;
}
.nakladka_lewa {
position:absolute;
top:40px;
width:40%;
left:0;
background-image: url(../elements/nakladka_lewa.png);
background-repeat: no-repeat;
background-position: 0px right;
min-height: 100%;
height: auto !important;
height: 100%;
}