Topic: Simple CSS Problem (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=11114" title="Pages that link to Topic: Simple CSS Problem (Page 1 of 1)" rel="nofollow" >Topic: Simple CSS Problem <span class="small">(Page 1 of 1)</span>\

 
Radical Rob
Bipolar (III) Inmate

From: Kapolei, Hawaii USA
Insane since: Jun 2001

IP logged posted posted 12-05-2003 19:42 Edit Quote

Hey geniuses... quick question:
I haven't been working with my sites to much lately and I can't seem to figure out the answer to this problem.
I want to assign my menu a certain link characteristic (size, color, align, etc) and I'm using a:link and it's associated
others to do so. How would I set up specific link styles for different sections of my site?

For example, My menu has a dark blue fade so I want the main menu navigation to be white so it's easy to see.
In my content, the general area is white so I want the links there to be dk. blue,
And in another section of content the bg is light grey so I like a light blue link style there.

I'm sure this is an easy fix but I can't figure it out.

Suggestions? TIA!

ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

IP logged posted posted 12-05-2003 20:13 Edit Quote

here's an example style using a menu div with an unordered list of links

code:
a /* default link style */
{
color:#1C5E96;
text-decoration:none;
}

a:hover /* default link hover style */
{
color:#2586d7;
text-decoration:underline;
}

#menu li a /* link in a li that is in a div with the id menu */
{
color: #ffffff;
text-decoration: none;
}

#menu li a:hover /* link:hover in a li that is in a div with the id menu*/
{
color: #F7AF69;
text-decoration: none;
}

and the div

code:
<div id="menu">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link2</a></li>
</ul>
</div>

Take a look at css2 selectors

[This message has been edited by ninmonkey (edited 12-05-2003).]

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

IP logged posted posted 12-08-2003 19:55 Edit Quote

You could also assign classes to the links and define the appropriate rules for each class.

To give different styles to links in different areas of your page, you'll need to use the class attribute in the HTML and the appropriate selectors in the CSS.
For example, consider the following HTML:

code:
<!-- links in menu -->
<a class=menulink href=...>....</a>
<a class=menulink href=...>....</a>

<!-- links in content area -->
<a class=contentlink href=...>...</a>
<a class=contentlink href=...>...</a>

<!-- links in other area -->
<a class=otherlink href=...>...</a>
<a class=otherlink href=...>...</a>



You could style these links as follows in your stylesheet:

code:
a#menulink:link {
color: #ffffff;
}

a#contentlink:link {
color: #004400;
}

a#otherlink:link {
color: #00cc00;
}

/* add definitions for a#menulink:hover, etc. */





Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu