a:link box colour help

[wesleythorne]

Hi, my navigation box on the left hand size displays links that are handcoded, I would like to create an effect where when a mouse hovers over the link a box behind it changes colour, my site is http://www.treasureislandsweets.co.u...est/index.html

I think this can be done with css, is there a way i can create this effect somehow?
thanks
wesley

[jont]

Hi Wesley,

tried checking your site but could not get through! You can use CSS to change the backgound hover colour using the following - I would wrap the navigation in a <div> and use something like:

#mylinks a:link a:visited {
background-color: #ffffff;
}

#mylinks a:hover {
background-color: #000000;
}

#mylinks a:active {
background-color: #ffffff;
}

Depending on the existing navigation you may need to also declare "width" and display as "block" and any "padding" to allow space around the text and the background colour. For W3C compliance you should really add in the text details also eg:

#mylinks {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 95%;
color: #eee;
padding: 5px 5px 5px 10px;
}

HTH

[Guest]

Hi Wesley,

In the style sheet "actinic.css", the following code

a.boxlink:visited{
color:NETQUOTEVAR:PALBGCSS;
font-size:10px;
text-decoration:none;
}

a.boxlink:hover{
color:NETQUOTEVAR:FGCOLORCSS;
font-size:10px;
text-decoration:underline;
}

a.boxlink:active{
color:NETQUOTEVAR:FGCOLORCSS;
font-size:10px;
text-decoration:none;
}

brings the roll-over effect to the links.

In order to create a roll over effect for the links, another way would be to refer the section "Creating a Rollover for your Section Links", page 15 of the Advanced User Guide. A copy of the guide can be downloaded from our website http://www.actinic.co.uk/support/downloads.htm

Regards,
Sumiya Fathima
Actinic Support

[bangers]

Jont's is the way to go.

CSS is much slicker (better for the search engines).

You might want to add:
display: block;

to the code jont gave you.

so:
a.boxlink:visited{
color:NETQUOTEVAR:PALBGCSS;
font-size:10px;
text-decoration:none;
display: block;
}

a.boxlink:hover{
color:NETQUOTEVAR:FGCOLORCSS;
font-size:10px;
text-decoration:underline;
display: block;
}

a.boxlink:active{
color:NETQUOTEVAR:FGCOLORCSS;
font-size:10px;
text-decoration:none;
display: block;
}

this will apply the background effect to the whole line rather than just the text which will look a bit more professional.
regards
bangers

[wesleythorne]

thanks for that, i few things there for me to try, will let you know the results.
Wesley

[wesleythorne]

hi, just one thing, what is the correct code to call the new code.
My original link looks like this.

<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Bonbons.html">BONBONS</a><br>

would i just add <a.boxlink href

Thanks for all the help.

Wesley

[jont]

you call it using the class function eg:

<a class="boxlink" href="blah....

[jont]

If you set it as a <div id="n"> as in my first post that would assign the code to all the <a> tags within that <div> to save you handcoding each <a> individually

[wesleythorne]

hi, i am having problems trying to apply the class to the a links in the div as you suggest.
Do i add the class as
<div id="n" class="boxlink">

This doesnt seem to work.

Thanks
wesley

[wjcampbe]

try <div id="boxlink"> and dont forget the closing </div> after the last link.

[wesleythorne]

hi, still not there!

The code i have for my navigation is

<td valign="top">
<div id="boxlink">
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Boiled_Sweets_A_C.html">BOILED
SWEETS A-C</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/traditional_sweets.html">BOILED
SWEETS D-P</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Boiled_Sweets_R_Z.html">BOILED
SWEETS R-Z</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Bonbons.html">BONBONS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Bubble_Gum.html">BUBBLEGUM</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Chewy_Bars.html">CHEWY
BARS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Chocolate.html">CHOCOLATE</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Candy_British_Sweets.html">CHOCOLATE
CANDY</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Coconut.html">COCONUT</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Gluten_Free_Sweets.html">GLUTEN
FREE SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Soft_Sweets.html">JELLY
SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Liquorice.html">LIQUORICE</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Lollies.html">LOLLIES</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Marshmallow.html">MARSHMALLOW</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Mints.html">MINT
SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Novelty_Sweets.html">NOVELTY</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Gifts.html">PARTY
BOXES</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Chews.html">PENNY
CHEWS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Sherbet.html">SHERBET</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Sugar_Free_sweets.html">SUGAR
FREE</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Sweet_Jars.html">SWEET
JARS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Sour_Sweets.html">SOUR
SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Tins_Of_Sweets.html">TINS
OF SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Toffee.html">TOFFEE/FUDGE</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/tubes_of_sweets.html">TUBES
OF SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Turkish_Delight_flavours.html">TURKISH
DELIGHT</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Wedding_Favours.html">WEDDING
FAVOURS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Winter_Sweets.html">WINTER
SWEETS</a><br>
<a href="http://www.treasureislandsweets.co.uk/acatalog/test/acatalog/Corporate.html">COPORATE</a><br>
</div></td>



The code for css

a.boxlink:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
background-color: #FFFFFF;
font-size:10px;
text-decoration:none;
display: block;
}

a.boxlink:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
background-color: #FFCC00;
font-size:10px;
text-decoration:underline;
display: block;
}

a.boxlink:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
background-color: #FFFFFF;
font-size:10px;
text-decoration:none;
display: block;
}

[jont]

Wesley you are doing 2 things at the same time. You can either set an ID for the div or using Bangers methods he is using a class ... so you should use:

<a href class="boxlink" href="http://.....

Using a class allows you to specify any link on the page with that attribute ... setting a div id="" in effect separates that part from the other CSS and applies the code you set up in the #divname

A div with an ID can only appear on the page once. A class can appear many times

[jont]

The above reply was done during your last post. If you want to use a div id="boxlink" you need to set the CSS as

#boxlink a:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
background-color: #FFFFFF;
font-size:10px;
text-decoration:none;
display: block;
}

#boxlink a:hover {


etc

the "#" is what is giving the ID.

At the moment you have a CLASS in the CSS eg .boxlink (note the period) and do not have a ID specified

****
you should list the a: in the following order and include the "link"

link
visited
hover
active

LVHA
***********

[wesleythorne]

Thanks, sorry to be so dim, the div approch works now but i have anothe issue now. The links in the navigation now display an empty spave when you hover over the link. I would like the links to stay static and not jump about.

This can be seen here
http://www.treasureislandsweets.co.u...cid_Drops.html

Any idea what has caused this?

Thanks again
Wesley

[jont]

Hi Wesley,

the above link was not working but I suspect it may be due to not declaring a font and size for each of the "LVHA" states - try that or if you have another page that is working I can take a look at the live site