Simulace rámců
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>
Mohlo by vás také zajímat
-
Co je to VRAM a jak ji navýšit bez drahého upgradu?
20. srpna 2024 -
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023 -
Netcat a Ncat
8. prosince 2022
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024