Menu
Lo there,
I saw some great designs made with CSS instead of frames. I’d like to throw myself into CSS too. I’ve uploaded a picture of how I’d like my first full CSS design should be, can anyone help me by posting a clue or a tutorial about how to do something like this?
To be completely clear: I have no idea how to make them boxes (pbb div’s or something) in position and with the right dimentions.
[upl-file uuid=5fc0270f-7275-4c6e-92b9-bf5fa0396e18 size=63kB]teh_frames.jpg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
html {
overflow: hidden;
}
html,
body {
height: 100%;
}
body {
margin: 0%;
padding: 0%;
}
#header {
clear: both;
width: 100%;
height: 20%;
}
#menu {
float: left;
width: 20%;
height: 80%;
}
#content {
float: right;
width: 80%;
height: 70%;
}
#footer {
float: right;
width: 80%;
height: 10%;
}
-->
</style>
</head>
<body>
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
[code=html]<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">[/code]should be like this[code=html]<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />[/code](see the last characters).[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS design, but screwed up :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
html {
overflow: hidden;
}
html,
body {
height: 100%;
}
body {
margin: 0%;
padding: 0%;
}
#header {
background-color:#6699FF;
clear: both;
width: 100%;
height: 50px;
}
#menu {
background-color:#33FF00;
float: left;
width: 120px;
height: 80%;
}
#content {
background-color:#9966FF;
float: right;
width: 80%;
height: 70%;
}
#footer {
background-color:#FFCCCC;
float: right;
width: 80%;
height: auto;
}
-->
</style>
</head>
<body>
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>[/code]The menu should take 100% of the screen for height... minus the 50px of the header. Both the content and the footer should be 100% width minus the 120px of the menu and the content should stretch out so far vertically that the footer hits the ground, and the entire page will be filled.<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS design, but screwed up :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body {
margin: 0%;
padding: 0%;
}
#header {
background-color:#6699FF;
width: 100%;
height: 50px;
}
#menu {
background-color:#33FF00;
float: left;
width: 120px;
}
#content {
background-color:#9966FF;
width: 100%;
margin-left: 120px;
}
#footer {
background-color:#FFCCCC;
width: 100%;
margin-left: 120px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
[code=html]<style type="text/css">
html {
overflow: hidden;
}
html, body {
height: 100%;
}
body {
margin: 0%;
padding: 0%;
}
#header {
background-color:#6699FF;
width: 100%;
height: 50px;
}
#menu {
background-color:#33FF00;
position:absolute;
left:0px;
top:50px;
width: 120px;
height: 100%;
padding-bottom: 50px;
z-index:1;
}
#content {
background-color:#9966FF;
position:absolute;
left:0;
top:50px;
width: 100%;
height: 100%;
padding-bottom: 50px;
padding-left:120px;
}
#footer {
background-color:#FFCCCC;
position:absolute;
left:0;
bottom:0;
height:50px;
width: 100%;
z-index:2;
}
</style>[/code]<i>
</i>#content {
background-color:#9966FF;
position:absolute;
left:0;
top:100px;
width:100%;
height:100%;
padding-bottom:50px;
padding-left:180px;
overflow:scroll;
}
<i>
</i>#content {
background-color:#9966FF;
position:absolute;
top:100px;
width:100%;
height:600px;
max-height: 600px;
overflow:scroll;
}
Height, in percentages, doesn't exist.[/QUOTE]Yes it does! Height can take one of four values: [I]auto[/I] | [I]inherit [/I]| [I]percentage [/I]| [I]length[/I].
bokeh -height is CSS1 so it should work in all browsers. Unfortunately it doesn't though. IE handles the [I]height[/I] property as all other modern browsers handle [I]min-height[/I]. Also IE doesn't even recognise [I]min-height[/I]. (How will IE7 handle this?)
Is that true in ALL browsers? I've not been fortunate enough to come up with something [body{height: 100%;}] that works in both IE and FF.[/QUOTE]
0.1.9 — BETA 6.17