...

View Full Version : Link within a div



stfc_boy
02-13-2008, 12:24 PM
Hi Guys,

How to you create hovers on a tags for all elements within a div id:

I thought it would be something like:



a.#main :link {
font: normal 12px Georgia, arial, verdana, sans-serif;
font-weight:bold;
color: #333;
text-decoration: none;
}
a.#main :visited {color: #333; text-decoration: none; border-bottom: 1px dashed #333; }
a.#main :hover {color: #333; text-decoration: none; border-bottom: 1px dashed #333;}
a.#main :active {color: #333; text-decoration: none; border-bottom: 1px dashed #333;}


Anyone help please?

Thanks

dudeshouse
02-13-2008, 12:27 PM
Hi Guys,

How to you create hovers on a tags for all elements within a div id:

I thought it would be something like:



a.#main :link {
font: normal 12px Georgia, arial, verdana, sans-serif;
font-weight:bold;
color: #333;
text-decoration: none;
}
a.#main :visited {color: #333; text-decoration: none; border-bottom: 1px dashed #333; }
a.#main :hover {color: #333; text-decoration: none; border-bottom: 1px dashed #333;}
a.#main :active {color: #333; text-decoration: none; border-bottom: 1px dashed #333;}


Anyone help please?

Thanks

If your div's id is 'main' and you want to style ALL links within it, use the following:



#main a {
font: normal 12px Georgia, arial, verdana, sans-serif;
font-weight:bold;
color: #333;
text-decoration: none;
}
#main a:visited {color: #333; text-decoration: none; border-bottom: 1px dashed #333; }
#main a:hover {color: #333; text-decoration: none; border-bottom: 1px dashed #333;}
#main a:active {color: #333; text-decoration: none; border-bottom: 1px dashed #333;}


Hope this helps.

Actinia
02-13-2008, 12:28 PM
Try removing the spaces between the identifier and the colon. use 'a.#main:hover' rather than 'a.#main :hover'.

John

effpeetee
02-13-2008, 12:29 PM
If you look at my Sources program, It uses hovers in lists in divs. Check the code it may help you. (View source.)

http://exitfegs.co.uk/Sources.html -

Frank

VIPStephan
02-13-2008, 01:04 PM
I you write something like :hover {background-color: yellow;} then this will affect all elements because it’s the same as writing *:hover {…}, so you’re correct in having the spaces between the first selector and the pseudo class. However, you do have some errors in your CSS, namely this: a.#main – you can’t have both, a class selector (period), and an ID selector (number sign), you have to decide. You said you have a div with ID “main” so your selector must read #main :hover {…}…

Oh hang on, I just got it! You want a hover effect only on all anchors in the div called “main”? Then you must write #main a:hover {…} First comes the parent element selector then the child.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum