Foros del Web » Creando para Internet » CSS »

Problema con menú horizontal

Estas en el tema de Problema con menú horizontal en el foro de CSS en Foros del Web. Muy buenas, me llamo Miguel y soy nuevo por aquí. Tengo un problema con el centrado de una lista en CSS. Se trata de una ...
  #1 (permalink)  
Antiguo 03/05/2011, 13:23
Avatar de maikel_system  
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Pregunta Problema con menú horizontal

Muy buenas, me llamo Miguel y soy nuevo por aquí. Tengo un problema con el centrado de una lista en CSS.
Se trata de una lista de imágenes con un pie de foto asociado a cada uno. Las imágenes quiero que estén centradas verticalmente y a su vez los pies de imagen centrados con respecto a las mismas.

Pongo el código CSS y HTML por si me podéis echar una mano:

CSS

Código:
#novedades {
	height: 246px;
	width: 858px;
	background: black;
	border-top: 1px solid #FEC782;
	border-left: 1px solid #FEB154;
	border-right: 1px solid #FEB154;
	border-bottom: 1px solid #783C1C;
	overflow: hidden;
	text-align: center;
	margin: 0 auto;
	list-style:none; 
	padding:0; 
}

#novedades h1 {
	
	color: white;
}

#novedades ul {
	width: 858px;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	display: inline;
	text-align: center;
	list-style:none; 
}

#novedades ul li {
	width: 140px;
	float: left;
	text-align: center;
	display: inline; 
}

#novedades ul li a img {
	border: 3px solid #fff;
}

#novedades ul li a img:hover {
	border: 3px solid #FEE5C6;
}



#novedades ul li h2 {
	font: bold 11px arial, verdana, helvetica;
	margin-top: 10px;
	color: white;
}
HTML

Código HTML:
<html>

<head>
	<title>Título página</title>
	<link href="prueba.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-- Novedades -->
	
	<div id="novedades">
		<h1>Novedades</h1>
		<ul>

          <li>
            <a href="#"><img src="images/box01.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box02.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box03.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box04.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

          <li>
            <a href="#"><img src="images/box05.jpg" width="105px" height="105px" alt="profile image" /></a> 
            <h2>profile name</h2>
          </li>

        </ul>
	</div>

</body>

</html> 
Gracias de antemano, un saludo!
  #2 (permalink)  
Antiguo 03/05/2011, 14:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con menú horizontal

Hola maikel_system:
Prueba en principio pasando tus li a bloque, modifica...
Código CSS:
Ver original
  1. #novedades ul li {  display: block; }

Para que los pie de fotos se centren. agrega...
Código CSS:
Ver original
  1. #novedades ul li h2 {text-align:center;}

Para que tus imagenes se centren verticalmente y funcione en todos los navegadores (fuck ie6) me parece que la solución sería usar tablas, si, creo que no queda otra. Algo así sería el código (no lo probé pero calculo que funcionaría):

Código HTML:
Ver original
  1. <li>
  2. <tr valign="middle" height="... altura constante para todas las tr...">
  3. <td>
  4. <a href="#">
  5. <img src="images/box03.jpg" width="105px" height="105px" alt="profile image" />
  6. </a>
  7. </td>
  8. </tr>
  9. <h2>profile name</h2>
  10. </li>

Espero te sea útil, cualquier cosa postea y lo vemos. Si puedes postea el ejemplo funcionando en una url así lo podemos tocar con firebug y darte una respuesta mas precisa.

Saludos.
  #3 (permalink)  
Antiguo 03/05/2011, 15:49
Avatar de maikel_system  
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Problema con menú horizontal

Gracias por la respuesta. La verdad es que no me funciona, acabo de subir la página a un host a ver si consigues ver el fallo:
http://alternativefuzz.net16.net/prueba.html
  #4 (permalink)  
Antiguo 03/05/2011, 15:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con menú horizontal

no estoy viendo el problema (centrado vertical) porque no levanta las imagenes, dale la ruta. Lo demás parece estar bien no?
  #5 (permalink)  
Antiguo 03/05/2011, 16:00
Avatar de maikel_system  
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Problema con menú horizontal

Ahora están las imágenes. El problema es que los elementos de la lista (imagen+pie de foto) no están alineados verticalmente con respecto a la caja principal.
  #6 (permalink)  
Antiguo 03/05/2011, 16:11
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con menú horizontal

ahora lo veo, pero sigo sin entender . La caja principal es <ul>? o es #novedades? haber, te pido un último esfuerzo, pasa una captura tipo antes/despues asi me ayudas a visualizar el problema porque verticalmente lo veo bien, mas no horizontalmente, lo que solucionas poniendo width:...; y margin:0 auto; a la caja que quieras centrar.

Saludo.
  #7 (permalink)  
Antiguo 03/05/2011, 16:30
Avatar de maikel_system  
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Problema con menú horizontal

La caja principal es #novedades, que engloba a la lista de imágenes y sus pies de foto. El problema es que el ancho de #novedades no está ocupado por igual hacia la izquierda que hacia la derecha... no sé si así lo entiendes. El probado lo que me dices, a fijar el ancho de todas las cajas y el margen... pero sigue sin funcionar.
  #8 (permalink)  
Antiguo 03/05/2011, 18:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con menú horizontal

Hola maikel, entonces estamos hablando de centrado ¡¡"horizontal"!! en tal caso dale un id al ul:

Código HTML:
Ver original
  1. <ul id="cajacentral">... li's ...<ul>

y los siguientes estilos:

Código CSS:
Ver original
  1. #cajacentral{
  2. display:block; /*no se si hace falta pero por las dudas*/
  3. width:700px; /*dale lo que necesites, recuerda para los li que el ancho total de una caja es igual a la suma de margin+padding+width+border*/
  4. margin:0 auto; /*para el centrado horizontal*/
  5. overflow:hidden; /*porque los li estan flotados*/
  6. }

Salutes.
  #9 (permalink)  
Antiguo 03/05/2011, 19:30
Avatar de maikel_system  
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Problema con menú horizontal

Sólo funciona en el caso de que la #cajacentral tenga 700px de ancho, que justamente son los 140px X 5 de cada elemento de la lista, con lo cual no hace ningún centrado, ya que al aumentar el tamaño de la #cajacentral se vuelven a descentrar.
  #10 (permalink)  
Antiguo 03/05/2011, 20:13
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con menú horizontal

en realidad si hace el centrado, #cajacentral se centra respecto de su ancestro inmediato. además de que si das un width a una caja (#cajacentral) esta no crecerá en ancho sino que el contenido que no quepa pasará a acomodarse por debajo de lo que si cabió.

No sabría hacer que n elementos flotados se centren en un contenedor líquido sin estar contenidos en un contenedor fijo. ¿esto es lo que quieres hacer?

Tal vez tengas en mente hacer algo de lo que no estoy enterado, en tal caso plantealo.

Saludos.
  #11 (permalink)  
Antiguo 04/05/2011, 20:24
Avatar de maikel_system  
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Problema con menú horizontal

Mira, ahora le he puesto a la caja principal un ancho de 1000px y al contenedor inferior (el que contiene a la lista) un ancho de 900px y no sale centrada :S

[URL="http://alternativefuzz.net16.net/prueba.html"]http://alternativefuzz.net16.net/prueba.html[/URL]

Etiquetas: horizontal
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:54.