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 1 of 1
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation aligning a button correctly with out using floats?

    hi all

    im trying to get the use code buttons to go along side the code and descriptions and not underneath, ive tried using floats but they mess the page up does anyone know how to position them?

    here is my html
    Code:
                        <div class="discountcode">
                        <div class="codeDetails">
    					<span class="codeID"><?php echo $row['code']?>:</span>
    					<?php echo $row['details']."<br /><span style='color:#FF0000'>Exipres in: <b>".findTime($timestamp, $format)."</b></span>"?>
                        </div>
                        <span class="usecodeBtn">
                    	<a id="usecode" href="<?php echo htmlspecialchars($row['codeLink'])?>" target="_blank" title="Use Code"><span>Use Code</span></a>
                        </span>
    					</div>
    and the css
    Code:
    #usecode
    {
      display: block;
      width: 120px;
      height: 29px;
      background: url("/images/Use Code_0.png") no-repeat 0 0;
      margin-top:5px;
    }
    
    #usecode:hover
    { 
      background: url("/images/Use Code_1.png") no-repeat 0 0;
    }
    
    #usecode span
    {
      position: absolute;
      top: -999em;
    }
    .discountcode{width:510px; margin-bottom:5px;border:1px dashed #CCCCCC; padding:5px;}
    .storeName{font-weight:bold; color:#CC0000; margin-top:10px; margin-bottom:10px; font-size:14px;}
    .codeID{margin:0; padding:0; font-size:12px; font-weight:bold; padding-top:3px; padding-bottom:3px;}
    .codeDetails{width:370px;}
    .usecodeBtn{width:100px; margin-top:10px;}
    any help is appreciated
    thanks
    Last edited by LJackson; 09-12-2011 at 09:37 PM.


 

Posting Permissions

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