Div-ul main are latimea definita, iar div-ul content este float:right pentru a ocoli meniul din stanga si margin-top pentru a evita header-ul.
E prima data cand incerc sa dezvolt un astfel de layout, si vroiam sa stiu daca este scris corect, orice idee,sfat sunt binevenite.
Mai jos aveti codul html + css :
Cod: Selectaţi tot
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>phpromania</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<style>
/* template */
.main
{
width:65%;
border:1px solid yellow;
height:auto;
margin:auto;
}
.left
{
width:15%;
border:1px solid green;
position:fixed;
top:0;
min-height:99%;
background-color: #fff;
z-index:1;
}
.header
{
background-color: #fff;
border:1px solid blue;
width:49.6%;
position:fixed;
top:0;
left:32.8%;
height:140px;
z-index:2;
}
.content
{
width:76.2%;
float:right;
border:1px solid black;
height:auto;
margin:17% auto 0 auto;
text-align:center;
padding-top:10px;
}
.footer
{
clear:both;
height:40px;
line-height:40px;
overflow:hidden;
width:97.2%;
margin-left:1px;
position:absolute;
top:93%;
z-index:3;
border:1px solid red;
}
.clear{clear:both}
</style>
<div class="main">
<div class="header">Header</div>
<div class="left">
Left sidebar
<div class="footer">footer</div>
</div>
<div class="content">
<iframe width="560" height="315" src="//www.youtube.com/embed/1v2ZBK_nrfs" frameborder="0" allowfullscreen></iframe>
<br /><br />
<iframe width="560" height="315" src="//www.youtube.com/embed/Dxf_p54Ncuc" frameborder="0" allowfullscreen></iframe>
<br /><br />
<iframe width="560" height="315" src="//www.youtube.com/embed/1v2ZBK_nrfs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="clear"></div>
</div>
<script>
var h = $('.header').height();
var new_margin = h+2;
$('.content').css('margin-top',new_margin+'px');
</script>
</body>
</html>
Sper ca s-a inteles ideea, cand se face scroll top/bottom doar continutul nou sa fie afisat.
Am unele suspiciuni legate de cod, deoarece am incercat sa calculez matematic si rezultatele aplicate au efect diferit in pagina,chiar daca sunt logic.
Codul js calculeaza inaltimea header-ului si in functie de el, face margin-top la content, pentru a nu fi ascuns in spatele header-ului.
Accept si variante cu valoarea pixelilor in numere reale.
MAI JOS AVETI ARHIVA CU PAGINA SALVATA, PENTRU A O TESTA. MULTUMESC !
