Log in

View Full Version : CSS Background Problem - Center isn't Center ?


GavinPearce
06-04-2007, 03:41 PM
I have a strange problem with CSS backgrounds. I have an image thats 750px wide, and am using css to place a 750px wide background image that repeats on the Y right down the page.

Therefore putting a white box behind a image that sits top center.

Here's the page: http://gavinpearce.co.uk/sailing/index.htm

However the background center and text-align center seem to be in two different places, if you look you'll notice that the image is one more pixel to left and the white is one more pixel to the right. so not right in the center, it does the same if the image size is changed to 749 pixels instead of 750px also ??? How can i get them to both align and why are they not?

Second problem is any idea how to get rid of the white space between the header image and the menu bar below? I want them to run smooth together but I cant for the life of me figure out how - ive minus padding and minus borders and everything !

The HTML is:



<html>
<head>

<title>WORK IN PROGRESS</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css" />

</head>
<body>

<img src="header.jpg" alt="Welcome to Silverwing Sailing Club" />

<div id="menu1">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About Us</a></li>
<li><a href="#nogo">Club Boats</a></li>
<li><a href="#nogo">Training</a></li>
<li><a href="#nogo">Youth</a></li>
<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Location</a></li>
</ul>
</div>


</body>
</html>


and the CSS is:



body {
background: #000033 url(bg.gif) repeat-y 50%;
font: 80% arial, verdana, helvetica, sans-serif;
text-align: center;
min-width: 750px;
}



#container {
position: relative;
width: 749px;
margin: auto;
text-align: center;
}


#header {background: #f00; border:0; margin: 0; padding: 0;}

img { background: #f00; border:0; margin: 0; padding: 0;}

#menu1 {
width:750px;
padding:0;
margin:0 auto;
border: 0;
background:#08c url(menu_bg.jpg);
}
#menu1 li {
float:left;
width:85px;
list-style-type:none;
border:0px solid #fff;
}
#menu1 a {
display:block;
width:85px;
color:#fff;
float: left;
clear: left;
text-align:center;
padding:5px 0;
text-decoration:none;
float:left;
}

#menu1 li>a { float: none; }


#menu1 a:hover {
color:#fff;
background:#08c;
}


Anyway many thanks for even reading this far!!

Will try and take you out sailing at some point! :D
alexjewell
06-05-2007, 12:54 AM
Ok, I'm a little confused as to what you want to do.

One, the image and background are aligned...in firefox anyway. What browser are you using? If it looks back in IE, use IE conditional statements to relatively position the image over the background.

Two, I can't see the navbar because it's completely white, until you hover over the links.

Three, you'll get the header image flush with the top of the page by setting the body's margin-top: 0px.
GavinPearce
06-19-2007, 11:31 AM
Meant in Internet Explorer. Doesn't align correctly. Sorry my fault.
ajime
06-29-2007, 11:31 PM
Hey there,

I used to have the same issue with some of my headers in IE. I found that making line-height:0px; resolved the issue.

I don't see a centering issue in either FF or IE, so I can't speak to that.

Hope that helps.
alexjewell
06-30-2007, 12:47 AM
Again, if all else fails, use IE conditional statements. They're not meant to be used constantly, but when you don't want to wrestle with IE, they're an option.
eleven82
07-03-2007, 08:21 PM
I changed your code a bit and everything lines up in Fox and IE, but I couldn't figure out why the nav bg doesn't show up in Fox. Hope this helps a little...

<style>
body {
background: #000033;
font: 80&#37; arial, verdana, helvetica, sans-serif;
text-align: center;
width: 750px;
margin:auto;
color:#000000;
}
#container {
position: relative;
width: 750px;
margin: auto;
margin-top:0px;
text-align: center;
background-color:#FFFFFF;
}


#header {background: #f00; border:0; margin: 0; padding: 0; height:241px; width:750px;}

#nav {
width:750px;
height:39px;
}

#menu1 {
width:750px;
margin:0 auto;
background:#08c;
background-image: url(http://www.gavinpearce.co.uk/sailing/menu_bg.jpg);
background-repeat:no-repeat;
}

#menu1 li {
float:left;
width:85px;
list-style-type:none;
}
#menu1 a {
display:block;
width:85px;
color:#fff;
float: left;
text-align:center;
padding:5px 0;
text-decoration:none;

}

#menu1 a:hover {
color:#fff;
background:#08c;
}

</style>
</head>

<body>
<div id="container">
<br />
<div id="header">
<img src="http://www.gavinpearce.co.uk/sailing/header.jpg" alt="Welcome to Silverwing Sailing Club" />
</div><!-- END HEADER -->

<div id="nav">

<div id="menu1">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About Us</a></li>
<li><a href="#nogo">Club Boats</a></li>
<li><a href="#nogo">Training</a></li>
<li><a href="#nogo">Youth</a></li>
<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Location</a></li>
</ul>
</div><!-- END MENU 1 -->

</div><!-- END NAV -->

text
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div><!-- END CONTAINER -->

</body>
</html>