Fixní pozicování stránky

1. října 2005

Řešení, pomocí kterého lze například ukotvit menu na stránce, kterou lze rolovat.

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

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

CSS

body,html
{
margin:0;
padding:0;
height:100%;
_overflow:hidden;
}
body
{
background: #dddddd;
}
#obsah
{
margin:0;
padding:0;
height:100%;
overflow:auto;
}
#obsah-uvnitr
{
margin:0;
padding:20px 20px 20px 200px;
}
#menu
{
position:fixed;
_position:absolute;
top:20px;
left:20px;
margin:0;
padding:0;
width:150px;
border:1px solid blue;
}

XHTML

<html>
<body>
<div id=“obsah“>
<div id=“obsah-uvnitr“>
Obsah stránky…
</div>
<div id=“menu“>
Fixni menu…
<ul>
<li><a href=“/“>Odkaz 1</a></li>
<li><a href=“/“>Odkaz 2</a></li>
<li><a href=“/“>Odkaz 3</a></li>
<li><a href=“/“>Odkaz 4</a></li>
<li><a href=“/“>Odkaz 5</a></li>
</ul>
</div>
</div>
</body>
</html>

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *