How to use 2 sets of CSS link styles in the same page?

  • abby_eagle
  • Newbie
  • Newbie
  • abby_eagle
  • Posts: 5
  • Loc: Gold Coast Australia

Post 3+ Months Ago

Hi, I have used the following CSS script to create a hover over text link style:

--------------------------
a:link {
color: purple;
text-decoration: none;
}
a:visited {
color: orange;
text-decoration: none;
}
a:hover {
color: #FF0099;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: underline;
}
-----------------------------

Now how do i create a style just for a section of a page?

For example i use an include file (../include/banner.htm) to display a banner at the top of the page on which there are some text links.

How do i specifically link to the banner and not the rest of the page?

I imagine it is something like: #banner a:link { ... }

Where do i define the link to 'banner'?

Any suggestions will be greatfully received.

Abby http://www.abbyeagle.com
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

You can either "wrap" the banner in a div, like so:
HTML Code: [ Select ]
<div id="banner">
banner crap
</div>
 
  1. <div id="banner">
  2. banner crap
  3. </div>
  4.  

and your css:
CSS Code: [ Select ]
#banner a:hover {
}
 
  1. #banner a:hover {
  2. }
  3.  

or you can give the links in the banner their own class:
HTML Code: [ Select ]
<a href="#" class="banner">linky</a>
 
  1. <a href="#" class="banner">linky</a>
  2.  

CSS:
CSS Code: [ Select ]
.banner a:hover {
}
 
  1. .banner a:hover {
  2. }
  3.  
  • Cmp-Network
  • Beginner
  • Beginner
  • User avatar
  • Posts: 36
  • Loc: chicago

Post 3+ Months Ago

Something like this for the page (header)

Code: [ Select ]
<div class="header">
    <span class="logo"></span>
</div>
  1. <div class="header">
  2.     <span class="logo"></span>
  3. </div>



and this in your CSS File

Code: [ Select ]
.logo {
background: transparent url('http://www.yourdomainname.com/yourbanner.png) no-repeat;
height: 114px;
width: 990px;
margin-top: 0px;
float: left;
}
  1. .logo {
  2. background: transparent url('http://www.yourdomainname.com/yourbanner.png) no-repeat;
  3. height: 114px;
  4. width: 990px;
  5. margin-top: 0px;
  6. float: left;
  7. }

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.