...

View Full Version : CSS links in multi colours



cambo
10-26-2009, 01:00 PM
Hi all,

Im trying to do a site with different coloured links and the following site has a top menu that works fine and all the hyperlinks also working fine.
However the bottom menu should be white text but i cant get it to change from the default blue, although my white hover with underline works fine.
When i do manage to change it i also change the hyperlinks in the document.

http://www.kimerawebsolutions.co.uk/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>KiMERA WEB SOLUTIONS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
.gallery {
float:right;
width:337px;
height:299px;
margin:0 25px 0 0;
}
#slider {
margin:0;
padding:0;
list-style:none;
}
#slider ul, #slider li {
margin:0;
padding:0;
height:299px;
list-style:none;
}
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li {
width:337px;
height:299px;
overflow:hidden;
}
p#controls {
margin:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
width:30px;
height:299px;
position:absolute;
left:0 !important;
left:-327px;
top:-299px;
}
#nextBtn {
left:307px !important;
left:-20px;
}
#prevBtn a {
display:block;
width:30px;
height:278px;
background:url(images/spacer.gif) no-repeat 0 0;
}
#nextBtn a {
display:block;
width:30px;
height:278px;
background:url(images/spacer.gif) no-repeat 0 0;
}
</style>
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
color: #FFF;
line-height: 1.4em;
}
h2 {
font-size: 18px;
color: #1fa8ff;
}
-->
</style></head>
<body onload="MM_preloadImages('images/qm2.gif')">
<div class="main">
<div class="header">
<div class="block_header">
<div class="logo"><a href="index.html"><img src="images/Kiimera-WEBa.png" alt="logo" width="589" height="186" border="0" /></a></div>
<div class="top_menu"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_favorites"></a>
<a class="addthis_button_print"></a>
<span class="addthis_separator">|</span>
<a href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4ae066a473957459" class="addthis_button_expanded">More</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4ae066a473957459"></script>
<!-- AddThis Button END -->
</div>
<div class="search">
<h2><br />
TEL : 0845 193 4980<br />
<a href="mailto:info@kimerawebsolutions.co.uk">Email : info@kimerawebsolutions.co.uk</a> <br />
<br />
<img src="images/valid-xhtml10-blue.png" alt="" width="88" height="31" /> <img src="images/vcss-blue.gif" alt="" width="88" height="31" /><br />
</h2>
</div>
<div class="clr"></div>
<div class="clr"></div>
<div class="menu">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="contact.html">Quote Me</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
<div class="main_bg">
<div class="slider">
<div class="header_text">
<div class="div">
<div class="left1">
<h2>Online Solutions<br />
<span>to help grow your business!</span></h2>
<p><strong>We are a Web, Graphic and Print Design Studio.</strong></p>
<p><strong>We utilise the power of the internet with fully featured websites and co-ordinated marketing tools for companies of all sizes.</strong></p>
<ul class="buttons">
<li><a href="quoteme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('quoteme','','images/qm2.gif',1)"><img src="images/qm1.gif" name="quoteme" width="116" height="32" border="0" id="quoteme" /></a></li>
</ul>
</div>
<div class="gallery">
<div id="slider">
<ul>
<li><img src="images/simple_img_1.jpg" alt="screen 1" width="296" height="317" border="0" /></li>
<li><img src="images/simple_img_2.jpg" alt="screen 1" width="296" height="317" border="0" /></li>
<li><img src="images/simple_img_3.jpg" alt="screen 1" width="296" height="317" border="0" /></li>
<li><img src="images/simple_img_4.jpg" alt="screen 1" width="296" height="317" border="0" /></li>
<li><img src="images/simple_img_5.jpg" alt="screen 1" width="296" height="317" border="0" /></li>
<li><img src="images/simple_img_6.jpg" alt="screen 1" width="296" height="317" border="0" /></li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="body">
<div class="body_resize">
<div class="left">
<h3><span>Welcome to</span> our company</h3>
<p><strong>If your company requires an online solution with all the features you expect within a quick timescale and without blowing the budget then you have come to the right place. </strong></p>
<p>We can advise throughout the course of your project on all the options available and wont sign it off untill you are 100% happy with what we have produced.<br />
<br />
Whether you require a 1 off design service or an ongoing fully managed system we can fulfill your requirements.<br />
</p>
</div>
<div class="right">
<h3><span>Featured</span> Services</h3>
<ul>
<li>Web Design and Developement</li>
<li>Graphic Design for Digital Output</li>
<li>Graphic Design for Printed Output</li>
</ul>
<p><a href="services.html"><img src="images/read_more.gif" alt="picture" width="90" height="20" border="0" /></a></p>
</div>
<div class="clr"></div>
<div class="bg"></div>
<img src="images/img_1.jpg" alt="picture" width="142" height="134" class="floated" />
<h2>Technical support or query !</h2>
<p class="greey">When you have a question you need a quick answer.</p>
<p><strong>We won't leave you in the dark when it comes to cutting through the jargon and explaining what is required to achieve your goals.</strong><br />
<br />
<strong>Our technical support team operate 24 hours a day 7 days a week. &nbsp;&nbsp;<a href="support.html" class="active">CLICK HERE TO CONTACT TECHNICAL SUPPORT</a></strong><a href="#" class="active"></a></p>
<div class="bg"></div>
<div class="right2">
<h2><span>Complimentary Services</span></h2>
<p class="body"><em>We can also arrange for things like Credit Card Payments and Courier Services to be integrated into your project through companies such as <br />
<a href="http://www.paypal.co.uk/uk">Paypal</a> &nbsp;and&nbsp; <a href="http://www.ups.com/">UPS</a></em><a href="#"></a></p>
</div>
<div class="right2">
<h2><span>Kimera Business Solutions</span></h2>
<p class="body"><em>We provide a wide range of services specialising in helping businesses to achieve their full potential by increasing sales and marketing effectiveness.<br />
<a href="http://www.kimerabusinesssolutions.co.uk/index.html">www.kimerabusinesssolutions.co.uk</a></em><a href="#"></a></p>
<div class="search2"></div>
</div>
<div class="right2">
<h2><span>Kimera Communications</span></h2>
<p class="body"><em>We focus on the delivery of Contact Centre and Telecom's Cost Management Solutions to the SME and Corporate market.<br />
<a href="http://www.kimeracommunications.co.uk/">www.kimeracommunications.co.uk</a></em><a href="#"></a></p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footer_resize">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="quoteme.html">Quote Me</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<p>Copyright <a href="http://www.kimerawebsolutions.co.uk/">KiMERA WEB SOLUTIONS</a></p>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</body>
</html>


