Foros del Web » Creando para Internet » CSS »

Lista horizontal centrada en un div

Estas en el tema de Lista horizontal centrada en un div en el foro de CSS en Foros del Web. Hola, lo primero os pongo el codigo: Código HTML: <div id= "iconhoriz" align= "center" > <ul class= "icons" > <li> <a href= "http://www.vendermiweb.com" > <img ...
  #1 (permalink)  
Antiguo 30/07/2008, 02:08
 
Fecha de Ingreso: abril-2008
Mensajes: 262
Antigüedad: 9 años, 8 meses
Puntos: 5
Lista horizontal centrada en un div

Hola, lo primero os pongo el codigo:

Código HTML:
<div id="iconhoriz" align="center">
    			<ul class="icons">
                
                                       
                       <li>
                          <a href="http://www.vendermiweb.com">
                          <img src="img.png" title="Inicio" alt="Inicio" width="32" height="32"><br>
                          <span class="sispan">Inicio</span>
                          </a>
                        </li>

                        
                                  
                       <li>
                          <a href="http://www.vendermiweb.com">
                          <img src="img.png" title="Foro" alt="Foro" width="32" height="32"><br>
                          <span class="sispan">Foro</span>
                          </a>
                        </li>
                        
                         </ul>

        </div> 

Y el CSS:

Código HTML:
#iconvert,
#iconhoriz {
	margin-top: 0px;

}

#iconvert .icons,
#iconhoriz .icons{
	padding:  0;
	
}	
#iconhoriz {
	padding:0pt 15px 0pt 0pt;
	background-position: 100% 100% !important;
	
}	

#iconvert {
	padding:15px 0pt 0pt 0pt;
	background-position: 0% 0% !important;
	
}	

/* link settings */
#iconvert li,
#iconhoriz li {

  float: left;
	text-align: center;
	margin:0;
	padding-right: 20px;
	padding-top: 10px;
  list-style: none;
	background: none;
	position: relative;
	display : inline;	
}


/*icon settings*/
#iconhoriz .icons {
	cursor: pointer;
	overflow: hidden;
	padding:  0;
	margin: 0px;
		
}
#iconvert .icons {
	cursor: pointer;
	overflow: hidden;
		padding:  0;
		margin: 0px;
}

/* And Now lets set up the caption box */
#iconhoriz .sispan,
#iconevert .sispan {
	padding: 0px;
	font-weight: bold;
    text-decoration: none;
    
}

img{
	border: none;
}
#iconhoriz a{
	height: 100%;
  text-decoration: none;
  display : inline;
    
}

#iconvert a{
	left:0;
	bottom: 0;
	width: 100%;
	display: block;
	background-position: 0 100%;
        text-decoration: none;
}


El problema es que quiero que la lista me salga centrada dentro del contenedor iconhoriz y siempre me sale alineada a la izquierda, he probado a cambiar el float:left; por center pero entonces de descuadra y ya no sale una lista horizontal.


Un saludo y gracias!
  #2 (permalink)  
Antiguo 30/07/2008, 02:33
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: Lista horizontal centrada en un div

Buenas,

Si estás usando los elementos li como elementos de línea no es necesario que les apliques un float.

Al ser elementos de línea puedes centrarlos en su contenedor con text-align: center. Su contenedor es el elemento ul así que a ese elemento debes aplicar el estilos ahí y no al #iconhoriz.


Otra opción sería dejar los li como elementos de bloque (quitarles el display inline que les has aplicado) y flotarlos pero entonces para que se visualicen centrados deberás asignar una anchura específica a su contenedor (ul). No te sirve en este caso el text-align: center porque esto no centra contenido de bloque. Para centrar un contenedor de bloque debes asignarle una anchura y un margen izquierdo y derecho con un valor de auto.

un saludo
  #3 (permalink)  
Antiguo 30/07/2008, 02:51
 
Fecha de Ingreso: abril-2008
Mensajes: 262
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Lista horizontal centrada en un div

La segunda opción no me sirve, porque el número de elementos como la anchura de la lista es variable en función del tipo de usuario.

Y sobre la primera opción, al quitar el float se descuadra, pasa cada icono a una linea diferente, pero de forma alterada, al quitar el inline hace la lista en vertical, pero al quitar el float hace una especie de lista vertical pero descuadrada.

Se os ocurre algo?

Un saludo!
  #4 (permalink)  
Antiguo 30/07/2008, 03:09
Avatar de imagen021  
Fecha de Ingreso: julio-2008
Ubicación: A Coruña
Mensajes: 74
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Lista horizontal centrada en un div

Hola! la respuesta es fácil. Como no defines el ancho total de tu <ul>, entonces toma el 100% de la página donde se muestra (o del div que lo contiene)... entonces, al hacer que los <li> floten a la izquierda para que estén uno al lado del otro, estos empiezan a la izquierda del UL ignorando el text-align:center que pueda tener el UL.

