Bit of css help

KierNet · 22 February 2011 at 11:44PM

Hello! I'm looking for a bit of help with my css.

At the moment for my header I have a image along the top, the css for this is.

body {
        text-align:center;
        background:url(background.png) repeat-x #fff;
        font-family: arial;

}

I'm trying to get the black colour to go along at the bottom (the Blah blah blah part), however the way I've done it in the past is with a div, and set the background colour, however it leaves a small gap to the left and right, I want it to go across the page like the header.

Does anyone know how to do it? I've seen it done on a few sites, but have no idea how!

Any help would be great.

Thanks.

TrickyDicky101 · 23 February 2011 at 6:57AM

When you do it with a div do you set the padding and margin properties to be zero?

victor2 · 23 February 2011 at 8:13AM

It looks like you've got a margin on the main body text and your footer may be embedded within that.
Treat the header as a separate div as well as the footer, doing something like this...
Stylesheet:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header {
text-align:center;
background:url(background.png) repeat-x #fff;
}
#footer {
background-color: black;
}

HTML:

<body>
<div id="header">text</div>
Lorem ipsum dolor sit amet......

<div id="footer">other text</div>
</body>

If you then want to add other styles to the main body text, you can do as you wish.

KierNet · 23 February 2011 at 1:06PM

victor2 wrote: »

It looks like you've got a margin on the main body text and your footer may be embedded within that.
Treat the header as a separate div as well as the footer, doing something like this...
Stylesheet:

HTML:

If you then want to add other styles to the main body text, you can do as you wish.

Thanks! Gave it ago and it still had the little margin each side, got round it by adding.

margin: -8px;

No idea if its the correct way, but works!

Thanks

.

victor2 · 23 February 2011 at 3:57PM

May not be the most elegant way, but it does the job! If you could post a link to whever the page is and don't mind people looking, or post all the related code here, you might get some alternative suggestions. If you've tried different browsers though, and it seems to work OK, then you can press on with other tasks....

KierNet · 24 February 2011 at 5:30PM

http://ki3r.org/ki3r/

I've not had a chance to test it in other browsers or different screen sizes, hopefully it will look OK without a scroll bar though!

victor2 · 24 February 2011 at 6:06PM

Doesn't look too bad, just a few suggestions though....

No need to specify font in P, H1 etc., just in body is enough. Also use
font-family: Verdana, Arial, Helvetica, sans-serif;
It helps with systems that don’t have Arial installed by default, like MACs.
It's better for compatibility to have a DOCTYPE statement at the start of each html page like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Take out margin:-8px; from footer style and put margin:0; in body style, then add margin: 8px in p style (or whatever margin you want). That's neater and gives you better control, plus it makes sense!

Firefox doesn’t like the menu by the way, but Chrome is OK with it.

KierNet · 24 February 2011 at 11:44PM

Thanks for that!

Do you have any ideas on how to get around the FireFox issue? Works in Safari as well.

victor2 · 25 February 2011 at 8:41AM

Add this to the stylesheet:

#nav {
position:absolute;
top: 170px;
width:100%;
text-align:center;
}

You can set the top position to whatever you want.
You'll also need a DOCTYPE in your html page to keep IE (and probably other browsers) happy.

Even though IE is the most popular browser, don't rely on it displaying pages as other browsers (or even other versions of IE) will. IE is notorious for not complying with established W3C standards and only Micro$oft could get away with releasing it. IE6 was dreadful, IE8 is better and hopefully IE9 will fall into line even more. I'll get off my soapbox though!;)

Bit of css help

Comments

Confirm your email address to Create Threads and Reply

🚀 Getting Started

Categories

Is this how you want to be seen?

Get our FREE Weekly email full of deals & guides - and it’s spam-free