adding some spaces in between two images (buttons)

yellowsayshello

New Member

Join Date: Jul 2014
Posts: 1

adding some spaces in between two images (buttons)

Jul 21 '14, 05:09 AM

Hello

good evening to you, and thank you for reading this.

I am trying to have some spaces in between two button images

but I find it very very very difficult..... :(

HTML
------------------------------------------

Code:

<div>
<table class="image" align="center" >  
  <tr>
   <td> 
  <body onload="MM_preloadImages('http://yellowsayshello.smugmug.com/photos/i-c5HvKkk/0/S/i-c5HvKkk-S.png','http://yellowsayshello.smugmug.com/photos/i-Rfz8JLL/0/S/i-Rfz8JLL-S.png')">

  <div align="center">
  <table class="image" align="center" >  
  <tr>
   <td> 
 <div id="containter">
 <table class="image" align="center" >
 
   <div id="left">
   <a class= "package"  href="http://yellowsayshello.smugmug.com/Pricing/n-g234X" ></a>
    </div>
	<div id="left">   
  <a class="promo" href="http://yellowsayshello.smugmug.com/PROMOTION"></a>
  </div>


CSS
---------------------------------------------------
#container {width:0�;}
#left {float: left; width: 50%}
#right {float:left; width: 50%;clear:both}


a.package:link, .package {
	width:400px;
	height:89px;
	display: block;
	background-image:url(http://yellowsayshello.smugmug.com/photos/i-bCLghdG/0/S/i-bCLghdG-S.png);
  margin:10px 0 10px 0;
}

a.package:hover  {
  	width:400px;
	height:89px;

	display: block;
	background-image:url(http://yellowsayshello.smugmug.com/photos/i-Rfz8JLL/0/S/i-Rfz8JLL-S.png);
  margin:10px 0 10px 0;
}
a.promo:link, .promo  {
	width:400px;
	height:89px;
	display: block;
	background-image:url(http://yellowsayshello.smugmug.com/photos/i-JnxLVPR/0/S/i-JnxLVPR-S.png);
  margin:10px 0 10px 0;
}
a.promo:hover  {
	
  	width:400px;
	height:89px;
	display: block;
	background-image:url(http://yellowsayshello.smugmug.com/photos/i-c5HvKkk/0/S/i-c5HvKkk-S.png);
  margin:10px 0 10px 0;
}

Last edited by Rabbit; Jul 21 '14, 06:20 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data.

Tags: None

nomad

Recognized Expert Contributor

Join Date: Mar 2007

Posts: 664
#2

Jul 21 '14, 06:49 PM

Add a Class called image
then add padding

Code:

.images { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 5px; padding-bottom: 5px; }

Hope this helps
damon
Comment

adding some spaces in between two images (buttons)

adding some spaces in between two images (buttons)

Comment