I am redoing a site so that I get rid of all the tables and only utilize css
. I
have all the elements in place but I know I am doing something wrong.
1. My header css div height I have set to 202px, but when viewing it in dw m
x
04 it goes all the way down half the page?
2. I want to write text in my content box, but there is only one giant curso
r?
If I try to write anything the design explodes and I am writting text outsid
e
the design?
What am I doing wrong?
I am pasting the HTML code and css style sheet here for viewing:
CSS STYLE SHEET:
body {
margin: 0px;
margin-top: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.GradientBack {
background-image: url(../Images/background.jpg);
background-repeat: repeat-x;
}
#wrapper {
width: 801px;
}
#maincontainer {
}
#header {
background-image: url(../Images/header.jpg);
background-repeat: no-repeat;
height: 202px;
width: 800px;
}
.footer {
background-image: url(../Images/footer.jpg);
background-repeat: no-repeat;
height: 42px;
width: 801px;
margin-left: -1px;
}
#pic1 {
background-image: url(../Images/NavPic1.jpg);
background-repeat: no-repeat;
height: 137px;
width: 103px;
position: absolute;
top: 249px;
left: 36px;
}
#mainContent {
background-image: url(../Images/mainContent.jpg);
background-repeat: no-repeat;
height: 445px;
width: 631px;
margin-left: 169px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
font-size: .9em;
line-height: 1.5em;
}
#content {
width: 800px;
height:445px;
}
#pic2 {
background-image: url(../Images/NavPic2.jpg);
background-repeat: no-repeat;
height: 146px;
width: 127px;
position: absolute;
left: 29px;
top: 449px;
}
#leftMenu {
background-image: url(../Images/LeftMenu.jpg);
background-repeat: no-repeat;
height: 445px;
width: 170px;
position: relative;
margin-left: -170px;
}
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>peterKarby.com</title>
<style type="text/css">
<!--
@import url("Css/petersStyle.css");
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
color: #000000;
}
body {
background-color: #D7D7D7;
margin-top: 0px;
}
.style1 {font-size: 10px}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body class="GradientBack">
<div id="header"></div>
<div id="content">
<div id="mainContent">
<div id="leftMenu"></div>
<div id="pic1"></div>
<div id="pic2"></div>
</div>
</div>
<div class="footer" id="Footer"></div>
</body>
</html>
|
09-30-04 - 12:16 AM 
