Problem with DIVs ann CSS

RiazMC · 19-Jun-2008, 10:02 AM #1

Hi,

I'm creating a site for my friends company, i'm using div and css. this is the first time i'm using this method, i usally use table. But this way seems a lot "neater". But i'm having problems with getting my DIV layers to behave how i want them.

My problem is, when i try and add content on my page my div layers seperate ( as indicated in the screenshot).

I have also included my css code i'm pretty sure i have something conflicting in there.

Thanks guys

Code:

body {
	margin:0;
	padding:0px;
	height:100%; 
	text-align:center;
}

.container {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	padding:15px;
	height:100%;
}

.navbar {
	padding:0px 33px 0 42px;
	font: normal 12px auto "Arial", Verdana, Arial, Helvetica, sans-serif;
	/*border:	2px solid #0000ff;*/
	position: relative;
	top: 150px;
	text-align:right;
	z-index: 5
}

.headr {
	background-image: url(images/Taylor_Stanton_Hdr.jpg);
	background-repeat: no-repeat; 
	text-align:left;
	height: 181px;
	width: 800px;
	position: relative;
	margin:0px auto;			
}

.middl {
	top:0px;
	background-image: url(images/Taylor_Stanton_Mid.jpg);	
	text-align:left;
	height: 254px;
	width:800px;
	position: relative;
	margin:0px auto;
}

.footer {
	background-image: url(images/Taylor_Stanton_Ftr.jpg);
	background-repeat: no-repeat;
	text-align:left;
	width:800px;
	height: 205;
	position: relative;
	margin:0px auto;	
}


.content {
	width: 700px;
	padding:0px 0px 0px 60px;
	font: normal 14px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	position: relative;
	top: 20px;
	z-index: 2
}


/* css menu ==================*/

ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
/*background:url(images/bg.png) repeat-x top left;
border:1px solid #000;*/
font-family:Verdana,Helvetica,Arial,sans-serif;
margin:0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#000033;
text-decoration:none;
height:24px;
padding:9px 2px 0;
}

ul.menu li a:hover,.current {
color:#663399;
font-weight:bold;
/*background:url(images/bg.png) repeat-x top left;*/
}

ul.menu .current a {
color:#330066;
font-weight:700;
}

Mr.LLB · 19-Jun-2008, 10:10 AM #2

Can I please have the website link so I can look at the HTML code as well and which div tag uses which CSS style.

Thanks,

RiazMC · 19-Jun-2008, 01:12 PM #3

Hi MR.LLB, thanks for replying. The website isn't online yet, but i have pasted the html below, thanks for your help

Quote:

<html>
<head>
<link rel="StyleSheet" href="Ver2styles.css" type="text/css" media="screen">
<title>One Hundred Percent Height Divs</title>
</head>
<body>

<div class="container">
<div class="headr">
<div class="navbar">
<ul class='menu orange'>
<li class='current'><a href='index.html'>Home |</a></li>
<li><a href='quote.php'>| Quote |</a></li>
<li><a href='AboutUs.html'>| About Us |</a></li>
<li><a href='ContactUs.html'>| Contact Us</a></li>
</ul>
</div>
</div>
<div class="middl">
<div class="content">
<h4>Contact Us</h4>
</div>
</div>
<div class="footer"> </div>
</div>
</body>
</html>

Mr.LLB · 19-Jun-2008, 01:22 PM #4

Make the following changes and let me know if there's any improvement:

.navbar {
padding:0px 33px 0px 42px; <<< you didn't put the px beside the bottom 0
font: normal 12px auto "Arial", Verdana, Arial, Helvetica, sans-serif;
/*border: 2px solid #0000ff;*/
position: relative;
top: 150px;
text-align:right;
z-index: 5

RiazMC · 20-Jun-2008, 09:16 AM #5

Hi Mr.LLB, that seems to have solved the problem in IE but not opera or firefox. I also changed the position from relative, to absolute which fixed the problem in IE and F/Fox...hmm.

Any way well spotted and thanks again four your help i appreciate it

Mr.LLB · 20-Jun-2008, 10:41 AM #6

glad to help

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)