curiousdude
04-20-2006, 05:34 PM
<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>
<body>
<div id="header">
Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
</div>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id="right">
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
I'm very confused as to how to do this. Is the above the html code you would put on you page, or is it the actual style sheet? Would I place this in the body of my page, then insert a link to the style sheet in the head tag? I'm assuming this is the html code, due to the tags(yeah, i'm just asking to be sure), but I want to be sure.
That said, what exactly are selectors and how do you use them? What I was hoping for is to be able to have the left and right colums to be able to be edited from one page, and the middle to be just whatever content i wanted to insert on each individual page, much like frames. Is it possible to do this using css?
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>
<body>
<div id="header">
Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
</div>
<div id="left">
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id="right">
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
I'm very confused as to how to do this. Is the above the html code you would put on you page, or is it the actual style sheet? Would I place this in the body of my page, then insert a link to the style sheet in the head tag? I'm assuming this is the html code, due to the tags(yeah, i'm just asking to be sure), but I want to be sure.
That said, what exactly are selectors and how do you use them? What I was hoping for is to be able to have the left and right colums to be able to be edited from one page, and the middle to be just whatever content i wanted to insert on each individual page, much like frames. Is it possible to do this using css?