Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS links in multi colours

    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/

    Code:
    <!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>
    Code:
    @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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cambo,
    The cascading affect of your other links styles are affecting your footer links styles.

    Try adding this bit in red
    Code:
    .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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •