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

GroovyJanBrady
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.
http://www.dorisleahwarcholik.com . 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.
http://www.dorisleahwarcholik.com/creations.html 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 http://www.htmlhelp.com/tools/csscheck/ . 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.

GroovyJan
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

drhowarddrfine
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.