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>
</div>
</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!