Jump to content

Text Not Centering Over Background Image


kreatur
 Share

Recommended Posts

Hi, i'm new at this, so don't get scared by my code.This is the site uploaded for test purposes on a free host: http://kreatur.0fees.net/galerie.htmlNow, the problem is i can't find a way to make that text come down to the center of the button from the gallery. My code may be messed up, but i can't find a solution to fix it. Top padding only lowers the text on the first row, while the text on the second row comes down together with the background and the thumbnailPiece of the HTML for the upper row:

  <td>	<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<img src="galerie/usi_de_garaj_015-1.png" width="187" height="124" /></a>		<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<span class="butonel1">Usi de garaj Albe&Color</span>	</a>	<a href="galerie/usi_de_garaj_015.jpg" rel="lightbox[galerie]" title="my caption"></a></td>  <td>  	<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<img src="galerie/usi_de_garaj_015-1.png" width="187" height="124" /></a>		<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<span class="butonel2">Usi de garaj Imitatie Lemn</span>	</a>	<a href="galerie/usi_de_garaj_015.jpg" rel="lightbox[galerie]" title="my caption"></a></td>	  <td>  	<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<img src="galerie/usi_de_garaj_015-1.png" width="187" height="124" /></a>		<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]">	<span class="butonel3">Usi de garaj Meranti</span>	</a>	<a href="galerie/usi_de_garaj_015.jpg" rel="lightbox[galerie]" title="my caption"></a></td>

messed up CSS :]

.butonel3, .butonel2, .butonel1, .butonel4, .butonel5, .butonel6{	background-image: url('images/buton-interior.png');	width:187px;	height:32px;	float:left;	background-repeat: no-repeat;	text-decoration: none;	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #FFFFFF;	font-weight: bold;	text-align: center}.butonel1:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #000000;	text-decoration: none;}.butonel2:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #000000;	text-decoration: none;}.butonel3:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #000000;	text-decoration: none;}etc. for the second row

Edited by kreatur
Link to comment
Share on other sites

add a line-height:.butonel3, .butonel2, .butonel1, .butonel4, .butonel5, .butonel6 {background-image:url(images/buton-interior.png);background-repeat:no-repeat;color:#FFFFFF;float:left;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;height:32px;text-align:center;text-decoration:none;width:187px;line-height:32px;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...