By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

problem using 2 lists for CSS formatting on one page

P: 1
Hi, I'm very glad to have found this forum! This is my first project with significant CSS usage. Here is the site I am working on. . The original page was a dreamweaver template I used to for the site. Then after discovering the power of CSS, I decided to strip it down and redo it using CSS. is the page I did controlling most of the page with CSS. I got pretty far redoing the design with CSS until I wanted to use a second list on the page.

The problem I have is using more than one "ul" on the page. The left hand nav is a list. I wanted to use a list to control the four choices in the main content area of the page. But any changes I make to the main content list affects the nav list, even though they were named differently. I imagine there is something I am not getting about the heirarchy of CSS. Any thoughts? (This giant pain in my butt is why I hacked up my beautifully clean code and slapped a table in there until I can figure it out!)

I have run this through validation for both html and css, as well as using the . I'm not seeing the conflict. I also checked the forum for other examples of what I am experiencing, but I'm not really sure how to articulate what the problem is and therefore don't know what to look for.

Any help would be appreciated. Thanks for your time.

Mar 3 '07 #1
Share this Question
Share on Google+
2 Replies

P: 24
One tip I would give is to employ correct use of ID and CLASS. For example:

#navigation li {
color : red

- in your style sheet would apply to any <li> element within the element which has the ID "navigation" (in your case a <ul>), hence, no need for repeating the same class for each <li>

Similarly, if you wanted to create a horizontal navigation, you could put it all within a <div> element, eg <div id="horizontalNav"> and then apply a style to each <ul><li> within that navigation, and even style the links and images within that <ul>, eg:

#horizontalNav ul li {
float : left;

#horizontalNav ul li a:hover {
color : red;

#horizontalNav ul li img {
border : 0

Hope that makes sense!
Mar 5 '07 #2

Expert 5K+
P: 7,435
You say you ran it through the validator but I see nine errors in html alone.
Mar 5 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.