Hola a todos!!!! tengo el siguiente problema y luego de una semana sin poder solucionarlo ya me estoy volviendo locoooo
El tema es el siguiente:
Quiero hacer una barra horizontal que mida 779px por 39px de altura, con una imagen de fondo (bg_login.gif) que mide 1px por 39px. A su vez esta barra quiero que contenga de 3 botones (en el medio). Los botonoes son imagenes (30px por 39px). Cada uno tiene dos imagenes (para rollover, solo imagenes sin texto, serían como iconos). Encontre la siguiente css, y si bien el efecto rollover se realiza perfectamente, la imagenes me aparecen una abajo de la otra (verticalmente) y no una al lado de la otra como quiero yo.
Intente cambiando el atributo display: block; por inline. Tambien poniendo mas columnas o con la etiqueta div. Pero tampoco funciona.
Creo que el problema es el display: block; pero ya nose como solucionarlo.
Les pego el css y html que tengo. Espero desesperadamente su ayuda. chauuuuu
Código:
<style>
a#yaprak{ width: 30px; height: 39px;
background-image: url(imagenes/btn_homepage.gif);
text-decoration: none; display: block; }
a#yaprak:hover{ background-image: url(imagenes/btn_homepage_on.gif); }
a#yaprak2{ width: 30px; height: 39px;
background-image: url(imagenes/btn_email.gif);
text-decoration: none; display: block; }
a#yaprak2:hover{ background-image: url(imagenes/btn_email_on.gif); }
a#yaprak3{ width: 30px; height: 39px;
background-image: url(imagenes/btn_favorites.gif);
text-decoration: none; display: block; }
a#yaprak3:hover{ background-image: url(imagenes/btn_favorites_on.gif); }
</style>
Código:
<table width="779" height="39" background="imagenes/bg_login.gif" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="39" align="center"><a href="#" id="yaprak"> </a><a href="#" id="yaprak2"> </a><a href="#" id="yaprak3"> </a></td>
</tr>
</table>