divów.
Witam :-)
Trafiłem na coś, w moim mniemaniu, paskudnego. Utworzony jest div zawierający w sobie sześć innych. Pięć z nich używam do zrobienia obramowania- czyli narożniki górne, lewa/prawa granica, część górna. Dolne części są pominięte. Fragment css:
div#content{
float: left;
clear: right;
width: 663px;
height: auto;
background-color: white;
}
div#content_tl{
float: left;
width: 20px;
background-image: url("grafika/n-tl.jpg");
}
div#content_tt{
float: left;
width: 603px;
background-image: url("grafika/n-tt.jpg");
background-repeat: repeat-x;
}
div#content_tr{
float: right;
width: 40px;
background-image: url("grafika/n-tr.jpg");
}
div#content_ml{
float: left;
height: 100%;
width: 11px;
background-image: url("grafika/n-sl.jpg");
background-repeat: repeat-y;
}
div#content_main{
float: left;
width: auto;
height: auto;
}
div#content_mr{
float: right;
height: 100%;
width: 11px;
background-image: url("grafika/n-sr.jpg");
background-repeat: repeat-y;
}
...
div#break{
clear: both;
}
Kod strony wygląda następująco:
<div id="content" class="round">
<div id="content_tl"> </div>
<div id="content_tt"> </div>
<div id="content_tr"> </div>
<div id="break"></div>
<div id="content_sl"></div>
<div id="content_main">
//<!-- CZĘŚĆ TREŚCI -->
<?php
include('produkty.php');
?>
</div>
<div id="content_sr"></div>
</div>
Obramowanie rysowane jest bez problemu.
Część 'content_main' ma zawierać właściwą treść strony. Ładowana jest ona poprzez javascript poleceniem document.(...).innerHTML = tresc
po kliknieciu w odpowiedni button.
Treścią są kolejno od lewej:
div#prods{
float: left;
margin-left: 20px;
width: 125px;
}
div#decsr{
float: left;
}
Całość ładuje się, lecz jest pewien problem.
Jeżeli zawartość diva 'descr' jest duża(długa), to rozlewa się po elementach 'content_ml' oraz 'content_mr' w taki sposób, że widać normalne obramowanie diva 'content'.
PrintScreen:
(z konta interii- wybacznie, nie mam nic innego pod ręką ;-) )
Druga sprawa- przez ustawienie height: 100% strona sama się rozciąga do pewnego momentu(czarna kreska). Właśnie kiedy treść przekroczy ten moment grafika n-sl/n-sr przestaje się przewijać(repeat-y).
Szczerze mówiąc- mało prawdopodobnym jest, aby wielkość diva przekroczyła ten próg, lecz nie da się tego wykluczyć. Kompletnie nie mam pojęcia w jaki sposób mam sobie poradzić z tym bugiem- kolumny boczne('content_sl/sr') nagle się kończą, a efekt jest taki jak przedstawiłem wcześniej. Obym był zrozumiany, oby ktoś mi pomógł, gdyż sam nie potrafię.