Different link styles for different divs

[suzierthanyou]

This might be really obvious, but I need to have different link styles for each of my different divs. I tried this for my topbar div, in the stylesheet:

#topbar a:link {text-decoration: none; color:#FFFFFF; font-size:9px; font-family: arial, helvetica, sans-serif; }

But to no avail. How can I dooo it?

TIA

Suze

[jcdevelopment]

How did it not work? Are you saying that the code you posted does not work?

[suzierthanyou]

Yeah, it hasn't done anything, within that div the links are all coming up as default!

[jcdevelopment]

can you give all properties and values for that div? Including fonts, colors, etc.. Also post the html pertaining to that div if you can. There is no reason why that shouldnt work.

[suzierthanyou]

Okay, here's my stylesheet:

@charset "UTF-8";
/* CSS Document */

<style type="text/css">

<!--

body {
margin-top: 0px;
background-image:url(../Graphics/BGS/stripeybg.png);
background-repeat:repeat
}

A:link {text-decoration: none; color:#FF0066}
A:visited {text-decoration: none; color:#FF0066}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: #000000;}
B {text-decoration:none; font-size:12px; font-weight:bold; font-style:italic; color:#000000; font-family: Georgia, Arial, Helvetica, sans-serif;
}




DIV.container
{
width: 797px;
height:auto;

}

DIV.topbar
{
width: 797px;
height: 46px;
background-image:url(../Graphics/topbar.gif);
background-repeat:no-repeat;
position:top;
}


DIV.leftbar
{
float: left;
width: 227px;
background-image: url(../Graphics/leftbar.png);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
position: bottom;

}

DIV.leftbarcontent
{
float: left;
width: 210px;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align:justify;

}

DIV.middlebar
{
float: left;
position:bottom;
width: 429px;
background-image:url(../Graphics/BGS/middlebarbg.png);
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:justify;

}

DIV.middlebarcontent
{
float: left;
position:bottom;
width: 409px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:justify;

}

DIV.rightbar
{
float: left;
position:bottom;
width: 141px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:justify;
background-color:#FFFFFF;

}

#topbar a:link {text-decoration: none; color:#FFFFFF; font-size:9px; font-family: arial, helvetica, sans-serif; }
#topbar a:visited {text-decoration: none; color:#FFFFFF; font-size:9px; font-family: arial, helvetica, sans-serif; }

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}


/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}

* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}

* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}


/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

-->
</style>


And then here's the bit of my index with that div:

<!-- THIS IS THE BEGINNING OF THE CONTAINER (SUZIE RYAN) -->
<div class="container">
<!-- WITHIN THE CONTAINER IS THE TOP NAVBAR -->
<div class="topbar">
<p>.<br>
<a href="portfolio.htm">ABOUT</a>&nbsp;
<a href="portfolio.htm">PORTFOLIO</a>&nbsp;
<a href="portfolio.htm">CONTACT</a>&nbsp;
</div>

[jcdevelopment]

I see your problem.

This here is a div ID


#topbar a:link


This is your HTML

<div class="topbar">

#topbar is an id not a class, so you want to change your html to this

<div id="topbar">

That should fix it. Let me know

[suzierthanyou]

AH! Yes, that worked - but unfortunately now my background has disappeared! (It was a black shape which was part of the layout). :s !!

[suzierthanyou]

And whats the different between an id and a class??

[jcdevelopment]

#topbar a:link {text-decoration: none; color:#FFFFFF; font-size:9px; font-family: arial, helvetica, sans-serif; }
#topbar a:visited {text-decoration: none; color:#FFFFFF; font-size:9px; font-family: arial, helvetica, sans-serif; }


There doesnt ssem to be a background set. try this

#topbar {background-color:#000;}

A class is a selector that can be used throught an html document more than once.

an ID is a selector only used once through the document.

[suzierthanyou]

My background image was set further up in the style, DIV.topbar - is this all rendered useless after adding the link styles? Is there a way I can group it together?

Thanks for your help by the way, it's really useful! :)

[suzierthanyou]

AH I've done it :) Sorry that was really obvious. I just changed it where the new stuff was. Thanks you're a lifesaver! x