Different CSS Links On The Same Page

@tomyknokerSep 22.2006

Hi All,

I have a sub-menu using links which I’m using this code for

[CODE]a:link { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: underline; }[/CODE]

BUT my problem is I have other links on the page which I don’t want to have these values I want them to have there own complete style… How can I do this?

to post a comment

CSS

@mooiSep 22.2006 — #tomyknoker,

create a style class:

[code=html]
 /* for the submenu */
 a.submenu:link {
 text-decoration: none;
 color: #FFFFFF;
 }
 a.submenu:hover {
 text-decoration: underline;
 }
 
 /* for other pages */
 a.otherpage:link {
 text-decoration: none;
 color: #FF0000;
 }
 a.otherpage:hover {
 text-decoration: underline;
 }
 [/code]

and in the HTML you would have:

[code=html]
 a class="submenu" href="" title="">submenu item</a>
 
 a class="otherpage" href="" title="">content</a>
 [/code]

cheers

@DREWSep 22.2006 — #G'day tomyknoker, here's a quick example of how to seperate your links.

I have given the menu an ID of submenu, everything within that id will be different to what is set in the default a:link etc

[B]XHTML[/B]

<div id="submenu">

<a href="">1</a>

<a href="">2</a>

<a href="">3</a>

<a href="">4</a>

</div>

[B]CSS2[/B]

a:link {

text-decoration: underline;

color: #ff0000;

}

a:hover {

text-decoration: none;

}

div#submenu{

display:block;

width:250px;

height:100px;

background: #00FF00;

}

div#submenu a{

text-decoration: none;

color: #999;

}

div#submenu a:hover{

text-decoration: underline;

}

@tomyknokerauthorOct 06.2006 — #tomyknoker,

create a style class:

[code=html]
 /* for the submenu */
 a.submenu:link {
 text-decoration: none;
 color: #FFFFFF;
 }
 a.submenu:hover {
 text-decoration: underline;
 }
 
 /* for other pages */
 a.otherpage:link {
 text-decoration: none;
 color: #FF0000;
 }
 a.otherpage:hover {
 text-decoration: underline;
 }
 [/code]

and in the HTML you would have:

[code=html]
 a class="submenu" href="" title="">submenu item</a>
 
 a class="otherpage" href="" title="">content</a>
 [/code]

cheers[/QUOTE]Hi That worked perfectly, do yopu know why dreamweaver won't let me actually select the <a> tag and asign a class to it? I have to manually add it in the code... Any ideas?

Different CSS Links On The Same Page

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Different CSS Links On The Same Page

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