Robil som si klasicky layout - menu na ľavo, hlavička s loginom, hlavná časť a päta. Všetko funguje na prvý pohľad tak ako má. Problém ale nastane ak je obsah menu, hlavnej časti alebo hlavičky dlhší ako 100% výšky stránky, päta sa mi zobrazí hneď pod hlavičkou a prekryje ju. takto nejak vyzerá môj kód:
CSS:
#container {
height: 100%;
margin: 0 auto;
width: 1000px;
}
#menu {
border: 1px solid;
float: left;
margin: 0 auto;
width: 190px;
}
#login {
border: 1px solid;
float: right;
height: 5%;
margin: 0 auto;
width: 800px;
}
#main {
border: 1px solid;
float: right;
margin: 0 auto;
text-align: center;
width: 800px;
}
#bottom {
border: 1px solid;
height: 50px;
margin: 0 auto;
width: 500px;
float: left;
clear: both;
}
HTML:
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Windows-1250">
<title>Nova stranka</title>
<link type="text/css" href="style/layout.css" rel="stylesheet"/>
</head>
<body>
<div ID="container">
<div ID="menu">
menu
</div>
<div ID="login">
login
</div>
<div ID="main">
main
</div>
<div ID="bottom">
obsah bottom
</div>
<font size="1">Optimalizované pre rozlíšenie 1024x768<font>
</div>
</body>
</html>
Je to len čistá koncepcia layoutu bez akýchkoľvek farieb + (skoro)všetky časti majú rámik aby bolo jasné kde sa nachádzajú - ten pôjde po doladení preč.
P.S. - skúšal som aj presunutie bottomu v celkovej hierarchii(tj. pod container aj do containera), prípadne rôzne zarovnania a šírky.
P.P.S - to isté mi robí aj ten nápis: "optimalizované pre rozlíšenie 1024x768"