homepage Welcome to WebmasterWorld Guest from 184.73.87.85
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
a:hover - how many can I have?
Am I limited to having only one a:hover per page?
DiAMOndDavE




msg:966887
 4:01 am on Aug 15, 2002 (gmt 0)

Folks,

Is there a limit to how many times you can ascribe functionality to a:hover on an HTML page? I want to have 2 types of links with 2 different rollover characteristics on a page. Say I want one to be yellow when I rollover one and red when I rollover another? Is this possible. Dreamweaver (version 3) tells me I have already chosen an attribute for the a:hover and bars me. Any ideas/workarounds??

Regards
DiAMOndDavE

 

msr986




msg:966888
 4:13 am on Aug 15, 2002 (gmt 0)

You can have as many as you need.

Just define different classes for your links and define the hover like this:

a.class1:hover{color:#000}
a.class2:hover{color:#fff}

The links should look like:

<a href="#" class="class1">
<a href="#" class="class2">

Welcome to WebmasterWorld!

rewboss




msg:966889
 8:30 am on Aug 15, 2002 (gmt 0)

The possibilities are endless, actually. Class is the obvious solution (it's not a "workaround", this is how CSS is supposed to operate, despite what DW might tell you). Another elegant solution is the use of contextual selectors.

A fairly common situation is where you have most text links behaving in one fashion, but the links in a navbar (which might be on a different background) doing something different. You can put all your navbar links in a <div> with an id "navbar", then your style sheet will look a little like this:

/* First the styles for the "normal" links */
a:link { .... }
a:visited { .... } /* etc etc etc */

/* Now the styles for the navbar links */
#navbar a:link { .... }
#navbar a:visited { .... } /* etc etc etc */

Note: no comma after #navbar.

#navbar a is interpreted as: "Any a element that is nested inside a div element with an id of 'navbar'."

This allows you to drop the class attribute from the <a> tag:

<div id="content">
<a href="next.html">This will be a normal text link</a>
</div>

<div id="navbar">
<a href="next.html">This will be a navbar link</a>
</div>

Nick_W




msg:966890
 8:56 am on Aug 15, 2002 (gmt 0)

Yes, I find rewboss's method much tidier and easier to understand when you go back to something weeks/months later...

Part of writing good css is the making it understandable and easy to edit aswell as what it actually does

Nick

gsx




msg:966891
 10:13 am on Aug 15, 2002 (gmt 0)

Isn't an 'Id' only supposed to be used once per document?

rewboss




msg:966892
 12:52 pm on Aug 15, 2002 (gmt 0)

Well, yes. The idea is that you have one div with all the navigation links in it:

<div id="navbar">
<a href="index.html">Home</a>
<a href="sales.html">Sales</a>
<a href="contact.html">Contact</a>
</div>

If you have more than one div with "navbar" style links, then you'll have to use classes.

Filipe




msg:966893
 10:07 pm on Aug 15, 2002 (gmt 0)

Mmhmm. Once per document, as was noted, but here's why:

In newer XHTML standards (A combination of XML and HTML), "ID" is used instead of "NAME" as the naming convention for tag elements. So, just as you wouldn't use duplicate names for form elements (I know there are exceptions to this), you wouldn't use duplicate ID's either.

As far as CSS is concerned, it's a way of creating a 1:1 relationship between certain style elements and a specific entity on a page. If you're planning to use it on more than one entity, you might as well just use classes because that's what they mean:

#id = Referring to a specific identity of an entity (like saying "Bob has brown hair")
.class = Referring to a certain class of entity (like saying "Brunettes have dark hair")

DiAMOndDavE




msg:966894
 12:09 am on Aug 16, 2002 (gmt 0)

Thanks msr986 and rewboss. I will go away and have a play. As you can see I am relatively new to CSS.
Best regards
DiAMOndDavE

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved