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

Thread: Coding Probelm

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    271
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Coding Probelm

    I am using this code

    What i want to do is when it is on the id=current to have the same color as the hover

    That is all

    I have tried a few things no work This is my first BIG CSS script

    THXS Steve

    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Home</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>


    <style>
    #navcontainer
    {
    margin: 0;
    padding: 0 0 0 12px;
    }

    #navcontainer UL
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #navcontainer LI
    {
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    width: auto;
    }

    #navcontainer A
    {
    color: #444;
    display: block;
    width: auto;
    text-decoration: none;
    background: #DDDDDD;
    margin: 0;
    padding: 2px 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #aaa;
    }

    #navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

    #navcontainer A.active:link, #navcontainer A.active:visited
    {
    position: relative;
    z-index: 102;
    background: #BBBBBB;
    font-weight: bold;
    }

    #subnav
    {
    position: relative;
    top: -1px;
    z-index: 101;
    margin: 0;
    padding: 0px 0 3px 0;
    background: #BBBBBB;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    }

    #subnav UL
    {
    list-style: none;
    margin: 1px 0 0px 13px;
    padding: 0px;
    border-right: 1px solid #fff;
    border-left: 1px solid #aaa;
    }

    #subnav LI
    {
    position: relative;
    z-index: 102;
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    width: auto;
    }

    #subnav A
    {
    color: #fff;
    display: block;
    width: auto;
    text-decoration: none;
    margin: 0;
    padding: 2px 12px 2px 10px;
    }

    #subnav A:hover, #subnav A:active { color: #444; }
    #subnav A.active:link, #subnav A.active:visited { color: #444; }
    #subnav BR, #navcontainer BR { clear: both; }
    </style>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why do you need to have a link to a page itself?
    Use <span> and style it as a:hover
    <div id="navcontainer">
    <ul id="navlist">
    <li><span>Home</span></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>

    #navcontainer a, #navcontainer span
    {
    color: #444;
    display: block;
    width: auto;
    text-decoration: none;
    background: #DDDDDD;
    margin: 0;
    padding: 2px 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #aaa;
    }

    #navcontainer A:hover, #navcontainer A:active, #navcontainer span
    { background: #BBBBBB; }
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    271
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up THXS Very Much

    I have been reading on CSS alot and i saw it in a book so when i started on it I put it there

    I understand what you are saying BUT being new thought it had to be there


    Thxs STEVE

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is actually primarily HTML question.
    When you have a list of links:
    <ul id="navlinks">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    ...
    </ul>
    and you are putting this fragment on, say, page 1, does it make sense to keep the link to that page? Does not seem so, since it would serve no function. Therefore pure HTML solution would be:
    <li>Page 1</li>
    However, when you try to keep styling consistent, you find out that it is easier to replace anchor element with span instead of just removing the anchor elements alltogether.
    <li><span>Page 1</span></li>
    While it does add an element you do not need to add any extra classes, because every span child of ul with "navlinks" id will represent the current page.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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