Results 1 to 4 of 4

Thread: Problem with css sprite button

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Question Problem with css sprite button

    I am making a CSS sprite button that instead of going to another page it shows more (like a read more/read less button). It is not working quite properly as when you hover over it the background image of the button does not change. Also in trying to fix this for some reason the footer style has gone funny. I have not touched the CSS for the footer so I do not know why it has stopped working. Below is the CSS and link to the page, the PHP is in another comment.

    Link: http://kent-telephones.ismywebsite.co.uk/exchange.php (I am working with the Sign Up button)

    CSS

    Code:
    /* CSS Document */
    
    body {
    	margin-top:0;
    	font-family:Arial, Helvetica, sans-serif;
    }
    
    p {
    	text-align:justify;
    }
    
    h1 {
    	text-align:center;
    }
    
    a {
    	color:#00C;
    	text-decoration:none;
    }
    
    a:hover {
    	color:#900;
    }
    
    .centre {
    	text-align:center;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    img a {
    	border:none;
    }
    
    .left {
    	float:left;
    	margin:5px;
    }
    
    .right {
    	float:right;
    	margin:5px;
    }
    
    .textright {
    	text-align:right;
    }
    
    .smallprint {
    	font-size:10px;
    	font-style:italic;
    }
    
    #banner {
    	width:1000px;
    	height:500px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(../Images/graphic.jpg)
    }
    
    #logo{
    	width:700px;
    	height:300px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:50px;
    }
    
    #menu{
    	width:1000px;
    	height:50px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:50px;
    	padding:0;
    }
    
    #content{
    	width:1000px;
    	height:auto;;
    	min-height:800px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(../Images/background.jpg);
    	background-repeat:no-repeat;
    	background-color:#FFF;
    	overflow:hidden;
    }
    
    #advert {
    	width:800px;
    	height:200px;
    	margin:50px 100px;
    }
    
    #main{
    	width:900px;
    	height:auto;
    	margin-left:50px;
    	overflow:hidden;
    }
    
    #footer{
    	background-image:url(../Images/footbg.jpg);
    	width:1000px;
    	height:200px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    /* Telephone exchange fonts */
    
    .extitle {
    	font-family:"Arial Black", Gadget, sans-serif;
    	font-size:30px;
    	text-shadow:2px 2px 5px #00FFFF;  
    }
    
    .extext {
    	font-weight:bold;
    	color:#0000FF;
    	font-size:20px;
    	text-shadow:4px 2px 5px #FFF;
    }
    
    /* Sign Up */
    
    #signup {
    	width:435px;
    	height:auto;
    	float:left;
    	overflow:hidden;
    	margin-left:10px;
    }
    
    #signuptop {
    	height:12px;
    	width:435px;
    	background-image:url(../Images/signuptop.fw.png);
    	background-repeat:no-repeat;
    }
    
    #signupbottom {
    	height:12px;
    	width:435px;
    	background-image:url(../Images/signupbot.fw.png);
    	background-repeat:no-repeat;
    }
    
    #signmiddle {
    	width:425px;
    	height:auto;
    	background-image:url(../Images/signupmid.fw.png);
    	background-repeat:repeat-y;
    	padding-left:5px;
    	padding-right:5px;
    	overflow:hidden;
    	
    }
    
    #signbutton {
    	background-image:url(../Images/signupbutton.fw.png);
    	width:150px;
    	height:70px;
    	margin-right:auto;
    	margin-left:auto;
    	display:block;
    	text-align:center;
    	line-height:30px;
    }
    
    #signbutton a {
    	width:150px;
    	height:70px;
    }
    
    #signbutton a:hover {
    	background-image:url(../Images/signupbuttonover.fw.png;
    	width:150px;
    	height:70px;
    }
    
    /*#signbutton span {
    	display:none;
    }*/
    
    #signform {
    	width:425px;
    	height:auto;
    	overflow:hidden;
    }
    
    /* About */
    
    #promo {
    	margin:10px;
    }
    
    #promo iframe {
    	width:420px;
    	height:315px;
    }
    
    /* Shop*/
    
    #shop {
    	width:900px;
    	height:700px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    #shop iframe {
    	width:900px;
    	height:700px;
    }
    
    
    /* Footer */
    
    #quickbar {
    	height:180px;
    	width:290px;
    	margin-left:10px;
    	margin-top:10px;
    	float:left;
    }
    
    #services {
    	height:180px;
    	width:290px;
    	margin-left:10px;
    	margin-top:10px;
    	float:left;
    }
    
    #quickbar ul, #services ul {
    	margin:0;
    	padding:0;
    	height: 180px;
    	width:290px;
    }
    
    #quickbar ul li, #services ul li {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	display:inline;
    	height:30px;
    	width:290px;
    	float:left;
    	line-height:30px;
    }
    
    #quickbar ul li a, #services ul li a {
    	display:block;
    	height:30px;
    	cursor:pointer;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:16px;
    	text-decoration:none;
    	color:#009;
    }
    
    #quickbar ul li a:hover, #services ul li a:hover, #address a:hover {
    	color:#900;
    	text-decoration:underline;
    }
    
    #contact {
    	height:180px;
    	width:auto;
    	margin-left:10px;
    	margin-top:10px;
    	float:right;
    }
    
    #address a {
    	cursor:pointer;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:16px;
    	text-decoration:none;
    	color:#009;
    }
    
    /* Contact Page */
    
    #contactdetails {
    	width:360px;
    	height:auto;
    	float:left;
    	margin:10px;
    	font-size:20px;
    	color:#00C;
    }
    
    #contactdetails strong {
    	font-size:16px;
    	font-weight:bold;
    	color:#000;
    }
    
    #map {
    	height:auto;
    	width:498px;
    	margin:10px;
    	float:right;
    	border: 1px solid #aaa;
    }
    
    #map p {
    	text-align:center;
    }
    
    #map a {
    	font-family:"Arial Black", Gadget, sans-serif;
    	text-decoration:none;
    	color:#000;
    }
    
    #map a:hover {
    	color:#00C;
    }
    
    #map iframe {
    	width:498px;
    	height:500px;
    }
    
    /*Form*/
    
    #contactform {
    	width:360px;
    	height:auto;
    	float:left;
    	margin:10px;
    	overflow:hidden;
    }
    
    #contactform p {
    	text-align:left;
    }
    
    #formdetails {
    	height:auto;
    	overflow:hidden;
    }
    
    #formdetails input {
    	border: 1px solid #aaa;
    	width:200px;
    	float:right;
    	margin-right:50px;
    	margin-top:3px;
    }
    
    #formdetails label {
    	float:left;
    	margin-top:3px;
    }
    
    #formdetails3 {
    	width:180px;
    	float:left;
    	height:auto;
    	overflow:hidden;
    }
    
    #formhide {
    	width:180px;
    	float:left;
    	height:auto;
    	overflow:hidden;
    }
    
    #formdetails3 option[value='other'] {
    }
    
    #formmessage {
    	margin-top:10px;
    	width:360px;
    	overflow:hidden;
    }
    
    #formmessage textarea{
    	width:250px;
    	height:100px;
    }
    
    
    /* Messages */
    
    .error {
    	margin: 15px 0;
    	padding: 10px 0 10px 15px;
    	
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-o-border-radius: 5px;
    	
    	border: 1px solid #961f19;
    	
    	box-shadow: inset 0 1px 1px #ed8d88, 0 1px 3px rgba(0, 0, 0, 0.4);
    	
    	color: #ffffff;
    	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    	background-color: #da4f49;
    	*background-color: #bd362f;
    	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
    	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
    	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
    	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
    	background-repeat: repeat-x;
    	border-color: #bd362f #bd362f #802420;
    	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
    	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    }
    
    .error ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    .error ul li {
    	margin: 5px 0;
    }
    
    .success {
    	padding: 10px 0 10px 15px;
    	
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-o-border-radius: 5px;
    	
    	border: 1px solid #10272e;
    	
    	box-shadow: inset 0 1px 1px #5f98b0, 0 1px 3px rgba(0, 0, 0, 0.4);
    	
    	color: #ffffff;
    	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    	background-color: #da4f49;
    	*background-color: #1e3d47;
    	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#266078), to(#1e3d47));
    	background-image: -webkit-linear-gradient(top, #266078, #1e3d47);
    	background-image: -o-linear-gradient(top, #266078, #1e3d47);
    	background-image: linear-gradient(to bottom, #266078, #1e3d47);
    	background-image: -moz-linear-gradient(top, #266078, #1e3d47);
    	background-repeat: repeat-x;
    }
    
    .success p {
    	margin: 0;
    Kind Regards
    Last edited by jscheuer1; 08-31-2013 at 03:07 AM. Reason: Format

  2. #2
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    PHP/HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Untitled Document</title>
    
    
    <link rel="stylesheet" type="text/css" href="CSS/style.css"/>
    <link rel="stylesheet" type="text/css" href="CSS/menu.css"/>
    
    <script type="text/javascript" src="js/js.js"></script>
    
    </head>
    
    <body>
    
    
    
    <?php include('includes/banner.php'); ?>
    
    
    
    <div id="content">
    
    
    	<div id="main">
        
        <img src="Images/exchange_title.fw.png">
        <p> Dear Thanet,</p>
        <p class="extitle">Get a Load of This!</p>
        
        <ul class="extext">
          <li>Super fast Broadband      </li>
          <li>Full feature telephone lines</li>
          <li>Extremely cheap call rates (<a href="#">see for yourself</a>), plus free calls between Kent Tec customers</li>
          <li>Help is just arround the corner and we are happy to assist</li>
          </ul>
        </p>
        
        
        <div id="signup">
        	<div id="signuptop"></div>
        
        	<div id="signmiddle">
        	  <p><img src="Images/standardpackage.fw.png" class="centre"></p>
        	  <p><img src="Images/pricetag2.fw.png" class="right"></p>
        	  <p>&nbsp;</p>
        	</div>
            
            <div id="signmiddle">
            	<div id="signbutton"><a href="javascript:void(0);" onclick="ReverseDisplay('signform-01');"><span>broadband and lines sign up</span></a></div>
            </div>
            
            <div id="signmiddle">
            	
                <div id="signform-01" style="display:none;">
    				<p>Entry 1 - blah, blah...</p>
    				<p>Entry 1 - blah, blah...</p>
    				<p>Entry 1 - blah, blah...</p>
    			</div>
    
                
            </div>
    
        	<div id="signupbottom"></div>      
        </div>
        
        
        
        <div id="signup">
        	<div id="signuptop"></div>
        
        	<div id="signmiddle">
        	  <p><img src="Images/businesspackage.fw.png" class="centre"></p>
        	  <p><img src="Images/pricetag1.fw.png" class="right"></p>
        	  <p>&nbsp;</p>
        	</div>
            
            <div id="signmiddle">
            	<div id="signbutton"><a href="#"><span>broadband and lines sign up</span></a></div>
            </div>
            
        	<div id="signupbottom"></div>      
        </div>
        
        
        
          
      </div>
    
    </div>
    
    <?php include('includes/footer.php'); ?>
    
    </body>
    </html>

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,131
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    Um, that's not a sprite. A sprite is a single image that is larger than the element that it's the background for, it changes appearance - say, on hover because the background position changes on hover. The main advantage of a sprite is that, since it's already loaded, simply shifting its position results in a seamless change of the appearance. It also generally saves on bytes, one image usually is less bytes than two images representing the same thing

    What you have are two separate background images, one for the div and one for hover of the a tag.

    That can work too, but unless you preload the background image for the hover, there will be a slight lag at times on hover before it appears for first time visitors.

    That has nothing to do with why it isn't working at all though. Two things are impacting that. One is a typo (missing closing parenthesis for the url, added below in red, from line #179 of kent-telephones.ismywebsite.co.uk/CSS/style.css):

    Code:
    #signbutton a:hover {
    	background-image:url(../Images/signupbuttonover.fw.png);
    	width:150px;
    	height:70px;
    }
    The other is that in order for the background image to show as intended, the a tag must be display block or inline-block. Since it's already inside a block level element (the div), block will be fine here, add the highlighted as shown (same file, line #174):

    Code:
    #signbutton a {
    	display: block;
    	width:150px;
    	height:70px;
    }
    BTW, since you already specify the width and height there, it need not be specified again in the :hover declaration, but doing it both places doesn't hurt anything.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    gemzilla (09-02-2013)

  5. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there gemzilla,

    to help you get started with "sprites" I have made an example for you, using your images.

    I prefer to put the background-image within a "span element" to obscure the link text.

    This ensures that your link will work in all possible scenarios.


    coothead
    Attached Files Attached Files

  6. The Following User Says Thank You to coothead For This Useful Post:

    gemzilla (09-02-2013)

Similar Threads

  1. How are sprite images used
    By ajfmrf in forum Graphics
    Replies: 5
    Last Post: 01-13-2013, 06:43 AM
  2. Sprite and http request
    By hannah sofia in forum CSS
    Replies: 5
    Last Post: 07-08-2011, 02:36 AM
  3. Sprite Image
    By oye in forum CSS
    Replies: 2
    Last Post: 12-17-2009, 06:54 AM
  4. Resolved 2 Level CSS Image Sprite Problem
    By nihilater in forum CSS
    Replies: 1
    Last Post: 10-15-2009, 05:56 AM
  5. CSS sprite help
    By lanta99 in forum CSS
    Replies: 1
    Last Post: 04-17-2009, 01:04 AM

Bookmarks

Posting Permissions

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