Foros del Web » Creando para Internet » CSS »

Centrar igual para todos

Estas en el tema de Centrar igual para todos en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 27/12/2008, 12:50
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Centrar igual para todos

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!
  #2 (permalink)  
Antiguo 27/12/2008, 13:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar igual para todos

Prueba a cambiar el width de "td"pon un padding lateral.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 27/12/2008, 14:07
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Centrar igual para todos

porque no lo haces con divs??

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #4 (permalink)  
Antiguo 27/12/2008, 18:48
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar igual para todos

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
}
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 27/12/2008, 18:54
Avatar de sweetlydark  
Fecha de Ingreso: septiembre-2008
Mensajes: 391
Antigüedad: 9 años, 2 meses
Puntos: 10
Respuesta: Centrar igual para todos

Cita:
Iniciado por Aresillo Ver Mensaje
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

Última edición por sweetlydark; 27/12/2008 a las 19:43 Razón: por cosas de la red lee mas abajo
  #6 (permalink)  
Antiguo 27/12/2008, 19:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar igual para todos

Cita:
Iniciado por sweetlydark Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 27/12/2008, 19:34
Avatar de sweetlydark  
Fecha de Ingreso: septiembre-2008
Mensajes: 391
Antigüedad: 9 años, 2 meses
Puntos: 10
Respuesta: Centrar igual para todos

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
  #8 (permalink)  
Antiguo 27/12/2008, 19:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar igual para todos

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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 27/12/2008, 19:42
Avatar de sweetlydark  
Fecha de Ingreso: septiembre-2008
Mensajes: 391
Antigüedad: 9 años, 2 meses
Puntos: 10
Respuesta: Centrar igual para todos

lol Ok gracias ;)
  #10 (permalink)  
Antiguo 27/12/2008, 20:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar igual para todos

¿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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 28/12/2008, 10:10
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Centrar igual para todos

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 :)
  #12 (permalink)  
Antiguo 28/12/2008, 10:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar igual para todos

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 28/12/2008 a las 11:20
  #13 (permalink)  
Antiguo 28/12/2008, 11:02
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Centrar igual para todos

Cita:
Iniciado por sweetlydark Ver Mensaje
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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #14 (permalink)  
Antiguo 28/12/2008, 11:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar igual para todos

¿Qué y de dónde has copiado, Mik?
gracias por la corrección
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 28/12/2008, 11:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar igual para todos

¿Copiado el qué?
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 29/12/2008, 07:56
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Centrar igual para todos

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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:53.