View Full Version : DIV Tag help, please.

11-07-2008, 11:29 PM
Hi there,

I seem to be having a spot of trouble. I've not created a website in few months now and for some utterly bizzare reason, I've gone blank. Coders block, perhaps. Lol. Anyway, more to the point.. I've been asked to create a website for a medical clinic, so I must get it right! I don't want to present them with anything sloppy, having said that, I have other areas of work that are further up on my priority list which means Im trying to do this as quick and as hassle free as possible but I can't get the darn Div tags postioned.

I've already sampled a Div template to make my job easier, i do intend on chopping and change drastically since I do have the abilty, Im just pressed for time! (I got long winded on this as you can see, apologies!)

Anyway so.. here's the code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Layout 38</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:700px;margin:0 auto}
#navigation3 li { float: left;
}#navigation3 li a {
font-family: arial;
font-size: 12px;
text-transform: none;
display: block;
text-align: center;
color: #fff;
font-style: normal;
line-height: normal;
font-variant: normal;
text-decoration: none;
padding-top: 4px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 20px;
background-color: #2959c4;
background-image: none;
text-indent: 0px;
font-weight: lighter;
position: static;
width: auto;
}#navigation3 li a:hover {
color: #2959c4;
background-color: #B9CAFF;
}.style9 {font-size: 9px}.style10 { font-size: 5pt}.style11 {color: #000000}.style12 {color: #FF0000}.style14 { font-size: 12px; font-family: Geneva, Arial, Helvetica, sans-serif;}.style16 { font-size: 12; font-family: Geneva, Arial, Helvetica, sans-serif;

<body><br><div id="container">
<div id="header h1">
<ul id="navigation3"> <li> <a href="#">Home</a></li> <li><a href="#">Procedure</a></li> <li><a href="#">Aftercare</a></li> <li><a href="#">Aged 13+ Aftercare </a></li> <li><a href="#">Your Questions</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Feedback</a></li> <br>
</ul> </div></div>
<div id="container">
<div id="header"><h1>Header</h1></div>

<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
<div id="footer"><p>Here it goes the footer</p></div>

I've uploaded a screenshot, I would like the menu to be aligned with the header but Ive been at it for hours and cannot get it positioned directly above with the same width and so forth because it ruins the other sections.

Im using Dreamweaver Cs3 if that matters? Also, when I view it on Firefox, I can see bullet points on the menu - Why are they visible?

Id appreciate help. Thanks guys

11-07-2008, 11:46 PM
uls have default paddings and margins: remove them both.
lis also have list-styles applied to them by default, remove that too.

11-08-2008, 12:59 AM
Hi thanks for your reply :thumbsup:

I know you've given me simple instruction and theres no complexity whatsoever but seriously, i actually don't know where im suposed to be editing the uls and lis tags, i just dont see where to remove the auto padding etc, maybe because ive been staring at it for hours on end and have a headache, im not sure.

Help? :$ Im slightly embarassed!

11-08-2008, 01:16 AM
Your fixes would be something like:

#navigation3 {
margin: 0;
padding: 0;
#navigation3 li {
list-style: none;