SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple lists <ul>

    Hey guys,

    I've created a <ul> menu for my navigation and now I want to add another <ul> for bullet points but the <ul> bullet points are picking up the styles of the <ul> nav. I've tried giving the nav <ul> a style but it's still not working?


    THIS IS THE BULLET POINTS
    *************************************
    Code HTML4Strict:
    <ul>
            <li class="leaf">List item 1</li>
            <li class="leaf">List item 2</li>
            <li class="leaf">List item 3</li>
    </ul>

    Code CSS:
    .custom li.leaf {
    list-style-type: none;
    background: url('http://www.techforluddites.com/images/leaf_icon.jpg') no-repeat top left;
    height: 46px;
    padding-left: 40px;
    }





    THIS IS THE NAV
    **********************

    Code HTML4Strict:
    <ul>	
        <li><a href="#" style="margin:0 18px 0 0px;"class="link1">Products</a> |
             <ul>
                <li>Purified Natural Allergens</li>
                <li>Recombinant Allergens</li>
                <li>Whole Allergen Extracts</li>
                <li>Antibodies</li>
             </ul>
      </li>
    </ul>

    Code CSS:
    ul {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 0px 0px 0px 0;
      list-style: none;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }
    ul li {
      font-family: Century Gothic, arial, sans-serif;
      font: 13px/18px sans-serif;
      display: inline-block;
      margin-right: -4px;
      position: relative;
      padding: 11px 8px 9px 8px;
      background: #143863;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    ul li:hover {
      background:transparent;
      color: #fff;
    }
    ul li ul {
      padding: 0;
      position: absolute;
      top: 38px;
      left: -10px;
      width: 180px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
    }
    ul li ul li { 
      background: #143863; 
      display: block; 
      color: #fff;
      text-transform:lowercase;
      text-shadow: 0 -1px 0 #000;
      font-size:12px;
      font-weight:100;
      background-color: rgba(20, 56, 99, 0.9);
      background: rgba(20, 56, 99, 0.9);
      color: #fff;
    }
    ul li ul li:hover { background: #4383c4; }
    ul li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rossnaumov View Post
    bullet points are picking up the styles of the <ul> nav.
    It's best to give the nav ul a class of its own, which you can then use to apply any styles that are unique to that element. At the moment, the nav styles are applied to all ULs, which is not what you want.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    What you need to realize is that CSS declarations cascade

    so a rule like UL LI {} affect ALL LIs within the first UL , not just the children. ( btw giving a class to each LI would work too, but it's a bit heavy handed).

    you can RESET the lower level elements like this .nav LI LI{ lower level rules...}

    or
    You can use the child selector UL.nav>LI { top level rules }

    hope that helps

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help.

    So these would be the 2 different classes applied below?

    CLASS ONE
    ***************
    Code CSS:
    .class_one ul {
      /* CSS here */
    }
    .class_one ul li {
      /* CSS here */
    }
    .class_one ul li:hover {
      /* CSS here */
    }
    .class_one ul li ul {
      /* CSS here */
    }
    .class_one ul li ul li { 
      /* CSS here */
    }
    .class_one ul li ul li:hover {
    /* CSS here */
    }
    .class_one ul li:hover ul {
      /* CSS here */
    }

    Code HTML4Strict:
    <ul class="class_one">
     <li><a href="#">HOME</a></li>
     <li><a href="#">ABOUT US</a></li>
     <li><a href="#">CONTACT US</a></li>
     <li><a href="#">SERVICES</a></li>
    </ul>

    CLASS TWO
    ****************

    Code CSS:
    .class_two ul {
     /* CSS here */
    }

    Code HTML4Strict:
    <ul class="class_two">
         <li>Bullet point</li>
         <li>Bullet point</li>
         <li>Bullet point</li>
    </ul>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, except that you've made a mistake. If you have this in your HTML:

    Code:
    <ul class="class_one">
    then you target it like this:

    Code:
    ul.class_one {
      /* CSS here */
    }
    That targets a UL with a class of "class_one". The way you were writing it, the class would have to be on a parent of the UL, rather than on the UL itself. So you need to change each example above.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right! Thank you ralph.m. I'll make those changes.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked perfectly thanks ralph.m

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. Glad it helped.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    I have another CSS question for you.

    Again I am having an issue with classes [ I think ] I have an anchor at the bottom of the page which is a CSS image rollover - http://rossnaumov.com.au/clients/PPC/

    THE CSS
    ***********

    Code HTML4Strict:
    .coffee {
    display: block; width: 74px; height: 74px; background:url(images/coffee.png) bottom; text-indent: -99999px;
    }
    .coffee:hover {
    background-position: 0 0;
    }
    .anchor { display: block; width: 56px; height: 56px; background: url(images/anchor.png) bottom; text-indent: -99999px;
    }
    .anchor:hover {
    background-position: 0 0;
    }
    }


    I am trying to use the same CSS image rollover effect for the menu but when I do it moves the coffee image outside of the menu div. I'm thinking it must be a class issue?

    HTML
    *******

    Code CSS:
    <div class="header-cont">
    <a name="top" href="#footer"></a>
        <div class="header">
          <a class="coffee" href="#">Leaf</a>
          <img src="images/menu.png" border="0">
          <img src="images/location.png" border="0">
          <img src="images/pies.png" border="0">
          <img src="images/love.png" border="0">
          <img src="images/review.png" border="0">
          <img src="images/fb.png" border="0" />
        </div>
    </div>
     
    <a class="anchor" style="margin:0px 0 0 450px;" href="#top"></a>

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Where do you want the coffee bit to be?

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Where do you want the coffee bit to be?
    I'm wanting the coffee rollover to be in the main menu. I'm trying to make those menu images image rollovers.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rossnaumov View Post
    I'm wanting the coffee rollover to be in the main menu.
    No, I mean where EXACTLY do you want it positioned? 'In the menu' is too vague.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, I mean where EXACTLY do you want it positioned? 'In the menu' is too vague.
    I actually want it in the "header" as below. See the <a class="coffee" href="#">Leaf</a> within <div class="header"> ? The CSS is below:

    Hopefully this explains it better? http://rossnaumov.com.au/ross.png


    Code HTML4Strict:
    <a name="top" href="#footer"></a>
        <div class="header">
          <a class="coffee" href="#">Leaf</a>
          <img src="images/menu.png" border="0">
          <img src="images/location.png" border="0">
          <img src="images/pies.png" border="0">
          <img src="images/love.png" border="0">
          <img src="images/review.png" border="0">
          <img src="images/fb.png" border="0" />
        </div>
    </div>

    Code CSS:
    .header {
    height:74px; background:transparent; width:980px; margin:0px auto; text-align:center;
    }

    Thank you for your help!

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,584
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Try this:

    style.css (line 75)
    Code:
    .coffee {
        background: url("images/coffee.png") repeat scroll center bottom transparent;
        display: inline-block;
        vertical-align: top;
        width: 74px;
        height: 74px;
        text-indent: -99999px;
    }

  15. #15
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ronpat. That worked!

    I noticed you added

    Code CSS:
    repeat scroll center bottom transparent

    and

    Code CSS:
    display: inline-block; vertical-align: top;

    It also works by just adding

    Code CSS:
    display: inline-block; vertical-align: top;

    Like

    Code CSS:
    .coffee {
        background:url(images/coffee.png) bottom;
        display: inline-block;
        vertical-align: top;
        width: 74px;
        height: 74px;
        text-indent: -99999px;
    }

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,584
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    FYI: That string of code
    background: url("images/coffee.png") repeat scroll center bottom transparent;
    was displayed by Firebug. Firebug includes the default properties that are being applied by the shorthand in addition to those that you have applied in your CSS. The significant part of my post was the added properties in blue.

    Thanks for the feedback. Glad it worked!!!

  17. #17
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's good to know re: firebug.

    Thanks again ronpat and happy Monday.


Bookmarks

Posting Permissions

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