Centrar igual para todos

samy4ever · #1 (**permalink**) 27/12/2008, 12:50

Hola!

Tengo un menú horizontal que es así:

http://img301.imageshack.us/my.php?image=problemaup4.jpg

El problema es que entre una opción y otra me deja, en unos casos más espacio, y en otro, menos.

A mi me gustaría que quedara, repartido a lo ancho y que se viera uniforme, es decir, que se viera bien repartido (no como ahora que hay opciones más juntas que otras etc.) Es decir, que quedara más o menos así:

http://img301.imageshack.us/my.php?image=solucionmt8.jpg

Mi código es:

Código:

	
	<table align="center" id="options">
		<tr>
			<td id="inicio"> <a> INICIO </a> </td>
			<td id="historia"> <a> HISTORIA </a> </td>
			<td id="productos"> <a> PRODUCTOS </a> </td>
			<td id="maquinaria"> <a> MAQUINARIA </a> </td>
			<td id="calidad"> <a> CALIDAD </a> </td>
			<td id="localizacion"> <a> LOCALIZACIÓN </a> </td>
			<td id="contacto"> <a> CONTACTO </a> </td>
		</tr>
	</table>

Y la CSS:

Código:

#options{
max-width: 870px;
margin-right: 60px;
text-align: center;
height: 14px;
margin-top: 14px;
text-decoration: underline; 
}

#options td {
width: 124px;
}

Como veis inicio y historia tiene mucho más espacio que productos y maquinaria. Alguna idea?

Muchas gracias!

kseso? · #2 (**permalink**) 27/12/2008, 13:36

Prueba a cambiar el width de "td"pon un padding lateral.

Aresillo · #3 (**permalink**) 27/12/2008, 14:07

porque no lo haces con divs??

Aresillo!!

willyfc · #4 (**permalink**) 27/12/2008, 18:48

creo que eso deberías hacerlo con divs y con una lista, es solo una sugerencia pero tu código quedaría de esta manera:

Código:

#options{
max-width: 870px;
margin-right: 60px;
text-align: center;
height: 14px;
margin-top: 14px;
text-decoration: underline;
text-align:center;
}

#options ul {
list-style:none;
margin:0;
padding:0;
}
#options ul li{height:auto;display:inline; padding-right:30px}

Código HTML:

<div id="options">
	<ul>
		<li>Inicio</li>
		<li>Historia</li>
		<li>Productos</li>
		<li>Maquinaria</li>
		<li>Calidad</li>
		<li>Localizacion</li>
		<li>Contacto</li>
	</ul>
</div>

pruebalo haber si te sirve

y la otra solución a como lo estas haciendo es como dice Kseso?, en vez de width usar padding

Código:

#options td {
padding-right:30px
}

sweetlydark · #5 (**permalink**) 27/12/2008, 18:54

Cita:

Iniciado por Aresillo

porque no lo haces con divs??

Aresillo!!

Yo no usuaria <div> ya que sera una complicación no deseado. Las mayoría de los navegaciones hoy en dia usa <ul> y hace una de cosas con ellas (como los tab menus), que siempre uso ellas para los mio.

Pero al tema creo que kseso tiene la idea correcta, solo ponle un padding lateral; usando % y debe acomodar todo según el espacio.

*willyfc tiene el idea

Mikmoro · #6 (**permalink**) 27/12/2008, 19:25

Cita:

Iniciado por sweetlydark

Yo no usuaria <div> ya que sera una complicación no deseado. Las mayoría de los navegaciones hoy en dia usa <ul> y hace una de cosas con ellas (como los tab menus), que siempre uso ellas para los mio.

No tienes el español como lengua materna, ¿verdad? o esa sensación me da.

Lo que willyfc propone es una lista desordenada (ul) dentro de un div, por lo que tu respuesta queda casi un poco extraña.

sweetlydark · #7 (**permalink**) 27/12/2008, 19:34

Uno si, no es mi prime idioma y dos era una repuesta a lo que escribió Aresillo y lo de willyfc (lo cual es el opción ideal para mi), no estaba cuando escribía mi mensaje.

lol Asi pasa con los foros aveces :P

Mikmoro · #8 (**permalink**) 27/12/2008, 19:37

Ah, pues por eso me extrañaba tu respuesta. Aclarado. En ese caso es mejor editar el mensaje para que no quede casi como absurdo.

