Forum Moderators: not2easy

Message Too Old, No Replies

change link color in div

         

kurazi

6:51 am on Dec 18, 2007 (gmt 0)

10+ Year Member



hey guys,

im new to css and im trying to figure out how to change the font, colours of links etc in a div that is on top of other divs. the div in question is #info

i would like where it says "LINK" on the website to have different font. i tried a bunch of things, but its just not working.

body,td,th {
color: #333333;

style1 color: #000000;
background-image: url(pictures/grass.jpg);
}

#wrapper {
width: 920px;
margin-left: auto;
margin-right: auto;
height: 740px;
background-color: #FFFFFF;

}

#Layer1 {
position:absolute;
left:47px;
top:151px;
width:148px;
height:163px;
z-index:1;
}
#content {
margin: 10px 10px 0px 10px;
width: 900px;
position: absolute;
background-color: transparent;
height: 162px;

}

#blue {
width: 227px;
position: absolute;
background: #000099 url(shadow.jpg) right no-repeat;
height: 551px;
z-index: 3;
margin: 152px 0px 0px 22px;
left: 2px;
top: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform:uppercase;
}

#blue a:link{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:visited{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;

}

#blue a:hover{
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:active{ /*currently selected tab*/
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

#modernbricksmenu{
padding: 0;
width: 900px;
position: absolute;
margin-top: 220px;
voice-family: "\"}\"";
voice-family: inherit;
left: -1px;
top: -12px;
height: 525px;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 270px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #000099; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #FFF600; /*Brown color theme*/
border-color: #fff600; /*Brown color theme*/
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 900px;
height: 486px;
line-height: 5px;
background: #fff600;
z-index: 2;

}
#info{
clear: both;
width: 598px;
height: 431px;
margin: 30px 43px 30px 260px;
background-color: #FFFFFF;
position: absolute;
overflow: auto;
left: 17px;
top: 28px;
z-index: 1;
font-family:Arial, Helvetica, sans-serif
}

[edited by: engine at 9:09 am (utc) on Dec. 18, 2007]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

penders

10:38 am on Dec 18, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



body,td,th { 
color: #333333;
style1 color: #000000;
background-image: url(pictures/grass.jpg);
}

Apart from the above, your CSS looks OK. But whether your link behaves as you expect will depend on your HTML markup.

...the div in question is #info

Although you are not specifically styling links that are within an #info container - this may be your problem? Only links that are within #blue or #modernbricksmenu containers appear to be styled by your CSS. Is #info within one of these?