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.

Results 1 to 6 of 6

Thread: UL as links

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

    UL as links

    so i have this set up as my navigation for my page...

    CSS
    Code:
    ul {
    font-family:Arial;
    font-size: 12px;
    padding: 0px;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    padding-right:0px;
    }
    li ul { display: none; }
    ul  li a {
    display: block;
    width:8em;
    padding: 8px 0px 0px 0px;
    height:22px;
    text-decoration: none;
    color: #FFFFFF;
    background: #076963;
    margin-left: 0px;
    white-space: nowrap;
    text-align:center;
    }
    ul li a:hover { background: #b02d10; color: #FFFFFF;}
    HTML SECTION
    Code:
    <div class="nav">
                <ul>
                   <li><a href="index.html">HOME</a></li>
                   <li><a href="#">PROFILE</a></li>
                   <li><a href="#">BLOG</a></li>
                   <li><a href="#">PHOTOS</a></li>
                   <li><a href="contact.html">CONTACT</a></li>
                </ul>
    </div>
    All im after is the page they are currently on stayinh as the orange color...

    how do i do this?

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

  2.  

  3. #2
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    oh and heres its temp address.. Magician in Grimsby - James Kirman Magician
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  4. #3
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    If I understand well, you want link to page you are currently on to be colored orange.
    If so, you have to add a class for highlighted link:
    ul li a.highlight {
    background-color: orange;
    }

    On visited page you have to add this class to your a tag for link you want to highlight:
    <li><a class="highlight" href="index.html">HOME</a></li>
    <li><a href="#">PROFILE</a></li>
    <li><a href="#">BLOG</a></li>
    <li><a href="#">PHOTOS</a></li>
    <li><a href="contact.html">CONTACT</a></li>

  5. #4
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    sasha_bolcina thank you

    i have another CSS problem if you could solve that i would be over the MOOON! lol

    its in my other post

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

  6. #5
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    You can 'like' my post if you are satisfied
    I check your another post and put update. It is working on my side, maybe it's just browser cache problem. Try to refresh page in browser with ctrl+r. Styles and html looks just fine, it should work with no problem.

  7. #6
    Banned
    Join Date
    Sep 2014
    Posts
    21
    Member #
    40215
    Liked
    1 times
    hi,
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">contact</a></li>
    </ul>

    ul{list-style-type:none;}
    ul li{display:inline;}
    a{colorrange;}
    thanks


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 08:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com