Solución:
marcar un ancho fijo al UL tal como width: (si cada li mide 50px multiplicar 50 por la cantidad de li que hay) y al margin:0px cambiarlo por margin: 0 auto (con esto harás que el UL respete el mismo margen de izquierda y derecha.

Saludos!!
  #5 (permalink)  
Antiguo 30/07/2008, 03:15
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: Lista horizontal centrada en un div

Cita:
Iniciado por icisneros Ver Mensaje
La segunda opción no me sirve, porque el número de elementos como la anchura de la lista es variable en función del tipo de usuario.
ok

Cita:
Iniciado por icisneros Ver Mensaje
Y sobre la primera opción, al quitar el float se descuadra, pasa cada icono a una linea diferente, pero de forma alterada, al quitar el inline hace la lista en vertical, pero al quitar el float hace una especie de lista vertical pero descuadrada.
En cada item de la lista tienes insertada una imagen, un salto de línea y un texto en un span. Un elemento de línea no puede (o no debería) contener un salto de línea dentro de sí mismo. Eso es lo que te hace ese descuadre raro que dices. Si quitas el salto de línea entre la imagen y el span verás que se visaliza como quieres.

Si esas imágenes son íconos decorativos no deberías insertarlos como imagen en el contenido si no desde la hoja de estilos.

Código HTML:
<div id="iconhoriz" align="center">
    			<ul class="icons">
                
                                       
                       <li title="Inicio">
                          <a href="http://www.vendermiweb.com">
                                                <span class="sispan">Inicio</span>
                          </a>
                        </li>

                        
                                  
                       <li title="Foro">
                          <a href="http://www.vendermiweb.com">
                         
                          <span class="sispan">Foro</span>
                          </a>
                        </li>
                        
                         </ul>

        </div> 
Código:
#iconhoriz li {

/*  float: left;*/
	text-align: center;
	margin:0;
	padding-right: 20px;
	padding-top: 10px;
  list-style: none;
	background: none;
	position: relative;
	display : inline;
	background-image: url(img.png);
	background-repeat: no-repeat;
}
Eso, tal cual, se visualiza correctamente
  #6 (permalink)  
Antiguo 30/07/2008, 03:20
 
Fecha de Ingreso: abril-2008
Mensajes: 262
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Lista horizontal centrada en un div

He añadido:

Código HTML:
#iconhoriz ul {
  width: 650px;
  margin: 0 auto;
  text-align: center;
}
Y he cambiado el margin: 0px; de li por magin: 0 auto;

Pero aún así no me funciona, aparentemente se mueve un poco a la derecha, pero no queda centrado.

¿Qué creeis que puede ser?

Un saludo!
  #7 (permalink)  
Antiguo 30/07/2008, 03: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: Lista horizontal centrada en un div

Prueba esto:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>icisneros</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
body {text-align: center;}
.contenedor {margin: 30px;
font-weight: bold;
}
ul {list-style-type: none;
text-align: center;}
li {background-color: #ccc;padding: 4px 12px;display: inline;
}
</style>
</head>
<body>
<div class="contenedor">
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
</div>

</body>
</html>
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 30/07/2008, 03:52
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: Lista horizontal centrada en un div

Cita:
Iniciado por icisneros Ver Mensaje
Y he cambiado el margin: 0px; de li por magin: 0 auto;
Todo dependerá de si usas el float o no o de si usas el inline.

Si usas float no te sirve el text-align en el contenedor padre ni el margin auto en los li.
Si usas inline no te sirve el margin auto pero sí el text-align del contenedor padre.

Tienes un lío de conceptos. No sé si has leído detenidamente lo que te expliqué en el primer mensaje
  #9 (permalink)  
Antiguo 30/07/2008, 03:55
 
Fecha de Ingreso: abril-2008
Mensajes: 262
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Lista horizontal centrada en un div

Cita:
Iniciado por tunait Ver Mensaje
Tienes un lío de conceptos. No sé si has leído detenidamente lo que te expliqué en el primer mensaje
Efectivamente, no te había entendido correctamente. Ya está solucionado.

Gracias a todos.
  #10 (permalink)  
Antiguo 30/07/2008, 05:30
Avatar de imagen021  
Fecha de Ingreso: julio-2008
Ubicación: A Coruña
Mensajes: 74
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Lista horizontal centrada en un div

En mi solución, si le das un ancho de 650px y el margin: 0 auto, lo centrará...

Pero si dentro de ese ul de 650 tienes 2 li que miden 50px cada uno... obviamente que los tirará a la izquierda de los 650px de tu UL...

Para entender como plantear las cosas te aconsejo siempre ponerle bordes a los elementos y luego ir quitándolos a medida que ves que van como tu quieres.

Saludos!!
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 11:25.