@charset "utf-8";
body {
margin:0;
padding:0;
width:100%;
background:#ffffff;
line-height: 1.4em;
}
html { padding:0; margin:0;}

/* main */
.main {width:100%; padding:0; margin:0 auto; }

/********** header **********/
.header { }

.block_header {margin:0 auto; width:999px; height:239px; padding:0;}
/* logo */
.logo {
float:left;
padding:0;
margin:0;
width:650px;
}
/*top menu*/
.top_menu {
width:300px;
float:left;
font:normal 11px Arial, Helvetica, sans-serif;
color:#8c8c8c;
line-height:1.6em;
margin:0px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 17px;
}
.top_menu a { font:normal 11px Arial, Helvetica, sans-serif; color:#8c8c8c; text-decoration:none; padding:0 3px; margin:0;}
.top_menu a:hover {text-decoration:underline;}
/* search */
.search {
float:right;
width:330px;
padding:0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.search span { display:block; float:left;}
.search a {
display:block;
float:left;
line-height:normal;
color:#1fa8ff;
text-decoration:none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.search a:hover { text-decoration:underline;}
.search form { display:block; float:left; padding:5px 10px 0 10px;}
.search form .keywords { background:url(images/search_bg.gif) top no-repeat; float:left; border:0; height:19px; width:204px; padding:2px 15px; margin:5px 5px 10px 0; font:normal 12px Tahoma, Geneva, sans-serif; color:#000;}
.search form .button { float:left; margin:5px 0 0 0; padding:0;}
/* menu */
.menu { padding:0; margin:0; height:48px; background:url(images/menu_bg.gif) top repeat-x;}
.menu ul { padding:1px 0 0 0; margin:0 0 0 50px; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0; border:0; border-right:1px solid #FFF;}
.menu ul li a { float:left; padding:15px 25px; color:#fff; font:bold 13px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { text-decoration:underline; background: url(images/hover.gif) left repeat-x;}
.menu ul li a.active { text-decoration:none; background: url(images/hover.gif) left repeat-x;}
/*main_bg*/
.main_bg { width:100%; background:#28beff url(images/main_bg.gif) top repeat-x; margin:0; padding:0;}

/********** slider **********/
.slider { margin:0 auto; padding:1px 0; }
/* header_text */
.header_text { margin:0 auto; width:980px; padding:0;}
.header_text .div {width:970px; margin:0; padding:0;}
.header_text .div .left1 { float:left; width:500px; padding:0 0 0 30px; margin:0;}
.header_text h2 { border-bottom:1px solid #fff; font:normal 50px Arial, Helvetica, sans-serif; color:#fff; padding:5px 10px; margin:20px 0 0 20px; line-height:1.5em;}
.header_text h3 {font:normal 50px Arial, Helvetica, sans-serif; color:#fff; padding:5px 10px; margin:20px 0 0 20px; line-height:1.5em;}
.header_text h2 span { font:normal 32px Arial, Helvetica, sans-serif; color:#fff; padding:0; margin:0; line-height:1.5em;}
.header_text p { font:normal 11px Arial, Helvetica, sans-serif; color:#fff; padding:5px 10px; margin:0 0 0 20px; line-height:1.6em;}
.header_text ul.buttons { float:left; padding:20px 0 10px 25px; margin:0; list-style:none;}
.header_text ul.buttons li { float:left; padding:0 5px; margin:0;}

/********** block index **********/
.body {padding:0; margin:0;}
.body_resize { width:873px; margin:0 auto; padding:10px 60px; background:#fff; border:3px solid #71e0ff;}
.body h2 { font:normal 22px Arial, Helvetica, sans-serif; color:#4e4a38; padding:5px; margin:5px 0; border-bottom:1px solid #c9c9c9;}
.body h3 { font:normal 22px Arial, Helvetica, sans-serif; color:#3a3c3c; padding:5px; margin:0 0 5px 0;}
.body h3 span { color:#1fa8ff;}
.body p {
color:#6f6f6f;
padding:5px;
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1.4em;
}
.body p.greey { font: normal 15px Arial, Helvetica, sans-serif; color:#898989; line-height:1.8em; margin:0; padding:10px 5px;}
.body p.adrees { font: normal 12px Arial, Helvetica, sans-serif; color:#4c4c4c; line-height:1.8em;}
.body p span { color:#878787;}
.body a {
color:#1fa8ff;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.body img.floated { float:left; margin:5px 0px; padding:0;}
/*left*/
.left {
width:562px;
float:left;
padding:5px;
}
.left p.bigg { font: bold 17px Arial, Helvetica, sans-serif; color:#666666; padding:10px 0 0 30px; margin:0; text-transform:uppercase;}
.left p.biggg{ font: bold 21px Arial, Helvetica, sans-serif; color:#666666;}
.left img.leftt { float:left; margin:10px 20px 10px 10px; padding:0;}
/*right*/
.right { width:271px; float:right; margin:5px; padding:5px;}
.right2 { width:271px; float:left; margin:5px; padding:5px;}
.right2 img { float:left; margin:5px; padding:0;}
.right ul { list-style:none; margin:5px; padding:0;}
.right li { font: normal 11px Tahoma, Geneva, sans-serif; color:#737373; padding:5px 15px; background:url(images/small_ul_li.gif) left no-repeat; margin:0;}
.right ul.sub { list-style:none; margin:5px; padding:0;}
.right li.sub { padding:5px 20px; background:url(images/sub_ul_li.gif) left no-repeat; margin:0; border-bottom:1px solid #d7d7d7;}
.right li.sub a { font: normal 13px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none;}
.right li.sub a:hover { color:#1ea8ff; text-decoration:underline;}
/* search2 */
.search2 { padding:0; margin:10px 0 0 0;}
.search2 span { display:block; float:left;}
.search2 a { display:block; float:left; padding:10px 10px 0 10px; line-height:1.6em; color:#4270a1; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.search2 a:hover { text-decoration:underline;}
.search2 form { display:block; float:left; padding:5px 10px 0 10px;}
.search2 form .keywords { background:#ededed; float:left; border:1px solid #ababab; height:19px; width:124px; padding:3px 15px; margin:5px 5px 10px 0; font:normal 12px Tahoma, Geneva, sans-serif; color:#000;}
.search2 form .button { float:left; margin:5px 0 0 0; padding:0;}
/********** contact form **********/
.form { float:left; width:500px; margin-top:40px; margin-left:10px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:100px; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#6e6e6e; }
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:370px; border:1px solid #d1d1d1; margin:5px 0; padding:5px 2px; height:8px; background:#fff;}
#contactform textarea { width:370px; border:1px solid #d1d1d1; margin:10px 0; padding:2px; background:#fff; height:250px;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 100px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

/********** footer **********/
.footer {
padding:0;
height:80px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #FFF;
}
.footer_resize {
width:1000px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
padding-top: 20px;
color: #FFF;
}
.footer ul { margin:0; padding:0 10px; list-style:none; float:left;}
.footer img { display:inline; margin:5px 10px; padding:0;}
.footer ul li {
margin:0;
float:left;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
height: 110px;
color: #FFF;
}
.footer p {
margin:0;
padding:0 20px;
float:right;
color:#FFF;
font:normal 11px Arial, Helvetica, sans-serif;
line-height:1.8em;
}
.footer a {
text-decoration:none;
line-height:1.8em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #FFF;
}
.footer a:hover {
text-decoration:underline;
color: #FFF;
}

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:2px solid #d7d7d7; padding:0; margin:20px 0; background:none;}
li2.bg2, .bg2 { clear:both; border-top:1px solid #d7d7d7; padding:0; margin:20px 0; background:none;}
a:link, a:active, a:visited {
font-family: Tahoma, Arial;
color: #1fa8ff;
text-decoration: none;
font-size: 11px;
font-weight: normal;
}
a:hover {
font-family: Tahoma, Arial;
color: #1fa8ff;
text-decoration: underline;
text-decoration: underline;
font-size: 11px;
font-weight: normal;
}
a.link:link, a.link:active, a.link:visited {
font-family: Tahoma, Arial;
color: #004671;
text-decoration: underline;
font-size: 16px;
font-weight: bold;
}
a.link:hover {
font-family: Tahoma, Arial;
color: #A5D334;
text-decoration: underline;
font-size: 16px;
font-weight: bold;
text-transform: none;
}

Excavator
10-26-2009, 02:35 PM
Hello cambo,
The cascading affect of your other links styles are affecting your footer links styles.

Try adding this bit in red

.footer a {
text-decoration:none;
line-height:1.8em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #FFF;
}
.footer a:link,
.footer a:visited,
.footer a:active {
color: #fff;
}.footer a:hover {
text-decoration:underline;
color: #FFF;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum