I am trying to put a page together that is a bit more complicated than the basic pages I have been experimenting with lately (I am a newbie trying to learn as I go) and I've hit a couple of snags that I just can't figure out.

The live page is HERE.

The first problem is that there is a gap above my "footer". It has to be something with my <div>'s but I just can't find it or figure out what is causing the gap.

The second problem is I am trying to incorporate a simple horizontal menu that only has four items (so far )

If you look hard at the bar below the company name and the image to the right of the name, you will see that I kinda sorta got the menu laid out, but I need to do something about the spacing between the links so they fit the small images in the bar. Also, for some reason the color I have specified is not working. Finally, I would like to have the text change color as a rollover if it isn't to complicated to code.

I would really appreciate it if one of the experts would take a look at this and tell me what I did wrong and direct me to where I can learn how to fix it.

Thanks

I can't spot the break. Lady or Chris will will catch up with you on that.

To set a hover color use this syntax:

A.nav-link:hover {
color:#FF0000;
}

And then define the link. In this example a nav link.

EDit: if you only want a single class of links it would just be:

A.link:hover {
color:#FF0000;
}

The spacing problem is most likely in the definition of your left id. try to either reduce height:539px; or modify left.jpg. I think that should fix it. let me know if it worked.

JohnDiamond, you were right on the money about the definition. After adjusting the height of "left" and "Mid" <div>'s, it all lined up perfectly.

What I don't understand and can't seem to get thru my thick head is why I end up with different heights for my <div>'s. It seems to me that if they are all set for say 500px, why they don't line up as I would expect them to. This is driving me nuts.

Colbyt your suggestion worked. Now all I need to figure out is the spacing between links so I can move them to work with the images.

Thanks again

That's a good question. I usually just "try things" and then see the results, as I am no professional web designer, so I can't help you more than that! (apparently, my help was still worth it :P ...)

First of all, your #container isn't containing it's contents because you have not properly cleared your floats.

Secondly, you're approach to the layout is less than optimal. Instead of defining absolute heights so you can fit your static background in it, make a smaller horizontal 'slice' of the main part of your content background, and repeat that vertically, that will allow ANY height. Then all you need to do is add a top and bottom to hold the rounded top and bottom of the rounded box.

It is generally not necessary to 'nail' down heights like that, especially if you change your approach to how you define the backgrounds. It looks as if you're still 'slicing' as if you were using tables, you need to readjust your thinking a bit for CSS-based layouts.

Try this: www.cssslicingguide.com

LadynRed, when I posted this up originally I was using one image for each of the backgrounds in the different <div>'s. After reading your reply, I went back in and re-did it using just a slice of the original image and having it "repeat" per your suggestion.

your #container isn't containing it's contents because you have not properly cleared your floats.

I'm not sure that I understand this. Do you mean that I need to add something like "clear: both;" in my #container to properly clear the floats? Also, I'm not sure that I understand what you ment abou nailing down heights.

If you would elaborate, I would appreciate it.

JohnDiamond, I play around alot with what I do. I can learn by just reading. I have to try it to see it work. So, like you, I try different things just to see how they turn out.

Again, thanks for all the help.

Do you mean that I need to add something like "clear: both;" in my #container to properly clear the floats? Also, I'm not sure that I understand what you ment abou nailing down heights.

This can explain it better than I can - and give you different methods:
http://css-discuss.incutio.com/?page=ClearingSpace

What I meant by 'nailing down heights' is that it's generally not necessary to define a fixed height as the divs will stretch vertically to hold what's in them. You can utilize min-height (which IE6 doesn't understand) to define a minimum, it just depends on your layout.