Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple anchor parameters 2

Status
Not open for further replies.
EdwardMartinIII

EdwardMartinIII

Technical User
Sep 17, 2002
1,655
US
Hi!

I swear I used to know how to do this...

I have three DIVs and in each one, I want the links to perfom a little differently. (mostly just text color mods)

This is what's in the CSS:
Code: 
.HeadMenu              {
                         color:#faf0e6;
                       }

.Sidebar_Right         {
                         margin-top: 30px;
                         padding-left:10px;
                         float: right;
                         border: ridge;
                         width: 250px;
                         color:#faf0e6;
                       }

.MainText              {
                         margin-top: 30px;
                         padding:5px;
                         color:#663300;
                         background: #faf0e6;
                         float: right;
                         border: ridge;
                       }

#HeadMenu a:link {color:#faf0e6; background-color: #663300; text-decoration: none; font-size: 14pt;}
#HeadMenu a:active {color:#faf0e6; background-color: #663300; text-decoration: none; font-size: 14pt;}
#HeadMenu a:visited {color:#faf0e6; background-color: #663300; text-decoration: none; font-size: 14pt;}
#HeadMenu a:hover {color:#3478ff; background-color: #faf0e6; text-decoration: none; font-size: 14pt;}

#Sidebar_Right a:link {color:#ff00ff;}
#Sidebar_Right a:active {color:#ff00ff;}
#Sidebar_Right a:visited {color:#ff00ff;}
#Sidebar_Right a:hover {color:#ff00ff;}

#MainText a:link {color:#ffff00;}
#MainText a:active {color:#ffff00;}
#MainText a:visited {color:#ffff00;}
#MainText a:hover {color:#ffff00;}

Three classes and, supposedly, three different ways of handling anchors -- depending on which DIV contains them.

Trouble is, only the HeadMenu anchor calls work.

The anchors in the other two DIVs just go default (underlined blue), instead of what I'm trying to tell them.

Am I doing this right?

Thanks in advance!

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Sort by date Sort by votes
If I take away the "#MainText" string before the anchor tags, then I can get two different anchor behaviors.

So basically, I do this:

Code: 
#HeadMenu a:link {color:#faf0e6; background-color: #663300; text-decoration: none; font-size: 14pt;}
#HeadMenu a:active {color:#faf0e6; background-color: #663300; text-decoration: none; font-size: 14pt;}
#HeadMenu a:visited {color:#faf0e6; background-color: #663300; text-decoration: none; font-size: 14pt;}
#HeadMenu a:hover {color:#3478ff; background-color: #faf0e6; text-decoration: none; font-size: 14pt;}

a:link {color:red;}
a:active {color:red;}
a:visited {color:red;}
a:hover {color:red;}

When I do this, my HeadMenu anchors behave properly, and all other anchors on the page go red.

But to change the attributes of the Sidebar_Right, i tried adding this:

Code: 
#Sidebar_Right a:link {color:green;}
#Sidebar_Right a:active {color:green;}
#Sidebar_Right a:visited {color:green;}
#Sidebar_Right a:hover {color:green;}

But no love -- the anchors in that DIV stayed red.

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
I copied your code as you posted it, and ran it as is, and I get 3 differently styled links.

Brown background with white text, no background and Pink text, and finally no background and yellow text.

So perhaps its something in your actual html thats messing things up. Can we see your DIV definitions please.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Wo -- really?

Yeah, here's the HTML. Sorry it's kinda big.:

Code: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
  <meta name="keywords" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>About us--Coffee Social</title>
  <link rel="stylesheet" href="Style_CoffeeSocial.css" type="text/css" />
</head>
<body>
  <div id="HeadMenu"><p class="CenteredContent"><img src="Logo_CS.jpg" height="70" width="400" alt="logo" /><br /><a href="index.html">home</a> | <a href="">about us</a> | <a href="">organic and local</a> | <a href="">menu</a> | <a href="">hours and location</a> | <a href="">we deliver!</a> | <a href="">blog</a> | <a href="">spiffy keen cool</a> | <a href="">bike bus walk</a> | <a href="">contact</a></p></div>

  <div class="Sidebar_Right">
    <div class="SmallHeadline_Sidebar">Opening Soon!</div>
    <p><a href="[URL unfurl="true"]http://www.google.com">Test[/URL] link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eu nulla eget eros feugiat imperdiet. Vivamus in dolor non dui feugiat elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend ligula ut lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam viverra massa in nisi. Cras elementum massa. Sed magna odio, sollicitudin eu, adipiscing in, euismod at, ipsum. Donec orci. Donec sapien metus, varius sodales, suscipit sed, suscipit malesuada, nunc. Sed in sem. Fusce molestie, tellus a bibendum iaculis, metus erat sodales massa, id ultrices augue arcu egestas turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pulvinar pede id tortor.</p>
  </div>

  <div class="MainText">
    <div class="SmallHeadline_Main">It's not just the what, it's the how and the why</div>
    <p><a href="[URL unfurl="true"]http://www.google.com">Test[/URL] link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eu nulla eget eros feugiat imperdiet. Vivamus in dolor non dui feugiat elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend ligula ut lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam viverra massa in nisi. Cras elementum massa. Sed magna odio, sollicitudin eu, adipiscing in, euismod at, ipsum. Donec orci. Donec sapien metus, varius sodales, suscipit sed, suscipit malesuada, nunc. Sed in sem. Fusce molestie, tellus a bibendum iaculis, metus erat sodales massa, id ultrices augue arcu egestas turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pulvinar pede id tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eu nulla eget eros feugiat imperdiet. Vivamus in dolor non dui feugiat elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend ligula ut lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam viverra massa in nisi. Cras elementum massa. Sed magna odio, sollicitudin eu, adipiscing in, euismod at, ipsum. Donec orci. Donec sapien metus, varius sodales, suscipit sed, suscipit malesuada, nunc. Sed in sem. Fusce molestie, tellus a bibendum iaculis, metus erat sodales massa, id ultrices augue arcu egestas turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pulvinar pede id tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eu nulla eget eros feugiat imperdiet. Vivamus in dolor non dui feugiat elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eleifend ligula ut lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam viverra massa in nisi. Cras elementum massa. Sed magna odio, sollicitudin eu, adipiscing in, euismod at, ipsum. Donec orci. Donec sapien metus, varius sodales, suscipit sed, suscipit malesuada, nunc. Sed in sem. Fusce molestie, tellus a bibendum iaculis, metus erat sodales massa, id ultrices augue arcu egestas turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pulvinar pede id tortor.</p>
  </div>

  <div class="FootStuff">
    <p class="CenteredContent">Address information</p>
  </div>

