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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts

    a:hover / css question

    This is probably very simple, and i am going to look like an idiot, but I am ready to ask for some help.

    Here is the deal. On my website, www.billboardfamily.com , when you click on a link, such as the logo at the top, or the links at the very bottom, you can see colors highlighting the clicked link. I tried to just set the a, and a:hover color property to transparent, which worked great on the graphics with links, such as the logo, but, obviously it made my text links at the bottom of the page invisible. I have tried to use inline styles on the text at the bottom to make it visible, overriding the stylesheet, but I can not get this all to work correctly. Please advise.

    style.css
    Code:
    * {
    	margin: 0; padding: 0;
    }
    body {
    	text-align: left;
    	font: 13px Verdana;
    	color: #566777;
    	background: #ffffff url(../images/headerbg.gif) repeat-x 0 0;
    }
    a {
    	text-decoration: none;
    	color: #999999;
    }
    a:hover {
    	text-decoration: underline;
    	color: #999999;
    }
    img {
    	border: 0;
    }
    
    .break {
    	font-size: 0;
    	width: 0; height: 0;
    	clear: both;
    }
    .alignleft {
    	float: left;
    	margin: 4px 10px 5px 0;
    }
    .alignright {
    	float: right;
    	margin: 4px 0 5px 10px;
    }
    .aligncenter {
    	text-align: center;
    }
    .hidden {
    	display: none;
    }
    
    /** BEGIN wrapper  **/
    .wrapper {
    	width: 885px;
    	margin: auto auto;
    	text-align: left;
    }
    /** END wrapper **/
    
    /** BEGIN header **/
    #header {
    	height: 178px;
    }
    	#header .search {
    		float: right;
    		margin-top: 11px;
    	}
    		#header .search form {
    			background: url(../images/search.png) no-repeat 0 0;
    			height: 49px;
    			width: 284px;
    		}
    		#header .search form input {
    			float: right;	
    			background-color: transparent;
    			border: 0;
    			font-size: 0.8em;
    			color: #FFFFFF;
    			height: 38px;
    			width: 223px;	
    			margin-top: 5px;
    			text-transform: uppercase;
    		}
    		#header .search form button {
    			float: left;	
    			width: 59px;
    			height: 49px;
    			background-color: transparent;
    			border: 0;
    			color: transparent;
    			text-indent: -9999px;	
    			
    	}
    		
    
    	#header .subscribe {
    		position: relative;
    		top: 75px;
    		left: 635px;		
    		float: left;
    		text-align: center;
    		color: #ffffff;
    		
    	}
    
    	#header .purchase {
    		position: absolute;
    		top: 148px;
    		right: 512px;		
    		
    				
    		
    	}
    
    	#header .logo {
    		clear: both;
    	}
    		#header .logo h1 {
    			padding-bottom: 32px;
    		}
    		#header .logo h1 a {
    			position: relative;
    			bottom: 15px;
    			background: url(../images/logo.png) no-repeat 0 0;
    			display: block;
    			text-indent: -9999px;
    			height: 62px;
    			width: 352px;	
    		}
    	
    
    	#header ul {
    		list-style-type: none;	
    		
    	}
    		#header ul li {
    			float: left;	
    			margin-right: 15px;
    		}
    			#header ul li a {
    				padding: 5px 8px;	
    				color: #FFFFFF;
    				text-transform: uppercase;
    				text-decoration: none;
    				font-size: 0.9em;
    				font-weight: bold;
    			}
    			#header ul li a:hover {
    				background-color: #b9c3cf;	
    			}
    /** END header **/
    
    /** BEGIN featured **/
    #featured {
    	padding: 43px 53px 0 53px;
    	background: #b7c3cf;
    }
    	#featured .l {
    		float: left;
    		margin-right: 22px;
    		margin-top: 75px;
    	}
    	#featured .items {
    		width: 650px; height: 240px;
    		overflow: hidden;
    		margin-right: 10px;
    		float: left;
    	}
    	#featured .feat {
    		width: 650px;
    	}
    		#featured .featuredimg {
    			display: block;
    			float: left;
    			border: 5px solid #ffffff;
    			margin-bottom: 45px;
    			margin-right: 25px;
    			width: 240px; height: 190px;
    			overflow: hidden;
    		}
    		#featured .feat img {
    			width: 240px;
    		}
    		#featured .feat .text {
    			float: right;
    			width: 375px;	
    			padding-top: 5px;
    		}
    			#featured .feat .text h2 a {
    				text-decoration: none;
    				color: #566777;	
    				font-size: 1.9em;
    				font-family: Arial;
    				padding-bottom: 10px;
    			}
    			#featured .feat .text p {
    				color: #5f6168;	
    				font-size: 0.9em;
    			}
    	#featured .r {
    		float: right;	
    		margin-top: 75px;
    	}
    /** END featured **/
    
    /** BEGIN top **/
    #top {
    	clear: both;
    	padding: 20px 0;
    	
    	
    }
    	#top .box {
    		width: 240px;
    		float: left;
    		margin: 0 40px 0 14px;
    	}
    		#top .box .name {
    			height: 58px;
    			background: url(../images/border.gif) repeat-x 0 bottom;
    		}
    			#top .box .name img {
    				float: left;	
    				padding-bottom: 5px;
    				padding-right: 9px;
    			}
    			#top .box .name .title {
    				color: #566777;
    				text-transform: uppercase;	
    				text-decoration: none;
    				font-weight: bold;
    				font-family: Arial;
    				font-size: 1.1em;
    			}
    			#top .box .name .title2 {
    				text-transform: uppercase;	
    				text-decoration: none;
    				font-family: Arial;
    				color: #5f6168;
    				font-size: 0.8em;
    			}
    		#top .box .text2 {
    			clear: both;
    			margin: 15px 0 40px 6px;	
    		}
    			#top .box .text2 p {
    				color: #76848f;
    				font-size: 0.8em;
    				margin-bottom: 20px;
    			}	
    			#top .box .text2 .more {
    				font-size: 0.8em;
    				color: #38b5c4;	
    				text-decoration: underline;
    			}
    /** END top **/
    
    /** BEGIN body **/
    #body {
    	clear: both;
    }
    /** END body **/
    
    /** BEGIN content **/
    #content {
    	width: 511px;
    	float: left;
    }
    	#content .post {
    		margin-bottom: 22px;
    		margin-top: 37px;
    		clear: both;
    	}
    		#content .post h2 {
    			font-size: 1.8em;
    			text-transform: uppercase;
    			font-family: Arial;
    			font-weight: bold;
    			padding-bottom: 18px;
    			background: url(../images/border.gif) repeat-x 0 bottom;
    		}
    		#content .post h2 a {
    			color: #566777;
    			text-decoration: none;
    		}
    		#content .post img {
    			float: left;
    			padding: 5px;
    			background-color: #FFFFFF;
    			margin: 17px 11px 19px 4px;	
    		}
    		#content .post p {
    			margin-top: 20px;
    			font-size: 0.9em;
    			line-height: 1.5em;
    			color: #566777;	
    		}
    		#content .post .date {
    			color: #566777;
    			height: 20px;
    			padding-top: 5px;
    			clear: both;
    		}
    		#content .post .category a {
    			background: url(../images/category.gif) no-repeat 0 0;
    			color: #566777;
    			padding-left: 29px;
    			padding-right: 10px;
    			text-decoration: underline;
    			height: 16px;
    		}
    		#content .post .comments a {
    			background: url(../images/comments.gif) no-repeat 0 0;
    			color: #566777;
    			padding: 0 10px 5px 23px;
    			text-decoration: underline;
    			height: 20px;
    		}
    		#content .entry {
    			font-weight: bold;
    			color: #00a5b6;
    			text-decoration: none;
    			text-transform: uppercase;
    			background: url(../images/previous.gif) no-repeat 0 6px;
    			padding-left: 15px;
    		}
    		#content .last {
    			margin-bottom: 70px;	
    		}
    	#content .postnav {
    		text-transform: uppercase;
    		font-weight: bold;
    		padding: 20px 0;
    	}
    		#content .postnav a {
    			text-decoration: none;
    		}
    /** END content **/
    
    /** BEGIN sidebar **/
    #sidebar {
    	float: right;
    	width: 326px;
    	padding-bottom: 40px;
    }
    	#sidebar .box2 h2 {
    		text-transform: uppercase;
    		color: #566777;
    		font-size: 1.1em;
    		font-family: Arial;
    		padding-bottom: 11px;
    		margin-top: 32px;
    		background: url(../images/border.gif) repeat-x 0 bottom;
    	}
    	#sidebar .sub ul {
    		list-style-type: none;	
    	}
    		#sidebar .sub ul li {
    			float: left;
    			margin-top: 11px;
    			margin-bottom: 17px; 
    			margin-right: 6px;
    			margin-left: 10px;	
    		}
    	#sidebar .ad {
    		clear: both;	
    	}
    		#sidebar .ad img {
    			float: left;
    			margin-right: 10px;
    		}
    		#sidebar .ad p {
    			font-size: 0.8em;
    			color: #81848a;	
    			margin: 5px 0 20px 0;
    		}
    		#sidebar .ad .time {
    			text-decoration: none;
    			font-size: 0.8em;
    			color: #00a5b6;	
    		}
    	#sidebar .pop ul {
    		list-style-type: none;	
    	}
    		#sidebar .pop ul li {
    			float: left;	
    			width: 320px;
    			margin: 10px 0 10px 10px;
    		}
    		#sidebar .pop ul li img {
    			background-color: #FFFFFF;
    			padding: 5px;
    			margin-right: 11px;
    			float: left;
    			width: 50px; height: 50px;
    		}
    		#sidebar .pop ul li .title {
    			color: #5f6168;
    			font-weight: bold;
    			text-decoration: none;
    		}
    		#sidebar .pop ul li .artcom {
    			color: #3ab7c5;
    			text-decoration: none;
    			font-size: 0.8em;	
    		}
    		#sidebar .pop ul li p {
    			margin-top: 15px;
    			margin-bottom: 5px;	
    		}
    	#sidebar .flick img {
    		width: 80px; height: 80px;
    		margin: 5px;
    	}
    	#sidebar .flick h2 {
    		margin-bottom: 7px;
    	}
    	#sidebar .video {
    		margin: 15px 0;	
    	}
    	#sidebar .cat {
    		width: 135px;
    		float: left;
    		margin-right: 20px;	
    	}
    		#sidebar .cat ul {
    			list-style-type: none;
    			margin-left: 10px;
    		}
    		#sidebar .cat ul li {
    			padding-top: 18px;
    		}
    		#sidebar .cat ul li a {
    			color: #5f6168;		
    			font-size: 0.9em;
    			text-decoration: none;
    		}
    		#sidebar .cat ul li a:hover {
    			color: #00a5b6;
    				
    		}
    /** END sidebar **/
    
    /** BEGIN footer **/
    #footer {
    	background: #000000 url(../images/footerbg.gif) repeat-x 0 0;
    	height: 340px;
    	clear: both;
    	padding: 15px 0;
    }
    	#footer #reviews {
    		float: left;
    		border-right;
    		color: #999999;
    		
    	}
    	
    	#footer #info {
    		padding-left: 10px;
    		float: right;
    		color: #999999;
    		border-left: 1px solid #515151;
    		
    	}
    		
    /** END footer **/
    
    
    
    /** begin pages submenu **/
    #header li ul {
    	clear: both;
    	position: absolute;
    	list-style-type: none;
    	display: none;
    	z-index: 200;
    	height: auto !important;
    	padding-top: 1px;
    	padding-left: 0 !important;
    	margin-left: -1px;
    	background-image: none !important;
    	border-width: 0 0 1px !important;
    	border-color: #ffffff;
    	border-style: solid;
    }
    	#header li ul li {
    		clear: both;
    		margin: 0 !important;
    		background-image: none !important;
    		border-width: 1px 1px 0;
    		border-style: solid;
    		border-color: #ffffff;
    		padding: 0 !important;
    	}
    	#header li ul li a {
    		padding: 4px 15px !important;
    		line-height: 1.5em;
    		width: 170px;
    		background-color: #015A77;
    	}
    	#header li ul li a:hover {
    		background-color: #000033 !important;
    		background-image: none !important;
    	}
    /** end pages submenu **/
    
    /** BEGIN miscellaneous **/
    #content .single {
    	padding: 20px;
    	margin-bottom: 50px;
    }
    	#content .single p {
    		line-height: 1.5em;
    		margin-bottom: 10px;
    	}
    	#content .single ul, #content .single ol {
    		list-style-position: inside;
    		margin-bottom: 10px;
    	}
    	#content .single li {
    		line-height: 1.5em;
    		padding: 2px 0;
    	}
    	#content .single blockquote {
    		padding: 10px 10px 5px;
    		margin-bottom: 10px;
    		background-color: #eeeeee;
    		border-width: 1px 0;
    		border-style: solid;
    		border-color: #bbbbbb;
    	}
    	#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
    		font-size: 1.2em;
    		margin-bottom: 5px;
    	}
    	#content .single h2 {
    		font-size: 2em;
    	}
    #comments {
    	padding: 20px;
    }
    	#comments a {
    		text-decoration: none;
    	}
    	#comments h2 {
    		font-size: 1.2em;
    		margin: 10px 0;
    	}
    	#comments p {
    		margin-bottom: 10px;
    		line-height: 1.6em;
    	}
    	#comments form {
    		
    	}
    	#comments form p {
    		margin-bottom: 5px;
    	}
    		#comments form input {
    			margin-right: 5px;
    		}
    		#comments form input, textarea {
    			border: 1px solid #bbbbbb;
    			font-size: 0.9em;
    			font-family: Verdana;
    			padding: 4px;
    			background-position: 4px 4px;
    			background-repeat: no-repeat;
    		}
    		#comments form input {
    			width: 240px;
    			border: 1px solid #bbbbbb;
    		}
    		#comments form textarea {
    			width: 350px;
    			padding: 4px 4px !important;
    			border: 1px solid #bbbbbb;
    		}
    		#comments form button {
    			border: 1px solid #a0a0a0;
    			font-size: 1em;
    			font-family: Verdana;
    			padding: 2px 6px;
    		}
    	.commentdetails {
    		margin-top: 25px;
    	}
    	.commentauthor {
    		margin-bottom: 5px !important;
    		font-weight: bold;
    	}
    	.commentdate {
    		font-size: 0.8em;
    		margin-bottom: 5px;
    		color: #909090;
    	}
    	.required {
    		color: #ff0000;
    	}
    h2.title {
    	font-size: 1em !important;
    	text-transform: uppercase;
    	color: #565656;
    	padding-top: 30px;
    }
    .notfound {
    	padding: 40px;
    }
    	.notfound h2 {
    		font-size: 18px;
    		font-weight: normal;
    		margin-bottom: 10px;
    	}
    
    /** END miscellaneous **/
    
    /** BEGIN wordpress 2.7 comments **/
    #comments ol {
    	list-style-type: none;
    	clear: both;
    	padding: 0;
    	margin: 0;
    }
    	#comments .buffer {
    		padding: 10px;
    	}
    	#comments ol li {
    		margin-bottom: 10px;
    	}
    	#comments ol li ul li {
    		border: 1px solid #eeeeee;
    		padding: 10px;
    	}
    	#comments ol li .avatar {
    		float: right;
    	}
    	#comments ol li .comment-author {
    		
    	}
    		#comments ol li .comment-author .fn {
    			font-weight: bold;
    			font-size: 1.2em;
    		}
    	#comments ol li .comment-meta {
    		font-size: 0.9em;
    		color: #999999;
    		margin: 5px 0 10px;
    	}
    	#comments ol li .reply {
    		font-size: 0.9em;
    		font-weight: bold;
    		padding-bottom: 10px;
    	}
    	#comments .children {
    		list-style-type: none;
    	}
    #comments .navigation {
    	padding: 0 0 40px;
    	font-size: 0.9em;
    }
    	#comments .navigation a {
    		color: #999999;
    		padding: 3px 8px;
    		border: 1px solid #bbbbbb;
    	}
    	#comments .navigation a:hover {
    		color: #000000;
    		border-color: #000000;
    		text-decoration: none;
    	}
    #comments .says {
    	display: none;
    }
    /** END wordpress 2.7 comments **/
    footer.php
    Code:
    <div class="break"></div>
    	
    	</div>
    	<!-- END body -->
    	
    </div>
    <!-- END wrapper -->
    
    <!-- BEGIN bottom -->
    <div id="footer">
    
    <!-- BEGIN wrapper -->
    <div class="wrapper">
    
    <div align="center">
    <img src="<?php bloginfo('template_url'); ?>/assets/images/partners.png" alt="PLEASE VISIT OUR PARTNERS"/></div>
    
    	<!-- BEGIN top -->
    	<div id="top">
    
    		<div class="box">
    			<div class="name">
    				<a href="#"><img align="center" alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a>
    				<a class="title">Partner #1</a> <br/>
    				<a class="title2">Coming Soon</a>
    			</div>
    			<div class="text2">
    				<p>This is where the partner synopsys will be located for this partner when completed.</p>
    				<a href="#" class="more">Read More >></a>
    			</div>
    			<div class="break"></div>
    		</div>
    		<div class="box">
    			<div class="name">
    				<a href="#"><img alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a>
    				<a class="title">Partner #2</a> <br/>
    				<a class="title2">Coming Soon</a>
    			</div>
    			<div class="text2">
    				<p>This is where the partner synopsys will be located for this partner when completed.</p>
    				<a href="#" class="more">Read More >></a>
    			</div>
    			<div class="break"></div>
    		</div>
    		<div class="box">
    			<div class="name">
    				<a href="#"><img alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a>
    				<a class="title">Partner #3</a> <br/>
    				<a class="title2">Coming Soon</a>
    			</div>
    			<div class="text2">
    				<p>This is where the partner synopsys will be located for this partner when completed.</p>
    				<a href="#" class="more">Read More >></a>
    			</div>
    			<div class="break"></div>
    		</div>
    		
    	</div>
    	<!-- END top -->
    	
    </div>
    <!-- END wrapper -->
    
    
    	<!-- BEGIN wrapper -->
    	<div class="wrapper">
    	
    	<p id="reviews">Reviews Here</p>
    	
    
    
    <p id="info">&copy; 2010 The Billboard Family<br />All Rights Reserved 
    <br /><br />
    
     	&rarr; <a href="http://billboardfamily.com/" target="_blank">Submit A Review</a><br />
    					 	&rarr; <a href="/terms-and-conditions">Terms & Conditions</a><br />
    
    					 	&rarr; <a href="/partners">Partners</a><br />
    					 	&rarr;  <a href="/contact">Contact Us</a></p> 
    
    
    </div>
    
    	
    	<!-- END wrapper -->
    	
    </div>
    <!-- END bottom -->
    	
    </body>
    
    </html>
    Last edited by CarlMartin10; 07-05-2010 at 07:36 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The links aren't invisible but any kind of :hover won't work. If you want the :hover to still work you need to set a class to those links and set the styles to them in your CSS. You would need to remove the inline styling.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    The links aren't invisible but any kind of :hover won't work. If you want the :hover to still work you need to set a class to those links and set the styles to them in your CSS. You would need to remove the inline styling.
    I tried to do that, but for some reason, I could not get it right. I am not sure what I am overlooking, but iI am sure it is something small.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What class did you use? And what does the CSS you tried look like?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    I posted it in the first post on this topic, above.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    But which links are you referring? What classes do they have?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    But which links are you referring? What classes do they have?
    This is the portion of the footer.php that holds these links I am referring to.


    Code:
    <!-- BEGIN wrapper -->
    	<div class="wrapper">
    	
    	<p id="reviews">Reviews Here</p>
    	
    
    
    <p id="info">&copy; 2010 The Billboard Family<br />All Rights Reserved 
    <br /><br />
    
     	&rarr; <a href="http://billboardfamily.com/" target="_blank">Submit A Review</a><br />
    					 	&rarr; <a href="/terms-and-conditions">Terms & Conditions</a><br />
    
    					 	&rarr; <a href="/partners">Partners</a><br />
    					 	&rarr;  <a href="/contact">Contact Us</a></p> 
    
    
    </div>
    
    	
    	<!-- END wrapper -->
    I just want to override the a, and a:hover colors for just these links. I will make the main a, and a:hover for the entire site color: transparent;

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    PHP Code:
    #info a {
        
    text-decorationnone;
        
    color#999999;
    }
    #info a:hover {
        
    text-decorationunderline;
        
    color#999999;

    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CarlMartin10 (07-06-2010)

  • #9
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Try this
    PHP Code:
    #info a {
        
    text-decorationnone;
        
    color#999999;
    }
    #info a:hover {
        
    text-decorationunderline;
        
    color#999999;


    Unfortunately, that did not work. I added this to my stylesheet, and changed the a, and a:hover color property to transparent (at the top of the css), and it changed the links at the bottom, which I added that code for, to transparent, as well. It is not overriding the a, and a:hover at the top of the stylesheet. Any other ideas?

  • #10
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    upon further inspection, I saw that I was missing a "}", which I added, and it now works. I think that was the problem all along, because I did basically what you suggested last night with no success.

    Thanks for all the help, I really appreciate it.


  •  

    Posting Permissions

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