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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    277
    Thanks
    10
    Thanked 1 Time in 1 Post

    Help with a:hover

    I'm having trouble making the links' hover color white. Any suggestions

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    <head>
    	<title>The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
    	<meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
    	<meta name="robots" content="index, follow" />
    	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    	<style media="screen" type="text/css">
    	/* <!-- */
    	/* General styles */
    	body {
    		margin:0;
    		padding:0;
    		border:0;			/* This removes the border around the viewport in old versions of IE */
    		width:100%;
    		background:#fff;
    		min-width:600px;		/* Minimum width of layout - remove line if not required */
    						/* The min-width property does not work in old versions of Internet Explorer */
    		font-size:90%;
    	}
    	a {
    		color:white;
    		text-decoration:none;
    	}
    	a:hover {		
    color:white;
    
    		text-decoration:none;
    	}
    	h1, h2, h3 {
    		margin:.8em 0 .2em 0;
    		padding:0;
    		clear:both;
    	}
    	p {
    		margin:.4em 0 .8em 0;
    		padding:0;
    	}
    	img {
    		margin:10px 0 5px;
    	}
    	#ads {
    		width:100%;
    		padding:20px 0;
    	}
    	#ads #mjt {
    		float:left;
    		margin-bottom:20px;
    	}
    	#ads .adhere {
    		margin:0 10px 10px 0;
    	}
    	#ads img {
    		display:block;
    		margin:0;
    	}
    	
    	/* download link */
    	.download {
    		clear:both;
    		float:left;
    		padding-top:10px;
    	}
    	.download a {
    		padding:.3em .5em !important;
    		margin-right:10px;
    		background:#00bd3e;
    		text-decoration:none;
    		color:#fff;
    		font-weight:bold;
    		font-size:1.5em;
    		-moz-border-radius:.3em;
    		-webkit-border-radius:.3em;
    		border-radius:.3em;
    		line-height:2.5em;
    		-moz-box-shadow: 1px  1px 2px #888;
    		-webkit-box-shadow: 1px 1px 2px #888;
    		box-shadow: 1px 1px 2px #888;
    	}
    	.download a:hover {
    		background:#5f534f;
    		text-shadow: 2px 2px 2px #000;
    	}
    
    	/* Header styles */
    	#header {
    		clear:both;
    		float:left;
    		width:100%;
    	}
    	#header {
    		border-bottom:1px solid #000;
    	}
    	#header p,
    	#header h1,
    	#header h2 {
    		padding:.4em 15px 0 15px;
    		margin:0;
    	}
    	#header ul {
    		clear:left;
    		float:left;
    		width:100%;
    		list-style:none;
    		margin:10px 0 0 0;
    		padding:0;
    	}
    	#header ul li {
    		display:inline;
    		list-style:none;
    		margin:0;
    		padding:0;
    	}
    	#header ul li a {
    		display:block;
    		float:left;
    		margin:0 0 0 1px;
    		padding:3px 10px;
    		text-align:center;
    		background:#eee;
    		color:#000;
    		text-decoration:none;
    		position:relative;
    		left:15px;
    		line-height:1.3em;
    	}
    	#header ul li a:hover {
    		background:#369;
    		color:#fff;
    	}
    	#header ul li a.active,
    	#header ul li a.active:hover {
    		color:#fff;
    		background:#000;
    		font-weight:bold;
    	}
    	#header ul li a span {
    		display:block;
    	}
    	/* 'widths' sub menu */
    	#layoutdims {
    		clear:both;
    		background:#eee;
    		border-top:4px solid #000;
    		margin:0;
    		padding:6px 15px !important;
    		text-align:right;
    	}
    	/* column container */
    	.colmask {
    		position:relative;	/* This fixes the IE7 overflow hidden bug */
    		clear:both;
    		float:left;
    		width:100%;			/* width of whole page */
    		overflow:hidden;		/* This chops off any overhanging divs */
    	}
    	#bookmarks{
    		font-size:50px;
    		font-family:impact;
    		color:black;
    		text-decoration:none;
    		}
    	#share{
    		font-size:50px;
    		color:black;
    		text-decoration:none;
    		font-family:impact;
    		}
    		#bookmarks a:hover{
    			color:white;
    		}
    		
    		#bookmarks a:visited{color:black;text-decoration:none;}
    		
    		#bookmarks a:link{color:black;
    		text-decoration:none;}
    		#share a:hover{color:white;	text-decoration:none;}
    		
    		#share a:visited{color:black;text-decoration:none;}
    		
    		#share a:link{color:black;
    		text-decoration:none;}
    		
    		
    		
    		
    	/* common column settings */
    	.colright,
    	.colmid,
    	.colleft {
    		float:left;
    		width:100%;			/* width of page */
    		position:relative;
    	}
    
    	.col2{font-size:20px;}
    	.col1,
    	.col2,
    	.col3 {
    		float:left;
    		position:relative;
    		text-align:center;
    		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
    						only padding top and bottom is included here, make it whatever value you need */
    		overflow:hidden;
    	}
    	/* 3 Column settings */
    	.threecol {
    		background:#eee;		/* right column background colour */
    	}
    	.threecol .colmid {
    		right:25%;			/* width of the right column */
    		background:#fff;		/* center column background colour */
    	}
    	.threecol .colleft {
    		right:50%;			/* width of the middle column */
    		background:#f4f4f4;	/* left column background colour */
    	}
    	.threecol .col1 {
    		width:46%;			/* width of center column content (column width minus padding on either side) */
    		left:102%;			/* 100% plus left padding of center column */
    	}
    	.threecol .col2 {
    		width:21%;			/* Width of left column content (column width minus padding on either side) */
    		left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    	}
    	.threecol .col3 {
    		width:21%;			/* Width of right column content (column width minus padding on either side) */
    		left:85%;			/* Please make note of the brackets here:
    						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    	}
    	/* Footer styles */
    	#footer {
    		clear:both;
    		float:left;
    		width:100%;
    		border-top:1px solid #000;
    	}
    	#footer p {
    		padding:10px;
    		margin:0;
    	}
    	/* --> */
    	</style>
    </head>
    <body>
    <!-- BuySellAds.com Ad Code -->
    <script type="text/javascript">
    (function(){
      var bsa = document.createElement('script');
         bsa.type = 'text/javascript';
         bsa.async = true;
         bsa.src = '//s3.buysellads.com/ac/bsa.js';
      (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
    })();
    </script>
    <!-- END BuySellAds.com Ad Code -->
    
    <div id="header">
      <h1>&nbsp;</h1></div><div class="colmask threecol">
      <div class="colmid">
    	<div class="colleft">
    			<div class="col1">
    				<!-- Column 1 start -->
                    
    <p>&nbsp;</p>
    				<!-- Column 1 end -->
    	  </div>
    			<div class="col2">
    				<!-- Column 2 start -->
    		        <div id="bookmarks">	<a href=""> BOOKMARKS</a></div>
                    
                <div id="share"><a href="">SHARE</a></div>
    				<p>&nbsp;</p>
            
    				<!-- Column 2 end -->
    </div>
    			<div class="col3">
    				<!-- Column 3 start -->
    				<div id="ads">
                    
    			  <!-- BuySellAds.com Zone Code --></div>
    			  <!-- Column 3 end -->
    			</div>
    		</div>
    	</div>
    </div>
    <div id="footer">
    	<p>&nbsp;</p>
    </div>
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-1848067-8";
    urchinTracker();
    </script>
    
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello andynov123,
    When styling your links you should remember the LoVeHAte rule.

    See here.
    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

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    277
    Thanks
    10
    Thanked 1 Time in 1 Post
    I don't see what wrong with my code even when looking at that lovehate rule.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by andynov123 View Post
    I don't see what wrong with my code even when looking at that lovehate rule.
    Yours is backward -
    Code:
    		#bookmarks a:hover{
    			color:white;
    		}
    		
    		#bookmarks a:visited{color:black;text-decoration:none;}
    		
    		#bookmarks a:link{color:black;
    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
    •