Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Breaking Up UL's and LI's in 2 different style sheets ..

    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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Hmm .. have an example handy?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    umm an example? Its pretty simple actually.
    Code:
    <ul id="nav">
    <li>blah</li>
    <li>blah</li>
    <li>blah</li>
    </ul>
    Code:
    #nav li {
    your CSS
    }
    #nav li a {
    your CSS
    }

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Ah that .. I thought you meant defining something in one spot for everything ..

    The above is what I figured .. thanks ..

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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>

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?

  • #8
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    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.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Instead of giving a class to all those list items why not use this:

    Code:
    <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.

  • #11
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I figured it out guys .. thanks for the help ..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •