PDA

View Full Version : Div Tags + CSS Nothing happens PLEASE HELP


kinger251285
01-14-2010, 02:59 PM
Hi

I have been trying to create a website using tables. I was then advised i couldnt do what i intended to do with tables hence starting again using css. I am new to this so this may be a fairly simple problem.

I am trying to acheive a page with a header, below it a left nav bar alongside a content box and at the bottom a footer box.

I have been trying to do this usingdivs however cannot get them to work for the life of me.

Using dreamweaver

css file -


body {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
color: #FFFFFF;
background-color: #000000;
margin: 0px;
padding: 0px;
}
div.Header {
border: medium #FFFFFF;
background-color: #0066FF;
width: 720px;
}
div.leftNav {
float: left;
border: medium #FFFFFF;
background-color: #FFFF66;
margin: auto;
padding: 100px;
}
div.Content {
margin: auto;
padding: 0px;
float: right;
background-color: #9933FF;
}
div.Footer {
margin: auto;
padding: 0px;
border: medium #FFFFFF;
background-color: #CC3366;
visibility: visible;
}


dreamweaver file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Header"></div>
<div id="leftNav"></div>
<div id="Content"></div>
<div id="Footer"></div>
</body>
</html>


I am just trying to get the initial outline at this stage and teak it as i go hence clouring each div as a different colour to highlight the different content areas.

However all i am getting is the content coming one after another like a word doc, no actual structure. I ahve set the nav bar as float left and 20% fill and nothing. Not even the borders or background colours are showing.

Please help!

kinger251285
01-14-2010, 03:33 PM
Hi

Think i sussed it, missed the #'s off the div names in the css file.

gentleone
01-14-2010, 03:39 PM
Try this... I did it quickly and I only did the necessary to get the layout that you want.

body {
background-color: #000000;
margin: 0;
padding: 0;
text-align: center;
min-width: 720px;
}
.clear {
clear:both
}
#wrapper {
width:720px;
margin: 0 auto;
text-align:left;
}
#Header {
height: 100px;
background-color: #0066FF;
}
#leftNav {
float: left;
height: 500px;
width: 220px;
background-color: #FFFF66;
}
#Content {
float:right;
height: 500px;
width: 500px;
background-color: #9933FF;
}
#Footer {
height: 30px;
background-color: #CC3366;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="Header"></div>
<div id="leftNav"></div>
<div id="Content"></div>
<div class="clear"></div>
<div id="Footer"></div>
</div>
</body>
</html>

Let me know if it doesn't work!

Corrosive
01-14-2010, 03:51 PM
Basically you have stated that they are classes by putting a period in front of the names but called them in the HTML as IDs.

kinger251285
01-14-2010, 04:19 PM
Hi

I sort of have this sussed, i can get it to display what i want but got 2 more problems now, everything is sat on top of one another at the top of the screen, the content that is, so the footer header and navbars all start in the top left corner.

Also when i try to set the left nav bar to 20% width and the content box to 80% they dont fit alongside each other, is this because of the borders??

Also when this is set up like this, when adding content to the left nav bar it expands horizontally the more content you add. I was under the impression by setting a width of 20% it would remain at that constant.


Thanks for your hlep.

P.s Thanks gentleone - havent tried it yet wanted to try and solve what i already have done but may end up using yours.

kinger251285
01-14-2010, 04:48 PM
Solved the layout problem by increasing my Header height. This in turn helped space everything out nicely. However i have now encountered another problem - i want my left nav bar to expand in length with the main content box height, is this possible at all??