</body>
</html>

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
The menu links appear pink and brown like they're supposed to, but the other two DIVs have links that appear the same -- in this case, red.

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
You used ID definitions in your css (#), but specified only CLASSES in your html.

Make sure that your CSS definitions match what you are using.
 
Upvote 0 Downvote
Should have noticed it before, You link definitions are using id's
[red]#[/red]MainContent a.link

but there's nothing using that ID, your DIV's are using Classes.

So your links CSS should be

[red].[/red]MainContent a.link


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Yes, I've figured I had a mismatch.

So, what needs to change in the CSS to make each DIV's links unique?

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
So your links CSS should be .MainContent a.link"

Ka-blam!

Perfect!

Thank you!

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
You seem to have a touch of div/class-itis. Stuff like this:
Code: 
  <div class="Sidebar_Right">
    <div class="SmallHeadline_Sidebar">Opening Soon!</div>
should really be like this:
Code: 
  <div class="Sidebar_Right">
    <h2>Opening Soon!</h2>
(You might choose a different level of heading element than h2, depending on how many levels of headline you want in your sidebar).

Your class naming is a bit wordy too. You're doing this:
Code: 
   <div class="foo">
      <div class="foo_bar">
i.e. creating a particular class for bars that appear in foos. It's much clearer to do this:
Code: 
   <div class="foo">
      <div class="bar">
and then code your CSS like this:
Code: 
.foo .bar { /* styles for bars when they're in foos */ }

Finally, it's generally a bad idea to name classes after the way they're presented. Stuff like this:
Code: 
  <div class="FootStuff">
    <p class="CenteredContent">Address information</p>
  </div>
What happens if you change your mind about the way the footer's presented and want it left-aligned? You either have to change the markup for all the pages, or you have to style "CenteredContent" not to do what it says on the tin.

It seems like a short-cut to create generic classes that can be used just like <center> and all the other old presentational tags. But if you do so you're missing the point of CSS. The idea is to use HTML purely to mark up what each element is, then use CSS to decide how they should be displayed. Sure, there are exceptions and grey areas, but any time you include presentational information in a class name you should be thinking "am I doing this wrong?"

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I'm pretty happy with wordy descriptors, and I've never had a paying client complain (although I have had people-after-me write and thank me for having descriptive classes and code). The CSS is easier to read that way, and after six weeks, even though I wrote it, I'll be a stranger to it.

"What happens if you change your mind about the way the footer's presented and want it left-aligned?"

Interns laboriously change punchcards by hand, using X-Acto knives and Elmer's Glue. They hand-carry the changes out to their ponies and ride across town to the server, where a tiny blue-haired man feeds them one at a time to The Great Machine.

Seriously, though, I grep it out of there. CenteredContent is used in a variety of places -- not just in the footer. And some footer information (not in this example) is not centered. So, some content is supposed to be centered, and that content can be anywhere. When that happens, it gets tagged CenteredContent. I think that comfortably fits within the "gray area" you mention.

Footer DIV contains presentation data. Footer DIV information is not shown above.

I suppose it's possible to use h2 and then let each div container define how IT wants to present h2. I'll explore that in the next project, thanks. It doesn't sound as descriptive as, say, "SmallHeadline_Sidebar".

[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
660
spamjim
spamjim
ralphonzo
  • Locked
  • Question
Named anchor anomoly
Replies
3
Views
50
feherke
feherke
PCHomepage
  • Locked
  • Question
Align Multiple Images Right
Replies
1
Views
61
PCHomepage
PCHomepage
nwo4life
  • Locked
  • Question
Paypal button for multiple prices by Quantity and color
Replies
1
Views
59
ChrisHirst
ChrisHirst
PCHomepage
  • Locked
  • Question
CSS Forcing Multiple Selects to One Line
Replies
3
Views
69
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top