Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
Like Tree1Likes

Thread: navbar using <UL> questions and help

  1. #1
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times

    Question navbar using <UL> questions and help

    hello all,

    so i have built a nav bar using the good old <UL> and <LI> tags...

    heres the code for it...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="XHTML namespace">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
    font-family:Arial;
    font-size: 14px;
    padding: 0;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    padding-right:4px;
    }
    li ul { display: none; }
    ul  li a {
    display: block;
    width:10em;
    padding: 8px 0px 8px 0px;
    text-decoration: none;
    color: #dcd9d7;
    background: #222020;
    margin-left: 1px;
    white-space: nowrap;
    text-align:center;
    }
    ul li a:hover { background: #747c0e; color:#000000;}
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Classes</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </body>
    </html>
    my problem is what happens if i want another list on the same page but with totally different styles? im unsure how to do that...

    finally if i want one of the links to become a different color but only one how would i do that?

    cheers
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Give at least one of the ULs a unique id and apply the CSS styles to that ID only.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    im still lost lol could you show me what you mean with the code above?

    you're basically telling me i can wrap all this..

    ul {
    font-family:Arial;
    font-size: 14px;
    padding: 0;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    padding-right:4px;
    }
    li ul { display: none; }
    ul li a {
    display: block;
    width:10em;
    padding: 8px 0px 8px 0px;
    text-decoration: none;
    color: #dcd9d7;
    background: #222020;
    margin-left: 1px;
    white-space: nowrap;
    text-align:center;
    }
    ul li a:hover { background: #747c0e; color:#000000;}

    in one id ie #mainnav

    how would i do that? because when i add #mainnav to all those classes it doesnt work...

    cheers for your time
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  5. #4
    Senior Member Richard S's Avatar
    Join Date
    Jul 2004
    Location
    SW Lonodn
    Posts
    219
    Member #
    6728
    Liked
    3 times
    If you assign a unique ID to the <ul> parent element you can then style the child <li> elements independently with CSS.

    Here's a very quick example:

    Code:
    <!doctype html><html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    
    
    ul#list1 li { background-color:#00C; }
    
    
    
    
    ul#list2 li { background-color:#063; }
    
    
    </style>
    </head>
    <body>
    <ul id="list1">
    	<li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul id="list2">
    	<li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    </body>
    </html>
    HTML Code:
    ul#list1 li { background-color:#00C; }
    Hope this helps.
    TheGAME1264 likes this.

  6. #5
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    spot on i now can have two lists on a page :-)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="XHTML namespace">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul#list1 {
    font-family:Arial;
    font-size: 14px;
    padding: 0;
    list-style: none;
    }
    ul#list1 li {
    display: block;
    position: relative;
    float: left;
    padding-right:4px;
    }
    li ul#list1 { display: none; }
    ul#list1 li a {
    display: block;
    width:10em;
    padding: 8px 0px 8px 0px;
    text-decoration: none;
    color: #dcd9d7;
    background: #222020;
    margin-left: 1px;
    white-space: nowrap;
    text-align:center;
    }
    ul#list1 li a:hover { background: #747c0e; color:#000000;}
    </style>
    </head>
    <body>
    <ul id="list1">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Classes</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </body>
    </html>

    how would make the <li><a href="#">Home</a></li> have a different colour to the rest to show that it has been visited ?
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Quote Originally Posted by Richard S View Post
    If you assign a unique ID to the <ul> parent element you can then style the child <li> elements independently with CSS.

    Here's a very quick example:

    Code:
    <!doctype html><html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    
    
    ul#list1 li { background-color:#00C; }
    
    
    
    
    ul#list2 li { background-color:#063; }
    
    
    </style>
    </head>
    <body>
    <ul id="list1">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul id="list2">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    </body>
    </html>
    HTML Code:
    ul#list1 li { background-color:#00C; }
    Hope this helps.
    Nice explanation, dude. Well done.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    can anyone help?
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Help you with what, exactly? Richard pretty much paved the road for you. He can't have done any more than he did that I can see.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    i like what you just said "paved the road" that made me lol

    ive managed to create two or more lists... but i also would like to know how to change the colour of one of the <LI>'s so that the page you are on is highlighted a different colour... so in my example when your on a page that link stays yellow...

    cheers again
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Something like this:
    Code:
    a#active-link {color:  yellow;}
    ...
    <li><a href="#" id="active-link">Home</a></li>
    How exactly you apply that will depend on what you're doing, but that's the general idea.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com