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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    styling an unordered list

    hey everyone.
    This is doing my nut in and ruining my wkend.

    I found this great expandable jquery vertical navigation menu. The problem is on other pages i have unordred lists and the unordered list style for the jquery vertical menu effects all the other unordered lists and i dont want that.
    The html and inline css etc is this..........



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization, packaging design" />
    <meta name="description" content="Design Chemical, Bangkok provides web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization &amp; packaging design." />
    <meta name="robots" content="all" />
    <title>jQuery Example - Vertical Accordion Menu using Cookies - Design Chemical Bangkok</title>
    <link rel="shortcut icon" href="http://www.designchemical.com/favicon.ico" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>

    <style>
    ul{list-style: none; padding: 0; margin: 0;}
    #nav {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin: 15px 0;}
    #nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
    #nav li a:hover, #nav li a.active {background: #999; color: #fff;}
    #nav li ul {display: none;}
    #nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}
    </style>

    <script>
    $(document).ready(function () {
    var checkCookie = $.cookie("nav-item");
    if (checkCookie != "") {
    $('#nav > li > a:eq('+checkCookie+')').addClass('active').next().show();
    }
    $('#nav > li > a').click(function(){
    var navIndex = $('#nav > li > a').index(this);
    $.cookie("nav-item", navIndex);
    $('#nav li ul').slideUp();
    if ($(this).next().is(":visible")){
    $(this).next().slideUp();
    } else {
    $(this).next().slideToggle();
    }
    $('#nav li a').removeClass('active');
    $(this).addClass('active');
    });
    });
    </script>

    </head>
    <body id="demo">
    <h2 class="page-title">jQuery Demo: Vertical Accordion Menu using jQuery Cookies</h2>

    <ul id="nav">
    <li><a href="#">Item 1</a>
    <ul>
    <li><a href="#">Sub-Item 1 a</a></li>
    <li><a href="#">Sub-Item 1 b</a></li>
    <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
    </li>
    <li><a href="#">Item 2</a>
    <ul>
    <li><a href="#">Sub-Item 2 a</a></li>
    <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a>
    <ul>
    <li><a href="#">Sub-Item 3 a</a></li>
    <li><a href="#">Sub-Item 3 b</a></li>
    <li><a href="#">Sub-Item 3 c</a></li>
    <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
    </li>
    <li><a href="#">Item 4</a>
    <ul>
    <li><a href="#">Sub-Item 4 a</a></li>
    <li><a href="#">Sub-Item 4 b</a></li>
    <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
    </li>
    </ul>
    <p style="clear: both;"><a href="http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu-with-cookies/">Back to blog post</a></p>
    </body>
    </html>


    itried changing the css ul to #nav ul{list-style: none; padding: 0; margin: 0;} but this doesnt seem to work. please help this dumbass out someone.cheers.

    teddy

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    What are the ID's of the other unordered lists on the other pages?

    Regards,

    LC.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You have, in your html:

    Code:
    <ul id="nav">
    and in your css:

    Code:
    #nav ul{list-style: none; padding: 0; margin: 0;}
    #nav ul will apply to any ul element within an element with id of nav. What you need is:

    Code:
    ul#nav{list-style: none; padding: 0; margin: 0;}
    which applies to a ul with id of nav. Or, you can just the styling to your existing #nav statement.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sorted

    I f&%king luv u SB65 dude. What you suggested worked. I spent hours trying to fix it yesterday with no luck. Just home from work,tried what u said and bingo. Im very happy
    cheers


  •  

    Posting Permissions

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