I have 2 sets of List in my page and I need to make them work in different manner.

but the 2nd set is inheriting the setting of the first, they already have different ID names!!!

What should I do? :(

php_noob,

What should I do? :(

You could start by posting your HTML/CSS.

Airshow

php_noob,

You could start by posting your HTML/CSS.

Airshow

:D RIGHT!

#page-nav{margin:-9px 0 0 20.4em; padding: 0; list-style-type: none; height:1.5em;}
#page-nav li{ background:url(../images/assets/monitor.png) no-repeat .2em; display:inline; padding-left:1.5em;}
#page-nav li a:link, a:visited{ font:.7em/1em Tahoma, Verdana, Arial; margin-right:1.5em; text-decoration:none; color:#666666; font-weight:bold; } 
#page-nav li a:hover{ font:.7em/1em Tahoma, Verdana, Arial; margin-right:1.5em; text-decoration:none; color:#FFFFFF; font-weight:bold; }

This is the css

This is the HTML

<div id="title-nav">
<ul>
						<li><a href="#" title="Homepage">Home</a></li>
						<li><a href="#" title="Logging Out">Logout</a></li>
					</ul>
</div>

And the style of this LIST is inherited by this set of LI on the same page

<div id="sys-nav">
<ul>
				<li><a href="#"><img src="images/main-menu-icon.png" alt="Check Voucher" border="0" />Check Voucher</a></li>
				<li><a href="#"><img src="images/main-menu-icon.png" alt="Check Voucher" border="0" />Reports</a></li>
				</ul>
</div>

For a start, -that's because there is no container element with ID "page-nav" in your html content. And that "#page-nav" css selector is targeting contained list-items on nonexistent element.

For a start, -that's because there is no container element with ID "page-nav" in your html content. And that "#page-nav" css selector is targeting contained list-items on nonexistent element.

OH YES!

So it should be

<ul id="page-nav">
<li>......</li>
</ul>

But if ever I have sets of UNordered lists on a page am I going to give each and every LI's LINKS <p>'s on a certain UNORDERD list? is there a better way?

Thanks for the observation! ;)

Yes. There's no need for <p> element in front of <li>, so no, you don't have to.

Otherwise I must confess I hardly understand your question, if at all. But I will presume that your problem is solved.

Cheers.

php_noob,

I understand (maybe incorrectly) that you want two independently styled Unordered Lists on the same page - one list has id="title-nav" and the other id="sys-nav" . If so, then this is the overall schema for your CSS:

ul {
    /*  put common style directives for unordered lists here */
    .......
}
#title-nav {
    /*  put style directives for title-nav here */
    /*  these will augment/override those in the common (ul) block above */
    .......
}

#sys-nav {
    /*  put style directives for sys-nav here */
    /*  these will augment/override those in the common (ul) block above */
    .......
}

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.