Foros del Web » Creando para Internet » CSS »

Problema con alineado

Estas en el tema de Problema con alineado en el foro de CSS en Foros del Web. Hola, No logro dar en la tecla con el centrado. Tengo una lista desordenada a la que le aplique float: left; para ponerla en horizontal, ...
  #1 (permalink)  
Antiguo 22/11/2010, 12:29
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Problema con alineado

Hola,

No logro dar en la tecla con el centrado.
Tengo una lista desordenada a la que le aplique float: left; para ponerla en horizontal, pero necesito centrar el contenido del div y el float me esta llevando todo a la izquierda.

CSS:
Código HTML:
#footer {
	background: #6a747d;
	border-top: 2px solid #888f95;
	overflow: hidden;
	width: 100%;
	min-height: 140px;
	height: 100%;
	height: auto !important;
	clear: both;
        margin: 35px auto;
	text-align: center;
}

#foot {
	width: 53.9%;
	color: #FFFFFF
}

#foot ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#foot li {
	float: left;
	margin: 0;
	padding: 0;	
}

#foot li span {
	margin:0 10px;
}
el HTML

Código HTML:
<div id="footer"> 

	<div id="foot">
 		<ul>
 			<li>Logotipo<span>|</span></li>
 			<li>© www.host.com.ar<span>|</span></li>
 			<li>Todos los Derechos Reservados</li>
 		</ul>
 	</div>
</div> 
si le quito el float a li se centra pero pierde la condicion de lista horizontal.
  #2 (permalink)  
Antiguo 22/11/2010, 12:44
Avatar de lvfp  
Fecha de Ingreso: septiembre-2005
Ubicación: España
Mensajes: 337
Antigüedad: 18 años, 6 meses
Puntos: 4
Respuesta: Problema con alineado

Los li deben tener un width del 33% y text-align: center.
  #3 (permalink)  
Antiguo 22/11/2010, 12:57
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: Problema con alineado

de esa manera los li me quedan muy separados entre ellos...
  #4 (permalink)  
Antiguo 22/11/2010, 13:25
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: Problema con alineado

Lo resolví de otra manera:

Código HTML:
<div id="footer">  		
 		<div id="close">
 			<p><img src="img/logo-footer.png" alt="Logo" /><span>|</span>www.localhost.com.ar<span>|</span>Todos los Derechos Reservados</p>
 		</div>
</div> 

Código HTML:
#footer {
	background: #6a747d;
	border-top: 2px solid #888f95;
	overflow: hidden;
	width: 100%;
	min-height: 140px;
	height: 100%;
	height: auto !important;
	clear: both;
	text-align: center;
}

#foot {
	padding: 30px 0 10px;
	width: 960px;
	margin-bottom: 20px;
	margin:0 auto;
	text-align:center;
	color: #FFFFFF;
}

#foot span {
	margin: 0 10px;
}
  #5 (permalink)  
Antiguo 22/11/2010, 13:32
Avatar de lvfp  
Fecha de Ingreso: septiembre-2005
Ubicación: España
Mensajes: 337
Antigüedad: 18 años, 6 meses
Puntos: 4
Respuesta: Problema con alineado

Dale un ancho a <ul> para que no ocupe todo <foot> y se ajsute al ancho de los tres <li>
  #6 (permalink)  
Antiguo 22/11/2010, 13:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Problema con alineado

te la complicaste mucho hubiera bastado con cambiar una sola linea de tu css

cambia:
Código CSS:
Ver original
  1. #foot li {
  2.     float: left;
  3.     margin: 0;
  4.     padding: 0;    
  5. }

por:
Código CSS:
Ver original
  1. #foot li {
  2.     display:inline;
  3.     margin: 0;
  4.     padding: 0;    
  5. }

y después esos span que usaste para marcar la separación no me gustan jeje creo que queda mejor si los colocas en un li separado

Código HTML:
Ver original
  1. <ul>
  2.     <li>Logotipo</li>
  3.     <li> | </li>
  4.     <li>© www.host.com.ar</li>
  5.     <li> | </li>
  6.     <li>Todos los Derechos Reservados</li>
  7. </ul>

PD. aclaro que se centra en relación al #foot y este solo ocupa la mitad del ancho total por lo que no se aprecia del todo que este centrado hasta que le pongas un color de fondo diferente al foot o un borde

Etiquetas: Ninguno
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 08:01.