...

View Full Version : Different Link Styles on Same Page?



johndove
07-08-2005, 05:29 PM
This is my first in-depth experience with .css so I know I'm making some mistakes (probably many) but I’m encountering some problems as I go along that I don’t quite know how to solve (working in Dreamweaver, BTW). My latest dilemma is this:

I’ve created a style sheet and set the link attributes with the desired navbar behaviors in mind (white rollover backgrounds and whatnot which are working fine). However, there will be other links that I simply want the standard, underlined links without the fancier navbar attributes. I was not aware that in creating link styles, it’s “one size fits all,” or at least I haven’t figured out how to get different link behaviors on the same page. — According to Dreamweaver’s Help, it says to remove a style from a selection, simply click the ‘No CSS Style’ option from the palette. That doesn’t work. (?) I also thought to create a new style with different link attributes, but as far as I can tell, you can only apply ONE links style to a page; not link Style A AND link Style B.

Please look at the following URL, see the navbar link behaviors, but then mouse over the ‘FreeFind’ link on the banner. You’ll see that I obviously don’t want the FreeFind link to have the same behavior as the navbar links, I just want a plain blue text link.

http://www.healthdataservices.com/2006HDShome.htm

Can anyone enlighten with a simple solution or workaround? Can I apply the (navbar) white rollover/rollout backgrounds to the table cells, independent of the link itself? If so, could you please provide me with the precise coding for this, thanks. — ALSO, I have been informed that I should create links as lists and that my current code is an abuse of tables, but for the moment the css/list code is way over my head and I’d just like to get this to work within its present context if that’s possible — thanks.

.css code is contained below if needed.

Thank you!

JD

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000066;
width: 182px;
border-top: none;
border-right: none;
border-bottom: 1px solid #FFFFFF;
border-left: none;
text-decoration: none;
line-height: 20px;
float: left;
text-indent: 5px;
display: block;
}

a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000066;
width: 182px;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
line-height: 20px;
text-indent: 5px;
float: left;
display: block;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #006699;
background-color: #FFFFFF;
width: 182px;
margin-left: 0px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
text-decoration: none;
line-height: 20px;
float: left;
display: block;
}

.navheaders {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
width: 182px;
line-height: 20px;
background-color: #004284;
margin: 0px;
padding: 0px 0px 0px 5px;
}

.BkgrndImage {
background-image: url(images/2006-NavbarArt_03.jpg);
background-repeat: no-repeat;
}

.MLbkgrndImage {
background-image: url(images/2006MLnavbarArt_04.jpg);
background-repeat: no-repeat;
}

skhan1021
07-08-2005, 06:01 PM
You need to define a div id(#) or div class(.) for links you want set with differ attributes. In other words, you have defined a:link {format here} for everything that is a link. By using divisions you can group your attributes for example by using #secondary a:link {format here} (this would be identified as a div id).

Now when you want to apply this style rule simply place the <div id="secondary"></div> around the links you want to a different style rule to. Hope this helps.

sk

johndove
07-08-2005, 06:44 PM
SK,

Thanks for your reply... I wonder if you could break it down just a little further for me as I'm still not quite with you on how exactly to create this new style — when you say to define a div class, how exactly is that set up in the .css dialog? Is that 'Use CSS Selector' or 'Custom Style'? - and do I define it in my existing style sheet or a new one and then attach? Then, is the correct code placement as follows:

<div class="SecondaryLinks"><A HREF="http://www.whatever>FreeFind</A></div> ...like so?

Could you indulge me with a simple step-by-step on this?

Thanks, much appreciated!

JD

skhan1021
07-08-2005, 09:52 PM
No problem. If you're using Dreamweaver to format your stylesheet, I don't know step by step because I hardly use it. See if this helps you....

Open your .css document and define as below....

.secondarylinks a:link {format here}
(same thing for a:hover or any other link properties you want to define)



...then in your actual html document group as such....

<div class="secondarylinks">
<a href="link.com">Link</a>
</div>

Hopefully this made more sense to you. If not, let me know and I will do my best to clarify.

johndove
07-11-2005, 06:21 PM
SK,

ALMOST there, but there’s still one problem. – what I wasn’t getting before was the way the naming convention had to be used along with the ‘Use .CSS Selector’ option: .SecondaryLinks a:link. Very helpful, thanks! I created a new style to include link, visited and hover, and they are working SEMI-correctly, but for some reason they are still inheriting some of the attributes of my original links style, MAINLY, the white background box (on hover) even though I have set no such attributes for the secondary links. I even tried to set the secondary style attributes in opposition to the primary attributes but had only marginal success (could not get rid of the white rollover background). Please take a look at the URL below and the simple source code of the secondary style.

http://www.healthdataservices.com/2006HDShomeSecondaryLinks.htm

Do you know why these still aren’t working correctly? – Thanks so much for all your help.

John

_Aerospace_Eng_
07-12-2005, 08:50 AM
your default link styles take presedence. You need to make the links that use the white background secondary, and make default links the normal link psuedo classes.

johndove
07-12-2005, 01:48 PM
Can I do that by simply swaping out the naming conventions or do I have to go through the whole exercise?

Thanks for the insight!

JD

johndove
07-12-2005, 03:53 PM
AE,

Thanks for the great tip., everything works like a charm now...I simply swapped the naming conventions in the .css file, then applied the secondary style with the div tags:

<td><div class="SecondaryLinks"><a href="http://www.medledger.com">MedLedger</a></div></td>

Take a look:

http://www.healthdataservices.com/2006HDShomeSecondaryLinks.htm

Thanks guys for all your help!

JD

mrruben5
07-12-2005, 11:36 PM
If you want to know anything further about how to "cascade" (because that's what you are doing), read Selectutorial (http://css.maxdesign.com.au/selectutorial/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum