Isabelle schreef:
I want two sets of links to do different things; one set within *content*
and the other *navigational* elements. In particular I want the *hover*
rollover effect to work differently in each of those sets.
How do I do this in CSS? Class function... two style sheets? I'm lost,
please help! : =)
Newbie to CSS,
One stylesheet will do. Create a text-file with extention .css.
Link it to your pages in the <head> as
<link rel="stylesheet" type="text/css"
href="../stylesheets/stylesheet.css"> <!-- where the href of course
matches the path and name of your stylesheet -->
Start with the 'normal' links, the ones you want to use in the body of
your text. Maybe even don't do anything at all with them, so people will
see the links as are (I know; I don't obey this 'rule' myself). Mind the
order in which links are processed, so:
a {style here}
a.visited {style here}
a.hover {style here}
a.active {style here}
In the body of the text you don't have to do anything to make the links
look as you just specified in your stylesheet.
If you're satisfied about the way your links look in the body of the
text, then create new styles for your menu by (for examle) creating a
class .menu:
.menu a {style here}
.menu a.visited {style here} etcetera
Now, in your mark-up make sure you create an element for your menu that
has the class=menu, like:
<div class="menu">menu here</div>
All links inside that element will be styled according to the styles you
gave to .menu a etc.
The hover is a bit tricky. On text-menus it works well. The trick is to
give the .menu a (and the others) a style like this (block and 100% widht!):
.menu a
{ display:block;
width:100%;
backgroundcolor:blue; } /*this blue is just an example*/
.menu a:hover
{ display:block;
width:100%;
backgroundcolor:yellow; } /*again, just an example*/
and any other style you want to put in there.
Now difine yourself a 'box' in which you will put those menu-links:
.menu-container
{ position:absolute;
top:[...px];
left:[...px];
background:white;
width:[...px]; }
Mind you, with these settings you can position your menu exactly on
screen where you want it to bee, but the size is not 'liquid' (see
Stephen Poley's site for information on this:
<http://www.xs4all.nl/~sbpoley/webmatters/> )
You're free to go through my stylesheet:
<http://home.wanadoo.nl/b.de.zoete/stylesheets/styles.css>
and the relevant pages to see the effect work:
<http://home.wanadoo.nl/b.de.zoete/index.html>
Links in body of text and in menu are different. Menu has a hover-effect.
When I started building my site (about three months ago) I downloaded
the CSS2 spec's from W3C. They were a bit tough to go through, but were
a great help in the end:
<http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip>
Hope this helps, good luck
--
Barbara
http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*
http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?
