My first xhtml/css site so far- need guidance.

Dev Shed Forums Sponsor:

February 8th, 2012, 02:41 PM

adam02

Registered User

Join Date: Aug 2011

Posts: 4

Time spent in forums: 1 h 19 m 10 sec
Reputation Power: 0

My first xhtml/css site so far- need guidance.

Hey all,

been a lurker for a while now but I've come out from the shadows in hopes of gaining a bit of guidance:

I'm pleased with my progress so far but I need some guidance on some things.

The whole main content is contained in "container"

And within the container I have a "header" div;
then below that I have the "divLinks" which contains "divNav"

I've highlighted these with colors.

But there's a space between divLinks and Header.

I've floated divLinks to the with no real effect.

Any help would be greatly appreciated. Thanks.

Code:

<!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" lang="en" xml:lang="en"> <!-- Home,Courses,Contact--> <html> <head> <title>NorthWest · Sailing Education</title> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <link type="text/css" rel="stylesheet" href="nwsestyle.css" /> </head> <body> <div id="container"> <div id="header"> <img src="images/logo.gif" alt="NorthWest Sailing header image"/> </div> <div id="divLinks"> <div id="divNav"> <ul> <li><a href="index.html">About</a></li> <li><a href="courses.html">Courses</a></li> <li><a href="facilities.html">Facilities</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="main"> <h1>NorthWest Sailing Education</h1> <p> Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla </p> <p> Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla </p> <h1>OUR STORY</h1> <p> Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla </p> <p> Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla </p> <h1>NORTHWEST SAILLING EVENTS 2012</h1> <p> Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla Bla bla bla bla bla bla bla <a href="bigrace2012.html#house" title="Big Race 2012">Big Race 2012</a> </div> </div> <!--div id="footer"> © 2012, NorthWest Sailing <br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners. </div--> </body> </html>

EDIT: I'm not allowed to post links as a new member, and my code failed, so if this isn't allowed I apologize in advanced but I don't see any other way:

north west sailing dot eu without any spaces. Thanks.

February 8th, 2012, 03:25 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 236

Folding Points: 29722 Folding Title: Starter Folder

Time spent in forums: 1 Week 1 Day 17 h 57 m 49 sec
Reputation Power: 162

add margin:0; to your #divNav ul{} css.

February 8th, 2012, 03:31 PM

adam02

Registered User

Join Date: Aug 2011

Posts: 4

Time spent in forums: 1 h 19 m 10 sec
Reputation Power: 0

Quote:

Originally Posted by DonR

add margin:0; to your #divNav ul{} css.

YOU ARE A HERO!

Thanks! I'll probably have more questions later though!

Thanks again!

February 8th, 2012, 05:22 PM

adam02

Registered User

Join Date: Aug 2011

Posts: 4

Time spent in forums: 1 h 19 m 10 sec
Reputation Power: 0

I've updated the site now with a new issue that I'm trying to get a solution to.

I created a new div that contains everything so I could put another gif up.

I wanted the gif to appear behind the "container" div.

Any ideas?

February 9th, 2012, 02:16 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 236

Time spent in forums: 1 Week 1 Day 17 h 57 m 49 sec
Reputation Power: 162

you are going about it all wrong. there is no need to add a different div.
all you need to do is add to your #container css

Code:

background-image:url('images/bground.gif');

that will set your gif as a background for your container section.

you might want to take a look at this LINK to learn more about the different background css options.

Last edited by DonR : February 9th, 2012 at 08:35 PM.

February 10th, 2012, 11:32 AM

adam02

Registered User

Join Date: Aug 2011

Posts: 4

Time spent in forums: 1 h 19 m 10 sec
Reputation Power: 0

Hey, I tried implementing that code you typed into the body background but I already have a generated gradient code in there, and I want the image to be on top of the gradient but behind the #container part.

So that it fits in nicely behind the #header (logo bar).

February 10th, 2012, 04:57 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 236

Time spent in forums: 1 Week 1 Day 17 h 57 m 49 sec
Reputation Power: 162

i didn't tell you to place the code in the body css..I said to place it in the #container css.
I also see that you have removed the code from the link you gave in original post, so, I won't be able to help you anymore without being able to see your code on your site.