wiele godzin spedzilem nad produkcja ponizeszego kodu. jest to kombinacja wielu tutoriali i tak dalej ktorych pewnie wielu z was widzialo. mianowicie chodzi o stworzenie layouta z samych div'ów do ktorego na twardo będo wpychane dane. dlatego zależy mi na tym aby był elastyczny. problem polega na tym, że po odpaleniu calośći w IE jest GIT ale na przyklad firefox juz odmawia posluszenstwa. chodzi o to ze treść wychodząca poza że tak powiem wysokość jest niewidoczna. można ja przewijać samym kursorem, natomiast pasek przewijania przeglądarki ma "to w pupie". jeżeli sie nie obrazicie wkleje tu caly kod, bedzie szybciej a strasnie zalezy mi na czasie
- Kod: Zaznacz cały
<style type="text/css">
<!--
/*layout właściwy*/
html, body {
margin:0;
padding:0;
height:100%; /*tego potrzebują Geckowate przeglądarki ;-)*/
}
/*zapis dla IE, aby wycentrował warstwę*/
* * body {
text-align:center;
}
#glowna {
position:relative; /*to pozwoli na późniejsze pozycjonowanie elementów
wewnątrz tej warstwy wg jej lewego górnego rogu*/
width:770px;
min-height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
* html #glowna {
height:100%; /*zapis dla IE, który nie rozumie min-height oraz błędnie interpretuje height*/
text-align:left;
}
#naglowek {
position:absolute;
top:0;
left:0;
width:770px;
height:50px;
z-index:10; /*żeby nagłówka nie zakrywało*/
}
#stopka {
position:absolute;
bottom:0;
left:0;
width:770px;
height:30px;
}
* html #stopka {
bottom:-1px; /*IE nie wiedzieć czemu zostawia 1px wolnego miejsca na dole*/
}
#strona {
position:relative;
width:770px;
background-color:transparent;
z-index:10; /*żeby zawartość strony była nad tłem*/
}
#blok {
float:left;
width:128px;
height:100%;
}
#strona .lewa {
float:left;
width:120px;
overflow:hidden; /*żeby zawartość kolumny nie wychodziła poza jej szerokość*/
}
/*dzięki poniższemu zapisowi w IE .lewa nie jest za szeroka i nie ucieka na dół*/
* html #strona .lewa {
width:120px;
}
#strona .srodek {
float:right;
width:8px;
overflow:hidden;
}
#strona .prawa {
float:left;
width:642px;
height:100%;
overflow:hidden;
}
#tlo {
position:absolute;
top:0px; /*wysokość nagłówka*/
bottom:0px; /*wysokość stopki*/
width:770px;
z-index:0;
}
* html #tlo {
top:0px; /*wysokość stopki*/
height:100%;
}
#tlo .lewa {
float:left;
width:120px;
height:100%;
}
#tlo .prawa {
float:right;
width:642px;
height:100%;
}
.klir {
clear:both;
height:1px;
visibility:hidden;
}
/*kolorki itp. :]*/
body {
background-color:#34BEC9;
color:#004080;
}
div {
text-align:center;
font-family:"Trebuchet MS";
}
#stopka {
background-color:#D6FCB8;
}
#naglowek {
background-color:#B8D5FC;
}
#tlo {
background-image:url(j1a.gif);
}
#tlo .lewa {
background-color:#FFA0A0;
}
#tlo .prawa {
background-color:#FF8080;
}
#wrap {
width:642px;
}
#prawej_lewy {
float:left;
width:320px;
}
#prawej_prawy {
float:right;
width:322px;
}
//-->
</style>
<body>
<div id="glowna">
<div id="strona">
<div id="blok">
<div class="srodek">#srodek</div>
<div class="lewa">#lewa</div>
</div>
<div class="prawa">
<div>aaa</div>
<div>bbb</div>
<div id="wrap">
<div id="prawej_lewy">
yyy </div>
<div id="prawej_prawy">bbb</div>
</div>
<hr class="klir" />
</div>
<hr class="klir" />
</div>
<div id="tlo">
<div class="lewa"></div>
<div class="prawa"></div>
</div>
</div>
</body>
wklejcie to do jakiegos htmla i obejrzyjcie wynik pod IE i firefoxem. na poczatku wszystko bedzie gralo ale jak na przykład "wypchniecie" kolumne YYY albo zzz to już będzie KISZKA, pod firefoxem, a pod IE nie.
BÂŁAGAM POMOCY
z góry dzięki
