Problema con menú horizontal

maikel_system · #1 (**permalink**) 03/05/2011, 12:23

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!

cristian_cena · #2 (**permalink**) 03/05/2011, 13:46

Hola maikel_system:
Prueba en principio pasando tus li a bloque, modifica...

Código CSS:

Ver original#novedades ul li {  display: block; }

Para que los pie de fotos se centren. agrega...

Código CSS:

Ver original#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<li>
<table>
<tr valign="middle" height="... altura constante para todas las tr...">
<td>
<a href="#">
<img src="images/box03.jpg" width="105px" height="105px" alt="profile image" />
</a>
</td>
</tr> 
</table>
<h2>profile name</h2>
</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.

maikel_system · #3 (**permalink**) 03/05/2011, 14:49

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

cristian_cena · #4 (**permalink**) 03/05/2011, 14:54

no estoy viendo el problema (centrado vertical) porque no levanta las imagenes, dale la ruta. Lo demás parece estar bien no?

maikel_system · #5 (**permalink**) 03/05/2011, 15:00

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.

cristian_cena · #6 (**permalink**) 03/05/2011, 15:11

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.

maikel_system · #7 (**permalink**) 03/05/2011, 15:30

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.

cristian_cena · #8 (**permalink**) 03/05/2011, 17:04

Hola maikel, entonces estamos hablando de centrado ¡¡"horizontal"!!

en tal caso dale un id al ul:

Código HTML:

Ver original<ul id="cajacentral">... li's ...<ul>

y los siguientes estilos:

Código CSS:

Ver original#cajacentral{
display:block; /*no se si hace falta pero por las dudas*/
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*/
margin:0 auto; /*para el centrado horizontal*/
overflow:hidden; /*porque los li estan flotados*/
}

Salutes.

maikel_system · #9 (**permalink**) 03/05/2011, 18:30

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.

cristian_cena · #10 (**permalink**) 03/05/2011, 19:13

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.

maikel_system · #11 (**permalink**) 04/05/2011, 19:24

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]