Simulace rámců 2

2. března 2006

•

Pokud jste někdy chtěli skloubit výhody framu s výhodami CSS layoutu toto řešení by vám mohlo dopomoci ke kýženému cíli. Celý obsah webu je umístěn v jednom souboru, načte se tedy celá stránka a při kliknutí na položku v menu již nedochází k obnovování (refreshi) stránky, ale jen k presunu na správné místo, na které odkazuje id.

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

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku LESS.

CSS

body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
background:#fff fixed;
}
body
{
font-family: „trebuchet ms“, arial, sans-serif;
font-size:76%;
text-align:center;
}
#page
{
margin:0 auto 0 auto;
display:block;
width:500px;
background:#fff;
text-align:left;
}
#page .txt
{
height:1000px;
background:#fff;
padding:0 10px;
}
#menu
{
display:block;
top:150px;
left:10px;
width:100px;
position:fixed;
padding:10px;
font-weight:bold;
color:#fff;
background:black;
}
* html #menu
{
position:absolute;
}
#menu ul
{
padding:0;
margin:0;
}
#menu ul li
{
list-style-type:none;
display:block;
float:left;
width:100px;
height:20px;
}
#menu ul li a:visited, #menu ul li a
{
display:block;
width:100px;
height:20px;
text-align:right;
text-decoration:none;
line-height:20px;
color:#fff;
padding:0 5px 0 0;
}
#menu ul li a:hover
{
background:#fff;
color:#000;
}
h3
{
color:red;
}
.pad
{
height:75px;
}

CSS pro IE

html
{
overflow-x:auto;
overflow-y:hidden;
}

XHTML

<html>
<body>
<div id=“page“>
<div class=“txt“>
<a id=“odkaz1″></a>
<div class=“pad“></div>
<h3>Nadpis 1</h3>
<p>Dolor sit amet…</p>
</div>
<div class=“txt“>
<a id=“odkaz2″></a>
<div class=“pad“></div>
<h3>Nadpis 2</h3>
<p>At tortor dapibus pellentesque…</p>
</div>
</div>
<div id=“menu“>
<ul>
<li><a href=“#odkaz1″>Odkaz 1</a></li>
<li><a href=“#odkaz2″>Odkaz 2</a></li>
</ul>
</div>
</body>
</html>