Hello, I am very new to web development in general. I am trying to develop a master page for a tutorial that I am creating. I have tried different solutions to correct the overlap, but the same result occurs every time.
My web page shows up fine in IE7 and FF 3.5.7 with my screen resolution at 1152x864, but if I change the size of my resolution or browser window, my divs over lap in the middle of the screen. I am using VS web developer as my editor. The yellow borders are just for my reference, the gray borders are the actual borders that are suppose to appear to separate the sections.
My css
html,#container {
position:relative;
width:100%;
height:100%;
background-color:#000;
margin:0;
}
#chapterheader {
position:absolute;
top:0;
left:0;
width:45.6%;
height:30px;
z-index:9;
border:3px solid #cccbcb;
margin:auto;
padding:10px;
}
#sectionheader {
position:absolute;
top:53px;
left:0;
width:45.6%;
height:30px;
z-index:8;
border:3px solid #cccbcb;
margin:auto;
padding:10px;
}
#mainheader {
position:absolute;
top:0;
right:0;
width:50%;
height:83px;
z-index:10;
border:3px solid #cccbcb;
margin:auto;
padding:10px;
}
#text {
position:absolute;
top:105.5px;
left:0;
width:25%;
height:450px;
z-index:7;
border:3px solid #cccbcb;
overflow:auto;
padding:10px;
}
#graphics {
position:absolute;
top:105.5px;
right:0;
width:70.75%;
height:450px;
z-index:5;
border:3px solid #cccbcb;
padding:10px;
}
#maintitle {
position:inherit;
top:10px;
left:10px;
color:#fff;
font:24pt sans-serif;
border:solid 1px #FF0;
margin:0;
padding:0;
}
#mainsubtitle {
position:inherit;
top:65px;
left:10px;
color:#fff;
font:16pt sans-serif;
border:solid 1px #FF0;
margin:0;
padding:0;
}
#chaptertitle,#sectiontitle {
position:inherit;
top:12px;
left:10px;
color:#fff;
font:16pt sans-serif;
border:solid 1px #FF0;
margin:0;
padding:0;
}
#image, #text1 {
position: relative;
top: 50%;
width: auto;
color: #fff;
font: 16pt sans-serif;
border: solid 1px #FF0;
}my html
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" align="center">
<div id="chapterheader">
<div id="chaptertitle">Chapter Title</div>
</div>
<div id="sectionheader">
<div id="sectiontitle">Section Title</div>
</div>
<div id="mainheader">
<div id="maintitle">Main Title</div>
<div id="mainsubtitle">Sub Title</div>
</div>
<div id="text">
<div id="text1">TEXT GOES HERE</div>
</div>
<div id="graphics">
<div id="image">IMAGE GOES HERE</div>
</div>
</div>
</body>
</html>
