Simulace rámců

1. října 2005

•

Simulace rámců pomocí fixního pozicování.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Petr Steinbauer. Bližší popis najdete v článku The missing-position-fixed hack.

CSS

body,html
{
margin:0; padding:0;
height:100%;
_overflow:hidden;
}
body
{
background: #ffffff;
}
#obsah
{
margin: 0;
padding-top: 0px;
height:100%;
overflow: visible;
_overflow: auto;
}
#obsah-uvnitr
{
margin:0px;
padding: 90px 5px 0px 210px;
}
#levypanel
{
position:fixed;
_position:absolute;
top:90px;
left:0px;
margin:0;
padding:0;
width:205px;
height:100%;
border:1px solid blue;
background: #dddddd;
}
#hlavicka
{
position:fixed;
_position:absolute;
top:0px;
left: 0px;
_left: -16px;
margin:0;
padding:0;
width:100%;
height: 90px;
background: #dddddd;
z-index:9;
border-bottom:1px solid blue;
}
#obsah-hlavicka
{
position:relative;
background: #dddddd;
margin:0;
padding-left:20px;
}

XHTML

<html>
<body>
<div id=“obsah“>
<div id=“hlavicka“>
<div id=“obsah-hlavicka“>
Zde se nachází obsah hlavička…
</div>
</div>
<div id=“obsah-uvnitr“>
Zde se nachází obsah stránky…
</div>
<div id=“levypanel“>
Zde se nachází menu…
</div>
</div>
</body>
</html>