Forum Moderators: not2easy
Essentially I was to have a top section that contain a logo with background color (div = topLogo). I want that follow underneath that on the left with an area for a side menu (div = leftMenu). To the right of the side menu I want a main horizontal menu (div = topMenu). Finally I want an area to place content (div = content).
In the code that follows the background colors have been added just to display my problem. When I set the width of 100% for each area it is only relative to the width of the browser window. So with the topMenu its width is set to the width of the screen. So because it is set to the screen width it causes a horizontal scroll bar to appear.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Test CSS</TITLE>
<style type="text/css">
div#container{
width:100%;
height:100%;
margin: 0;
}
div#topLogo{
background-color:#0000FF;
top:0px;
left:0px;
width:100%;
height:50px;
position:absolute;
}
div#leftMenu{
background-color:#FF0000;
top:50px;
left:0px;
width:200px;
height:100%;
position:absolute;
}
div#topMenu{
background-color:#000000;
top:50px;
left:200px;
height:35px;
width:100%;
position:absolute;
}
div#content{
top:120px;
left:220px;
position:absolute;
width:100%;
height:100%;
border-width:thin;
border-color:#000000;
border-style:solid;
}
</style>
</HEAD>
<BODY>
<div id="topLogo">
</div>
<div id="leftMenu">
</div>
<div id="topMenu">
</div>
<div id="content">
</div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Test CSS</TITLE>
<style type="text/css">
html,body {
margin:0px;
height:100%;
}
div#page_container{
position:relative;
width:100%;
height:100%;
}
div#topLogo{
background-color:#0000FF;
width:100%;
height:50px;
position:absolute;
top:0px;
left:0px;
z-index:5;
}
div#leftMenu_container{
position:absolute;
top:0px;
left:0px;
background-color:#FF0000;
width:200px;
height:100%;
z-index:4;
}
div#leftMenu_contents{
margin-top:50px;
background-color:#FF0000;
width:200px;
}
div#topMenu_container{
position:absolute;
top:50px;
left:0px;
background-color:#000000;
width:100%;
height:35px;
color:#ffffff;
z-index:3;
}
div#topMenu_contents{
margin-left:200px;
color:#FFFFFF;
width:200px;
height:100%;
}
div#main_container{
background-color:#00FF00;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
z-index:2;
}
div#main_contents{
margin-top:85px;
margin-left:200px;
}
</style>
</HEAD>
<BODY>
<div id="page_container">
<div id="topLogo">
Logo
</div>
<div id="leftMenu_container">
<div id="leftMenu_contents">
Left Menu Contents
</div>
</div>
<div id="topMenu_container">
<div id="topMenu_contents">
Top Menu Contents
</div>
</div>
<div id="main_container">
<div id="main_contents">
main Contents
</div>
</div>
</div>
</BODY>
</HTML>
Since I am new to this, how would you have laid out the page? Maybe your way will work w/my required page layout, and if it doesn't it will teach me an additional way of doing it.
THanks!
thanks for the help in advance.
