I am brand new here so please bare with me. I have designed a few sites a while back using dreamweaver and using the table method. I just do not get this css code yet. It will sink in but I’m hoping somebody can help me here.
The problem is when I create the page I did using the code below then enter text into the page and continue to enter text when I get to the footer area it does not push down automatically so I can keep hitting the enter key if I wish. I don’t know what I’m doing wrong and I’m all researched out. Can someone be kind enough to give me some code that might work for me after they see what I have done below?
This is the site I want eventually:
A thin 10px red line (topline) on the top of the page with no margins that width is 100% so it adjusts no matter what size screen resolution.
A header under that, that is the same width (100%, goes across full screen) and 100px height for my logo. I want to put my 960pxX100px logo in that header and have the logo centered.
A 990px width spry menu which I have there now centered and height adjust automatically to what dreamweaver created.
A 990px width centered content area under all that for all my text, images, content, etc. I want a div within a div though so it creates a nice 15px border around the content area. Grey larger div and a white smaller one for all the content.
Then I want a thin red line (bottomline) again about 7px put again I want this 100% width to go full screen.
Finally a footer that goes 100% width also.
Now for the tricky part. When I add text to my content area I want the red line and the footer area to automatically push itself down when I add content.
I know I’m asking a lot but I can’t figure it out so I figure to give this forum a try. Thanks very much to anybody who wishes to help me.
My code is below and obviously you can tell I’m new to css, sorry. Got to start somewhere. I recently upgraded my dreamweaver to cs5 so that is what I’m using.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#header {
position:absolute;
left:0px;
top:10px;
width:100%;
height:100px;
z-index:1;
background-color: #222;
}
#master {
margin: 0px auto;
position: relative;
width: 990px;
left: 0px;
top: 0px;
}
body {
text-align: center;
background-color: #CCC;
margin-top: 0px;
color: #000;
background-image: url(images/bg.gif);
}
#content {
position:absolute;
left:0px;
top:160px;
width:990px;
height:400px;
z-index:-100;
background-color: #CCCCCC;
}
#footer {
position:absolute;
left:0px;
top:570px;
width:100%;
height:50px;
z-index:3;
background-color: #222;
font: 12px/25px Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
}
a:link {
color: #FFF;
text-decoration: underline;
}
a:hover {
text-decoration: overline;
}
#menu {
position:absolute;
left:0px;
top:110px;
width:990px;
height:0px;
z-index:4;
}
#footer {
color: #999;
}
#footer p {
margin:0;
padding:10px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#topline {
position:absolute;
left:0px;
top:0px;
width:100%;
height:10px;
z-index:4;
background-color: #CC0000;
}
#bottomline {
position:absolute;
left:0px;
top:565px;
width:100%;
height:5px;
z-index:5;
background-color: #CC0000;
}
#content2 {
position:absolute;
left:15px;
top:15px;
width:960px;
height:370px;
z-index:100;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="header">
<!-- Header start -->
<img src="images/logo.jpg" width="960" height="100" alt="XXXXXXX" /></div>
<!-- Header end -->
<div id="master">
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#">COMPANY INFO</a></li>
<li><a href="#">TESTIMONIALS</a> </li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FAQS</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="content">
<div id="content2">
<p>u </p>
</div>
</div>
</div>
<div id="footer">
<!-- Footer start -->
<a href="#">Home</a> | <a href="#">Company Info</a> | <a href="#">Testimonials</a> | <a href="#">Portfolio</a> | <a href="#">Services</a> | <a href="#">Faqs</a> | <a href="#">Support</a> | <a href="#">Contact</a><br />
XXXXXX.com Copyright © 2010 | All Rights Reserved
<!-- Footer end -->
</div>
<div id="topline"></div>
<div id="bottomline"></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>