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? :(
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.