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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple css hovering effects problem

    Hello, I am having trouble creating the button rollover effect using css. I have been following this tutorial:

    http://www.elated.com/articles/css-rollover-buttons/

    but the button does not appear. I double have checked the image path and the dimensions. (It is a 60x120 image)

    I am wondering if the other hovering effect is causing problems. The top of my webpage right now also has another hovering effect, but its for the navigational header. The text changes colors when we hover over it.

    Thanks for your help!




    Code:
    /* ========================== CSS Reset ========================== */
    * {
    	border: 0 none;	
    	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    
    /* ========================== General Styles ========================== */
    body {
    	/*background: url("images/bg_body.jpg") repeat top left;*/
    	text-align: center;
    }
    
    #wrapper {
    	margin: 0 auto;
    	text-align: left;
    	width: 940px;
    }
    
    a {
    	color: #a32626;
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    a.top {
    	background: url("images/bg_top.jpg") no-repeat 0% 50%;
    	color: #E68480;
    	font-size: 13px;
    	padding-left: 25px;
    	
    }
    
    a.top:hover {
    	color: #bbb;
    	text-decoration: none;
    }
    
    
    
    /* ========================== Social Icons Hover ========================== */
    
    #facebook
    {
      display: block;
      width: 60px;
      height: 60px;
      background: url("images/facebook.jpg") no-repeat 0 0;
    
    }
    
    #facebook:hover
    { 
      background-position: 0 -60px;
    }
    
    #facebook span
    {
      position: absolute;
      top: -999em;
    }
    
    
    
    blockquote {
    	background: url("images/blockquote.png") no-repeat top left;
    	margin-bottom: 25px;
    	padding-left: 32px;
    }
    
    blockquote p {
    	font-style: oblique;
    	margin-bottom: 5px;
    }
    
    blockquote p.author {
    	color: #99C93C;
    	font-size: 11px;
    	font-style: normal;
    }
    
    em {
    	font-style: oblique;
    }
    
    h1 {
    	color: #99C93C;
    	font-size: 180px;
    	}
    
    
    h2 {
    	border-top: 1px solid #555;
    	color: #99C93C;
    	font-size: 24px;
    	margin-bottom: 35px;
    	padding-top: 17px;
    }
    
    h3 {
    	color: #99C93C;
    	font-size: 21px;
    	margin-bottom: 20px;
    }
    
    h4 {
    	color: #99C93C;
    	font-size: 18px;
    	margin-bottom: 20px;
    }
    
    h5 {
    	color: #99C93C;
    	font-size: 14px;
    	font-weight: bold;
    	margin-bottom: 20px;
    }
    
    h6 {
    	color: #99C93C;
    	font-size: 30px;
    	margin-bottom: 20px;
    	margin-left: 50px;
    }
    
    h7 {
    	border-top: 1px solid #555;
    	color: #A32626;
    	font-size: 24px;
    	margin-bottom: 35px;
    	padding-top: 17px;
    }
    
    img {
    	margin-bottom: 15px;
    }
    
    img.left {
    	margin: 0 20px 15px 0;
    }
    
    img.right {
    	margin: 0 0 15px 20px;
    }
    
    img.icon {
    	border: none;
    	margin: 0 12px 10px 0;
    }
    
    li {
    	background: url("images/bullet.jpg") no-repeat 0% 50%;
    	color: #E68480;
    	font-size: 13px;
    	line-height: 21px;
    	padding-left: 18px;
    }
    
    ol {
    	list-style-position: inside;
    	margin-bottom: 20px;
    }
    
    ol li {
    	background: none;
    	padding: 0;
    }
    
    p {
    	color: #E68480;
    	font-size: 13px;
    	line-height: 21px;
    	margin-bottom: 20px;
    }
    
    p.featured {
    	background-color: #333;
    	color: #d5d5d5;
    	font-size: 15px;
    	line-height: 24px;
    	padding: 15px 20px;
    	width: 180px;
    }
    
    p.featured.right {
    	margin-left: 15px;
    }
    
    strong {
    	font-weight: bold;
    }
    
    ul {
    	list-style: none;
    	margin-bottom: 20px;
    }
    
    .left {
    	float: left;
    }
    
    .right {
    	float: right;
    }
    
    
    /* ========================== Header Styles ========================== */
    #header {
    	background: url("images/bg_header.png") no-repeat top left;
    	height: 111px;
    	overflow: hidden;
    	padding: 35px 20px;
    	position: fixed;
    	top: 0px;
    	width: 900px;
    	z-index: 1000;
    }
    
    #header ul {
    	float: right;
    }
    
    #header ul li {
    	background: none;
    	float: left;
    	height: 111px;
    	line-height: 111px;
    	margin-left: 20px;
    	
    	padding: 0px;
    }
    
    #header ul li a {
    	color: #99C93C;
    	font-size: 24px;
    	
    	}
    
    #header ul li a:hover {
    	color: #d2d2d2;
    	text-decoration: none;
    }
    
    
    
    
    /* ========================== Intro text Styles ========================== */
    #intro {
    	color: #99C93C;
    	font-size: 35px;
    	line-height: 42px;
    	margin: 79px 0 0 0;
    }
    
    #hours {
    	margin-bottom: -25px;
    	overflow: hidden;
    	padding-top: 30px;
    }
    
    
    
    /* ========================== Home Styles ========================== */
    #home {
    	margin-bottom: -25px;
    	overflow: hidden;
    	padding-top: 150px;
    }
    
    #home li {
    	background: none;
    	float: left;
    	margin: 0 20px 20px 0;
    	padding: 0;
    	position: relative;
    	width: 220px;
    }
    
    #home li.last {
    	margin-right: 0;
    }
    
    #home li img {
    	border: 4px solid #222;
    	margin: 0;
    }
    
    #home li img:hover, #home li:hover img {
    	border: 4px solid #444;
    }
    
    #home li .description {
    	background-color: #444;
    	color: #000;
    	display: none;
    	font-size:10px;
    	padding: 8px 10px;
    	position: absolute;
    }
    
    #colsContainer {
        margin: 0px 0px 0px 0px;
        overflow: hidden;
                    
    }
    
    #side-a {
    	float: left;
    	width: 560px;
    	overflow: hidden;
    }
    
    #side-b { 
    	padding-top: 25px;
    	text-align: right;
    	width: 380px;
    	overflow: hidden;
    
    }
    
    
    /* ========================== Layout Styles ========================== */
    .page {
    	margin-bottom: 100px;
    	overflow: hidden;
    	padding-top: 150px;
    }
    
    .box_220, .box_300, .box_620 {
    	float: left;
    	margin-right: 20px;
    }
    
    .box_220 {
    	width: 220px;
    }
    
    .box_300 {
    	width: 300px;
    }
    
    .box_620 {
    	width: 620px;
    }
    
    .last {
    	margin-right: 0;
    }

    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" lang="en">
    <head>
    	<title>Raw Possibility</title>
    	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    	<!-- jQuery Script -->
    	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    	<!-- Contact Form Script -->
    	<script type="text/javascript" src="js/form.js"></script>
    	<!-- Scroll Script -->
    	<script type="text/javascript" src="js/scroll.js"></script>
    	<!-- Slider Script -->
    	<link rel="stylesheet" type="text/css" media="screen" href="presentation/nivo-slider.css" />
    	<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    	<script type="text/javascript">
    		$(window).load(function() {
    			$('#slider').nivoSlider();
    		});
    	</script>
    
    
    </head>
    
    <body id="top">
    	<!-- BEGIN: wrapper -->
    <div id="wrapper">
    		<!-- BEGIN: header -->
    		<div id="header">
    			<ul>
    				<li><a href="#home" title="Link">home</a></li>
    				<li><a href="#about" title="Link">about me</a></li>
    				<li><a href="#elements" title="HTML Elements">my menu</a></li>
                    <li><a href="#contact" title="Link">contact me</a></li>
    			</ul>
    		</div>
    		<!-- END: header -->
    
    
    		<!-- BEGIN: home -->
    	  <div class="page" id="home">
           
                   	<h1>hello! I am,</h1>
                   	<div id="colsContainer" style="margin-top: 0px;">
                   
                   	<div id="side-a">
                   		<h6>vegan</h6>
                   		<h6>healthy</h6>
                   		<h6>delicious.
                   		</h6>
                   			<div style="margin-top: 50px;">
             					<img src="images/Hours.png"/>
             				</div>
             		</div>
            	
            		<div id="side-b">
            		
            		<a id="facebook" href="#" title="facebook"><span>facebook</span></a>
    
                	</div>
                	
                	
    				</div>
                   
           
          </div>
            <!-- END: home -->
    		
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you also post a picture of the folder structure from the top of the navigation bar where the images are kept

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Any style rule you apply to just the <a> tag will affect ALL <a> tags in your document.

    Specificity is just what it sounds like. Giving an element a specific class or id so that ONLY it will be styled the way you want.
    Last edited by teedoff; 04-05-2011 at 03:15 PM.
    Teed


  •  

    Posting Permissions

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