Boton Css con Imágenes PNG

[juampick]

Iniciado por Mikmoro

Lo de las dos filas, mira a ver si te gusta añadiendo estos dos selectores:

#buttons ul {width: 500px;float: right;margin-right: 60px;}

#buttons li {float:right; list-style-type:none; white-space:nowrap;margin-left: 60px;margin-top: 4px;}

Mikel.

1º de todo GRACIAS. Va tomando más forma el sitio, pero en un gran porcentaje gracias a vs! ja
Te dejo el código html y css para que lo mirés...
html:

Código:

<ul>
<li><a href="historia.html" class="historia"></a></li>
<li><a href="recursos.html" class="recursos"></a></li>
<li><a href="index.html" class="home activo"></a></li> 
<li><a href="contacto.html" class="contacto"></a></li> 
<li><a href="links.html" class="links"></a></li>	
<li><a href="galeria.html" class="galeria"></a></li> 	        
</ul>

css:

Código:

/*-------------------------------------- Buttons -------------------------------------------------------------------*/
#buttons {
padding:1em;
height:1.5em;
}
#buttons ul {
width: 500px;
float: right;
margin-right: 60px;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
margin-left:60px;
margin-top:4px;
}
#buttons li a.historia {
background: url('historia.jpg') no-repeat; 
background-position:center top; 
display:block;
height:28px;
width:98px;
}
#buttons li a.contacto {
background: url('contacto.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:105px;
}
#buttons li a.recursos {
background: url('recursos.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:108px;
}
#buttons li a.links {
background: url('links.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:55px;
}
#buttons li a.galeria {
background: url('galeria.jpg') no-repeat; 
background-position:center top;
display:block;
height:48px;
width:87px;
}
#buttons li a.home {
background: url('home.jpg') no-repeat; 
background-position:center top;
display:block;
height:28px;
width:62px;
}
#buttons li a.activo { background-position: center bottom;}
#buttons li a:hover { background-position: center;}

Modifiqué unas pequeñas cositas como los selectores, más de esto no lo pude achicar, pero seguro es posible.
Primero te quería consultar como hiciste para hacer esas 2 filas, el código parece muy simple pero no lo comprendo, como con esas líneas uno puede hacerlas.

El problema ahora de las 2 filas es que no quedan totalmente centradas, es decir que los botones no quedan uno debajo del otro, hay alguna manera de hacerlo? Lo que se me ocurre es dejar espacio en blanco, puede ser?

Espero que no te joda mucho más con esto. Un saludo y espero rta.

Bye

Juampi
PD: www.cincomasdos.com.ar/DEMO2/index.html y www.cincomasdos.com.ar/DEMO2/csslink2.css
PD2: Cómo se podría hacer para que en la clase a.activo no funcione la otra clase a:hover??