nav bar question and also further html/css learning sites

I've been reading more threads here and saw someone tell another that <divs> are not needed around <uls> because the <uls> can just stand alone. Okay, that makes sense when the list is just be itself, but if it's supposed to have an image behind it, and the image height and width is dependent on the font/lineheight of the list words, should <div> be used to couple the list and image together, or should the image be seperate and can CSS be used to stick it behind the list (horizontal menu/nav bar)?

I've done and repeatedly gone back to w3schools' page but they're limited in what they teach. I've also used many sites for specific things like htmldog and so, but is there a site(s) where, after the basic html lessons, there are various sorts of page templates, then lessons given on how to make those pages (simple pages, I mean) and why/why not certain things like <divs> are used in blahblah situations, etc.? I can look up what a <div> does without really learning when I should and should not use it.

The page in question currently has a unordered list nested in a div; the reason told to me is because of the image behind it. I'd trying to learn html/css by rewriting this page on my own machine, and then if it's better (leaner written, working crossbrowser with few if any hacks, passes html 4.0 muster, least amout of scripting needed), replace the current one(s).

It seems that some people here are making such pages possibly? I can practise on w3schools' little tasks, but its often different on a real web page (and many of the tasks don't display correctly in my FF browser and then I'm confused until someone points out, "oh that's a browser problem, they're trying to show you this." Oh...)

 

As long as you lack the basic understanding of CSS (as you obviously do), nothing will help you. I learned CSS from the sites like htmldog, w3schools, and so on. They are pretty complete (if you study them all, not just one). By practicing, you will go for more complex (simpler html, complex css) designs. Now, if i understand your question good, you really need a few lessons about CSS background properties. You should really study that part, as it wil help you a lot later.
Usually i use a div that engulfes the wanted UL, and that's because that i don't know how background on ul's might react with differend browsers.

Hopefully this helps.

 

As I'm the person who said that, I might as well chime in here. You can use the UL as a container for the background image if you like. If you have a horizontal list menu, set the list items to display: inline; white-space: nowrap; (you'll have to set overflow: hidden to the UL as well to force IE 5/6 to treat height as height, since they treat it as min-height by default) and then set the height and line-height on the UL to the same size and value. Then add your background image to the list itself. Here's an example:

#menu {
    background: url("/images/menubg.png") top left repeat-x;
    height: 50px;
    line-height: 50px;
    list-style: none;
    overflow: hidden;
}

#menu li {
    display: inline;
    white-space: nowrap;
}

Code (markup):

<ul id="menu">
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
</ul>

Code (markup):