...

View Full Version : Coding question



stevan
02-26-2004, 02:00 AM
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
02-26-2004, 02:59 AM
I have no idea what you're trying to achieve... Next time use proper punctuation to help get your point across.

mindlessLemming
02-26-2004, 04:53 AM
#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.
:D

stevan
02-26-2004, 12:55 PM
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
02-26-2004, 01:02 PM
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! (http://www.codingforums.com/postguide.htm)

[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
02-26-2004, 01:10 PM
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
02-26-2004, 02:43 PM
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
02-27-2004, 03:08 AM
I believe the easiest thing to do here would be to use descendant selectors.
You can find some info here (http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors), here (http://www.websiteoptimization.com/speed/tweak/descendant/), here (http://www.maxdesign.com.au/presentation/list_cascade/index.htm), and here (http://www.meyerweb.com/eric/css/tests/css2/sec05-05.htm).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum