Coding question

[stevan]

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>

[freak]

I have no idea what you're trying to achieve... Next time use proper punctuation to help get your point across.

[mindlessLemming]

#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.

[stevan]

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

[Mhtml]

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 ...
}

[stevan]

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

[Spudhead]

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?

[Paul Jr]

I believe the easiest thing to do here would be to use descendant selectors.
You can find some info here, here, here, and here.