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 8 of 8

Thread: Coding question

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

    Coding question

    I going to use this on my site BUT i have a set of css hover and such for the links on the page already I know how to make the second set BUT how do i do it to this script


    THXS STEVE


    div id="navcontainer">
    <ul id="navlist">
    <li id="active"><Item one</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>
    #navlist li
    {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    }

    </style>

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    California
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have no idea what you're trying to achieve... Next time use proper punctuation to help get your point across.

  • #3
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    #navlist a:link{....................}
    #navlist a:visited{....................}
    #navlist a:focus{....................}
    #navlist a:hover{....................}
    #navlist a:active{....................}

    They MUST be in this order for them all to work.
    Just think of it w/ this rhyme:
    Lord Vader's Former Handle Anikan.

    I take no responsibility for the above nonsense.


    Left Justified

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

    Problem

    This is still controlling the script
    <style>
    a{ color: black }
    a{text-decoration: none;}
    a:hover { color: yellow }
    </style>

    Do you have to insert it differently on the page or ????


    Thxs Steve

  • #5
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    You can set more than 1 property in a block..

    block {
    prop1: whatever;
    prop2: whatever2;
    etc ...
    }

    So you should have --

    a {
    color: black;
    text-decoration: none;
    }

    a:hover {
    color: yellow;
    }

    I'm not sure what your actual problem is though, could you try to explain it a little clearer please.

    And you have violated our posting guidelines by not using an appropriate title, which you agreed to obey when you signed up for an account!!

    Please read them here!

    [edit:] Ok I see what you mean. Firstly you are missing the first <a> tag in the first <li> element.

    Second use it like --

    ul#navthingy a {
    ... properties ...
    }
    Last edited by Mhtml; 02-26-2004 at 01:04 PM.
    Omnis mico antequam dominus Spookster!

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

    Code Modify Problem

    I am using this code for the links on my page

    <style>
    a{ color: black }
    a{text-decoration: none;}
    a:hover { color: yellow }
    </style>

    Works fine


    I want to use this script on the same page

    I need to know how to modify it so that the above css does not influence the script links

    Thxs Steve



    div id="navcontainer">
    <ul id="navlist">
    <li id="active"><Item one</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>
    #navlist li
    {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    }

    </style>
    Soory about the posting mistake I hit return and did not look at it

  • #7
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I think I know what you mean: you have the following stylesheet defined:
    <style>
    a{ color: black }
    a{text-decoration: none;}
    a:hover { color: yellow; }
    </style>

    (which, incidentally, should be written as):

    <style>
    a:link{ color: black; text-decoration: none;}
    a:hover { color: yellow }
    </style>

    but you don't want that style to apply to links in a <li> tag. Right?

    Well, I'm sure there is a way to apply styles to tags within tags, but I can't think of the syntax. Someone else will surely be along in a minute But another way round it would be to use classes:

    <style>
    a:link{ color: black; text-decoration: none;}
    a:hover { color: yellow }
    a.listitem:link{...styles...}
    a.listitem:hover{...styles...}
    </style>

    Any links on your page that just have <a href="page.htm"> would use the original style declarations, and any that have <a href="page.htm" class="listitem"> would use the new declarations.

    Any help?

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    USA
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe the easiest thing to do here would be to use descendant selectors.
    You can find some info here, here, here, and here.


  •  

    Posting Permissions

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