Problema con <a> class.

[TryHard]

Bueno desde hace una semana ando armando una pequeña seccion de ayuda para mi web.
Entonces en la página de inicio voy a colocar ejemplo: English - Spanish y otros idiomas, para que la seccion quede en varios idiomas..pero eso lo haré con php..el problema es el siguiente..En la pagina del home tengo esto:

Código HTML:

<center><a class="english" href="?language=1"></a><a class="spanish" href="?language=2"></a></center>
 

En la cual la class 'english' y 'spanish' se definiria de la siguiente manera:

Código CSS:

a.english {
display: block;
width: 332px;
height: 112px;
background: transparent url(../img/english-normal.png)
}
a.english:hover {
display: block;
width: 332px;
height: 112px;
background: transparent url(../img/english-hover.png)
}
a.spanish {
display: block;
width: 342px;
height: 112px;
background: transparent url(../img/spanish-normal.png)
}
a.spanish:hover {
display: block;
width: 342px;
height: 112px;
background: transparent url(../img/spanish-hover.png)
}
 

El probrema es sobre las imagenes y los hovers, que el english y el spanish, los coloco en una misma linea y los trato de centrar con <center>, pero en vez de quedar los 2 en una misma linea me quedan uno debajo del otro, como si estuviese usando un <br> xD.

Intenté usando float:left y funcionó pero me quedaba para la izquierda..lo que quiero es que me queden los 2 en una linea y centrados xD

Bueno eso es todo..

Gracias de antemano :P

[uikekarallo]

es por la propiedad block. estás convirtiendo los anclas en elementos de bloque.

y mejor que

Código HTML:

<center>
  <a class="english" href="?language=1"></a>
  <a class="spanish" href="?language=2"></a>
</center> 

utiliza

Código HTML:

<p style="text-align: center;">
  <a class="english" href="?language=1"></a>
  <a class="spanish" href="?language=2"></a>
</p> 

un saludo.

[TryHard]

Gracias por la rapida respuesta uikekarallo :)

Hice lo que dijiste.. ahora me quedaron las 2 imagenes 'english y spanish' de igual manera uno debajo del otro, pero a la izquierda..nisiquiera centrado.

Ahora sobre lo de display:block - que deberia poner en vez de eso?

Esta es la web, por si quieres visualizar mas el codigo: http://mxxx.zzl.org/help/

[sanxuan]

Tú mismo estás haciendo que esto ocurra así al declarar la propiedad display:block.
Eso hace que los enlaces <a> ocupen la totalidad del ancho disponible y fuerzan el salto de línea antes de mostrar el siguiente elemento.
Como tú has apuntado una solución sería hacer flotar los elementos.
Otra sería declararlos como display: inline-block. Esto haría que se mostrasen uno a continuación del otro aunque con el tamaño que tu les has dado.
Asegúrate de que la suma del tamaño de los elementos mas bordes, padding y margin quepan en el ancho de la página.

Perdón por ser tan lento. Ya habían contestado cuando he enviado la respuesta.

[TryHard]

Eso si que funciono sanxuan :)

Muchas gracias!

Lo unico que me preocupa es que yo chequeé esta web: http://www.quirksmode.org/css/display.html

Y dice que la propiedad inline-block podria no ser compatible con IE6 ni IE7, y me quiero asegurar que haya la maxima compatibilidad con todos los navegadores, tu crees que el uso de inline-block pueda ser un problema para los usuarios de IE6 o IE7?

Y si ese es el caso, no existe otra solución?, y bueno sino se puede, lo dejaré con inline-block.

[uikekarallo]

si, se me pasó decirte que lo cambiaras por inline-block. aunque lo de utilizar <p> en lugar de <center> te lo sigo recomendando, ya que el segundo está en desuso.

no estoy completamente seguro, pero en ie creo que funcionaría utilizando display: inline (o directamente sin utilizar el método display).

prueba con IE Tester... es lo que utilizo yo para comprobar la compatibilidad en ie desde la versión 5.5 hasta la 9.

un saludo.

[sanxuan]

Antes de nada, confirmo tus sospechas. Dreamweaver me dice que tu código tendra problemas con IE6 si usas la propiedad inline-block. Yo no me preocuparía mucho por ello. Estamos en la fase beta de la versión 9.
Mis dotes de adivino menguan con los años, a si que no sé lo que vas a hacer con esos enlaces. Si no piensas incluir dentro de ellos ningún texto, puedes crear una imagen transparente (un .gif por ejemplo). Basta con que tenga un sólo pixel. Incluimos esta imagen en cada enlace y le damos el tamaño adecuado.

Tu HTML quedaría como sigue:
<center>
<a class="english" href="?language=1"><img alt="Para qué sirve este enlace" src="miImagenTransparente.gif" width="332" height="112"/></a><a class="spanish" href="?language=2"><img alt="Para qué sirve este enlace" src="miImagenTransparente.gif" width="342" height="112"/></a>
</center>

Ya te digo que sería sólo para curarse en salud si necesitas asegurar la compatibilidad con IE6. En este caso no necesitarías la propiedad display:inline-block.
Por último, también te recomiendo ir abandonando la etiqueta <center> y apostar por posicionar mediante CSS los elementos de tu página. Te permitirá cambiar la apariencia de tus páginas sin tocar para nada el HTML. Aunque parezca más complicado al principio, merece la pena.

[Kurozaki]

yo acostumbro usar otra hoja de estilos para IE 6.

Pero la unica diferencia de esta hoja de estilos, es que, en todas mis paginas acostumbro agregar un div que diga:

Hola usuario.
Para visualizar bien y sin errores esta pagina, te recomendamos que actualizes tu version de Internet explorer o uses otro explorador.

Y en este mismo le dejo enlaces a otros navegadores o a IE 8.

Este div, a mis paginas normales, con CSS le doy un display hidden, para que se oculte y no lo muestre.

Pero cuando el usuario usa IE 6, usando un hack
<!--[if IE6]><[endif]-->

y continuo pues. cuand un usuario usa IE 6, con CSS le pongo display block y position absolute.

Con esto logroque cuando un usuario usa IE6 le salga el div que mencione arriba, y si no usa IE6 no sale nada :)

Y de esta manera y en resumen te digo que:
-Cuando un usuario usa IE6, le sale ese div y lo invita a que use otro navegador o actualize su IE y en este mismo div, le adviertes que es para que visualize sin errores y de manera correcta la pagina.
-Cuando el usuario no usa IE6 (quiere decir que proprobabilidad de un 80%)esta usando un navegador que sera compatible con la actualidad y la web no se mostrara con problemas :)