Relativni + absolutni pozicovani + plovouci menu + zarovnani na stred + prekryvany vrstvy + FF + IE8 + funkcni
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<META HTTP-EQUIV="content-language" CONTENT="cs">
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title> Navrh stranky </title>
<script type="text/javascript">
$(document).ready(function(){$("#menu li a").hover(
function() {
$(this).parent().find("ul:first").fadeIn('1000').show(); //Drop down the subnav on click
},
function() {
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul").fadeOut('slow'); //When the mouse hovers out of the subnav, move it back up
});
});
});
</script>
</head>
<body style="text-align:center;">
<div style="width:600px;margin:0px auto;background-color:red;height:500px;position:relative;">
<div style="width:600px;vertical-align:top;background-color:green;height:40px;vertical-align:bottom;">
<div style="vertical-align:bottom;">
<ul id="menu" style="margin:0;padding:0;">
<li style="width:100px;height:20px;border:1px solid black;float:left;">
<a href="#">Menu1</a><ul style="margin:0;padding:0;position:absolute;top:20px;left:0px;z-index:10;display:none;">
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
</ul></li>
<li style="width:100px;height:20px;border:1px solid black;float:left;">
<a href="#">Menu2</a><ul style="margin:0;padding:0;position:absolute;top:20px;left:100px;z-index:10;display:none;">
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
</ul>
</li>
<li style="width:100px;height:20px;border:1px solid black;float:left;">Menu3</li>
<li style="width:100px;height:20px;border:1px solid black;float:left;">Menu4</li>
</ul>
</div></div>
<div style="width:600px;vertical-align:top;background-color:blue;height:200px;position:relative;z-index:1;">
<div style="background-color:gold;position:absolute;top:10px;left:-20px;width:100px;height:50px;z-index:1;">
aaa
</div>
</div></div>
</body>
</html>
Ttrochu takovej orisek, pouzil jsem tam:
- Zarovnani na stred
- 3 divy
- Relativni + Absolutni pozicovani
- Plovouci menu
- jQuery
- Prekryvy vrstev
- Vsechno ve vrstvach
- FF a IE7+
- 100% validni
Varianta cislo 2.
<body style="text-align:center;">
<div style="width:600px;margin:0px auto;background-color:red;height:500px;position:relative;">
<div style="width:600px;vertical-align:top;background-color:green;height:40px;vertical-align:bottom;position:relative;z-index:2;">
<div style="vertical-align:bottom;">
Prosinec 7th, 2009 - 05:59
Internet Explorer 8 seems to be better than any previous version of IE. IE8 is very stable and rarely crashes or cause blue screens.
..„