Jenny_Jonesy
04-30-2005, 02:42 PM
I am only in the first stages of my website - the header that I have used for the code below won't be my one on my final website, but it will be that size. Does anyone know how I can change the two side menus to be the smae height as my middle div? Or do you think that it would be easier if I changed my two side menus to iFrames? If you think this do you know how I would be able to? Also, do you think it would be easier if I just made one big backround image, to include my header in it? Any advice would be greatly appreciated x
<html>
<head>
<title>Untitled</title>
</head>
<body>
<title>James Bourne's New Band</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: 300px;
}
#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>
A:link { text-decoration: none; color:#AF7681; }
A:visited { text-decoration: none; color:#1B83EB; }
A:hover { text-decoration: none; color:#A357CC; }
</head>
<body>
<div id="header">
<img style="position:absolute; top:0px; left:0px; width:1024px;
height:300px" src="http://i2.photobucket.com/albums/y26/JennyJonesy/jamesheader.jpg">
</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>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<title>James Bourne's New Band</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: 300px;
}
#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>
A:link { text-decoration: none; color:#AF7681; }
A:visited { text-decoration: none; color:#1B83EB; }
A:hover { text-decoration: none; color:#A357CC; }
</head>
<body>
<div id="header">
<img style="position:absolute; top:0px; left:0px; width:1024px;
height:300px" src="http://i2.photobucket.com/albums/y26/JennyJonesy/jamesheader.jpg">
</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>