sweetlydark · #9 (**permalink**) 27/12/2008, 19:42

lol Ok gracias ;)

kseso? · #10 (**permalink**) 27/12/2008, 20:14

¿Y por qué no sugerí el uso de <ul>, <ol>, <li> con su correspondiente contenedor <div> ya que parece lo más indicado?

Como alguien dijo en su día, primero la solución a la duda, el aleccionamiento con posterioridad, o algo por el estilo

Pues porque no muestra más código que ese, ni css ni html, y de nada servirá que cambie una sola tabla si el resto de la página sigue lleno de ellas.
Y en segundo lugar, por la misma razón que todos obviamos mencionar las carencias en los <a>.
No tocaba en esta pregunta.

samy4ever · #11 (**permalink**) 28/12/2008, 10:10

Hola!

Bueno, antes que nada, gracias por todos los comentarios. El padding en la tabla no me funcionó, y probé con el div y la lista y ahora si que queda el mismo margen entre palabra y palabra. Ahora estoy haciendo que me quede todo eso centrado en el ancho del contenedor. Voy probando ahora +, ahora - píxels aquí, hasta que me quede centrado... Hay alguna manera de hacerlo automático?

El valor que voy probando es
#options{
margin-right: 90px;
...

Y unas consideraciones sobre lo que habeis dicho jeje
La web está empezada (nada más) aunque mi intención no era hacerla con tablas... Sé que no debería hacerse con tablas normalmente. Busque en qué casos sería bueno usarlas y en cuáles no, y vi que para el "tabulado" eran "buenas". Así que pensaba que este sería uno de los casos. Pero vaya, no es mi intención hacer todo con tablas :)

Sobre el <a>... Bueno, lo puse solo para acordarme yo de qué tenía que ponerlos jejeje Tengo que ponerlos bien aún!

Por último, muchas gracias a todos por vuestros comentarios y apreciaciones, ayudan a qué uno aprenda :)

kseso? · #12 (**permalink**) 28/12/2008, 10:47

Hola de nuevo, Samy4ever.

La función de las tablas no es "para el tabulado", así, en general, sino para presentar datos tabulados, esto es, mostrar una serie de datos ordenados en filas y columnas con cierta separación uniforme entre ellos.

Y la solución que te proponía tan escuetamente (las prisas del momento) era poner esto en tu css

Cita:

#options td {padding: 0 10px; /*por ejemplo: 0px arriba y abajo y 10px a izq y drch*/}

La anchura de cada td será la necesaria para contener cada palabra, y la separación entre palabras sería en el ejemplo de 20px.
Un saludo

Aresillo · #13 (**permalink**) 28/12/2008, 11:02

Cita:

Iniciado por sweetlydark

Yo no usuaria <div> ya que sera una complicación no deseado. Las mayoría de los navegaciones hoy en dia usa <ul> y hace una de cosas con ellas (como los tab menus), que siempre uso ellas para los mio.

Pero al tema creo que kseso tiene la idea correcta, solo ponle un padding lateral; usando % y debe acomodar todo según el espacio.

*willyfc tiene el idea

Me refería a hacer como lo ha puesto willy, lo que pasa que me parecía un poco heavy hacérselo...

Aresillo!!

kseso? · #14 (**permalink**) 28/12/2008, 11:22

¿Qué y de dónde has copiado, Mik?

gracias por la corrección

Mikmoro · #15 (**permalink**) 28/12/2008, 11:39

¿Copiado el qué?

samy4ever · #16 (**permalink**) 29/12/2008, 07:56

Bueno, al final lo dejé en las listas. Muchas gracias a todos por las aportaciones!

El código final me quedó:

Código:

<div id="options">
	<ul>
		<li>Inicio</li>
		<li>Historia</li>
		<li>Productos</li>
		<li>Maquinaria</li>
		<li>Calidad</li>
		<li>Localizacion</li>
		<li>Contacto</li>
	</ul>
</div>

Código:

#options{
max-width: 870px;
text-align: center;
height: 14px;
margin: auto;
margin-top: 14px;
text-decoration: underline;
}

#options ul {
list-style: none;
margin: 0;
padding: 0;
padding-left: 28px;
}
#options ul li{
height: auto;
display: inline; 
padding-right: 42px
}

Tube que agregar el padding-left: 28px; para que me quedara del todo centrado.

Mil gracias!