By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,241 Members | 760 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,241 IT Pros & Developers. It's quick & easy.

Looking for a solution to CSS, presenting links in two different ways...

P: n/a
Hello all,

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,

Isabelle
http://www.is.visisoul.com
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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*?

Jul 20 '05 #2

P: n/a
In article <9q*****************@news20.bellglobal.com>, Isabelle wrote:
Hello all,

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.

Read
http://www.w3.org/TR/CSS2/selector.html
It will save you heaps of time later. Also find FAQ lists, this and many
more questions answered regularly.
two style sheets?
No, two style rules.
I'm lost, please help! : =)


Do you have your navigational links wrpaped on some elements? Give those
elements class="navigation", and use:
..navigation a:hover {}
You can also use class on A elements, if your navigational links are
scattered all around illogically:
a.navigation:hover {}

Of course, it may not be necessary to have any new class, but impossible
to say without URL.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #3

P: n/a
"Isabelle" <is****************@REMOVEZETHECAPSis.visisoul.com .invalid> wrote
in message news:9q*****************@news20.bellglobal.com...
Hello all,

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.


Create your default link effects that will appear in your content
a:link {...}
a:hover {...}

And then you have a couple ways of doing the link effects for your
navigation. You could create a class to go on your links:
CSS: a.external:hover {...}
HTML <a href="hello.html" class="external"></a>

or use a descendant selector link so:
CSS: #nav a:hover {...}
HTML <div id="nav"><a href="hello.html"></a></div>

the # is an id selector so it means that the style will apply while hovered
over a link contained within an element with the id equal to "nav".

Good luck,

Jonathan
www.snook.ca
Jul 20 '05 #4

P: n/a
Thank you for the feedback, I'm going to go through everyone's advice and
then report back here next week. :)

Isabelle
http://www.is.visisoul.com
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.