...

View Full Version : Breaking Up UL's and LI's in 2 different style sheets ..



kraftomatic
07-18-2005, 05:57 PM
Hey All,

Minor problem .. I have 2 style sheets being used on a page. One is the main style sheet with 95% of the page elements included. Another is one specifically for a dropdown menu. It looks like this:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 140px;
/* this bottom border finishes off the main drop down (if using a border */
/*border-bottom: 1px solid #93591A;*/
}

nav {
/*
if you're looking for the "nav" id from the
ul tag, it's in the javascript, not the css
*/
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 139px; /* 1 px less width of ul */
width: 155px;
top: 0;
display: none;
border-bottom: 1px solid #93591A;
}

ul li a {
display: block;
text-decoration: none;
color: #000;
padding: 5px;
border: 1px solid #93591A;
border-bottom: 0;
background-color: #D6C49E;
}

ul li a:hover {
color: #93591A;
}

li:hover ul, li.over ul {
display: block;
}

a.noBorder {
border: 0px;
color: #000000;
background-color: transparent;
}

/* fix ie hack / hide from ie mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


So I obviously have ul and li tags in the main stylesheet to handle normal instances not including the drop down menu.

What's the best way to differentiate these two? I'm trying to keep things clean, but I'm not sure the best way to go about doing this ..

Thanks!

_Aerospace_Eng_
07-18-2005, 06:05 PM
Give an id to the nav menu and then go from there, so only your drop down menu styles will apply to the proper list instead of all lists.

kraftomatic
07-18-2005, 06:20 PM
Hmm .. have an example handy?

_Aerospace_Eng_
07-18-2005, 06:23 PM
umm an example? Its pretty simple actually.

<ul id="nav">
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>


#nav li {
your CSS
}
#nav li a {
your CSS
}

kraftomatic
07-18-2005, 06:30 PM
Ah that .. I thought you meant defining something in one spot for everything ..

The above is what I figured .. thanks ..

kraftomatic
07-18-2005, 08:41 PM
Alright .. this isn't working .. I declare classes for all UL and LI elements, but when I have both CSS files declared above in the file, it's still grabbing the basic UL and LI attributes from the other style sheet. What gives? Any suggestions?

Here's the HTML:

<ul class="dropDown" id="nav">
<li class="dropDown"><a href="#" class="noBorder">test</a>
<ul class="dropDown">
<li class="dropDown"><a href="#" class="dropDown">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
</ul>
</li>
</ul>

_Aerospace_Eng_
07-18-2005, 08:50 PM
You'll have to redeclare any properties that you have in the default ul li styles. And why on earth would you give a class to every thing?

kraftomatic
07-18-2005, 09:07 PM
You'll have to redeclare any properties that you have in the default ul li styles. And why on earth would you give a class to every thing?

I wouldn't. I want the basic UL and LI tags to have their set of properties, and then specific properties for the UL and LI tags within a "dropdown" class.

_Aerospace_Eng_
07-18-2005, 09:15 PM
Can you show us a link to your page please? Your default styles are being applied to your navigation as well because you haven't declared them there. You can lose the default ul li styles all together and just give a class to the ul lis that you want to have a certain formatting.

Kurashu
07-18-2005, 11:34 PM
Instead of giving a class to all those list items why not use this:



<ul id="nav">
<li class="father"><a href="#">test</a>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
</ul>

#nav {
}

#nav ul {
}

#nav li {
}

.father {
}

.father a {
}

.father ul {
}

.father ul li {
}

.father ul li a {
}


Use that as a frame work to build your CSS.

kraftomatic
07-19-2005, 03:00 PM
I figured it out guys .. thanks for the help ..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum