...

View Full Version : adding <ul> navigation list moves previous <div> down



mattjc
11-10-2010, 09:15 PM
Hi all,

New to codingforums... and got a frustrating problem. Not sure whether it's a HTML or CSS problem. Relative noob. (not a positioning pun there)

Please see HTML segment below.


<div id="parent_wrapper">
<div id="child">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

CSS Below:


body {
background: #000000 url(../images/d4t_bg.jpg) repeat-x;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
}

#parent_wrapper {
width: 811px;
height: 675px;
margin: auto;
background-image:url(../images/d4t_header.jpg);
}

#child {
background:#000000;
width: 763px;
height: 400px;
margin: auto;
position: relative;
top: 443px;
}
As you can see, I have a bg image (it's just a 40px x 675px strip) which repeats along the X axis.

This image continues into the image contained in the #parent_wrapper and all works fine until i put my <ul> tag into my html.

Then, it would seem that my #parent_wrapper div moves down from the very top of the page by about 20px, shifting my header image out of line with my bg gradient.

If I am not being too vague, can anybody suggest a reason for this?

I have exercised every bit of trouble shooting I can think of (at my amateur level) adjusting padding and margins to try and get the #parent_wrapper to butt up to the top of the page again.

Any thoughts would be much appreciated. I will post an image if necessary.

thanks.

teedoff
11-10-2010, 09:19 PM
No link to your site? Have you tried setting a 0 margin to your <ul>?

Excavator
11-10-2010, 10:03 PM
Hello mattjc,
Try making #parent_wrapper relative and positioning #child from that.
Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
html, body {
background: #000 url(../images/d4t_bg.jpg) repeat-x;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#parent_wrapper {
width: 811px;
height: 675px;
margin: auto;
background: #ff0 url(../images/d4t_header.jpg); /*a bg color for demonstration only*/
position: relative;
}
#child {
background: #000;
width: 763px;
height: 400px;
margin: auto;
position: absolute;
left: 25px;
top: 443px;
}
</style>
</head>
<body>
<div id="parent_wrapper">
<div id="child">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--end child--></div>
<!--end parent_wrapper--></div>
</body>
</html>

mattjc
11-10-2010, 10:27 PM
teedoff you diamond!

Now I'm p#ssed at myself for not working that out. I didn't realise how the properties of seemingly separate elements could affect my layout.

Much appreciated.

Thanks for your efforts too Excavator!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum