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

**Barbara de Zoete** · Jul 20 '05, 08:24 PM

Re: Looking for a solution to CSS, presenting links in two differentways.. .

Isabelle schreef:
[color=blue]
> 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,[/color]

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" > 

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">me nu 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:absolu te;
top:[...px];
left:[...px];
background:whit e;
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*?

**Lauri Raittila** · Jul 20 '05, 08:24 PM

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

In article <9qGdb.180$Tu2. 63759@news20.be llglobal.com>, Isabelle wrote:[color=blue]
> 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.
>[/color]

Read

Selectors

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.
[color=blue]
> two style sheets?[/color]

No, two style rules.
[color=blue]
> I'm lost, please help! : =)[/color]

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

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.

**Jonathan Snook** · Jul 20 '05, 08:24 PM

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

"Isabelle" <isabelleREMOVE CAPS@REMOVEZETH ECAPSis.visisou l.com.invalid> wrote
in message news:9qGdb.180$ Tu2.63759@news2 0.bellglobal.co m...[color=blue]
> 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.[/color]

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:hove r {...}
HTML <a href="hello.htm l" class="external "></a>

or use a descendant selector link so:
CSS: #nav a:hover {...}
HTML <div id="nav"><a href="hello.htm l"></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

Snook.ca: Life & Times of a Web Developer.

https://www.snook.ca

Snook.ca - Life and Times of a Web Developer

**Isabelle** · Jul 20 '05, 08:28 PM

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

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

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

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

Comment

Comment

Comment

Comment