Foros del Web » Creando para Internet » CSS »

Problema display de lista

Estas en el tema de Problema display de lista en el foro de CSS en Foros del Web. Hola amigos, mi problema es el siguiente, tengo una lista la cual quiero que sus items se vean uno al lado de otro y no ...
  #1 (permalink)  
Antiguo 28/01/2010, 17:09
 
Fecha de Ingreso: enero-2009
Mensajes: 76
Antigüedad: 8 años, 11 meses
Puntos: 0
Problema display de lista

Hola amigos, mi problema es el siguiente, tengo una lista la cual quiero que sus items se vean uno al lado de otro y no uno debajo del otro. este es mi codigo.

Código:
<div id="menuuser">
<ul>
			<li><a href="" /><span alt="Nuevo." class="panel_iconos nuevo"></span></a></li>
			<li><a href="/" /><span alt="Logout." class="panel_iconos logout"></span></a></li>			
			<li><a href="/" /><span alt="Tu perfil." class="panel_iconos perfil"></span></a></li>
			<li><a href="/ ><span alt="Mis favoritos." class="panel_iconos fav"></span></a></li>
			<li><a href="/" /><span alt="Mis mensajes." class="panel_iconos mensaje"></span></a></li>
</ul></div>
Código:
#menuuser {
	float:left;
	width:30px;
	height:24px;
	padding:0px;
	margin:0px;
	list-style-type:none;

}
#menuuser a {
  float:left;
  width:30px;
  text-decoration:none;
  text-align:center;
  color:#ff0000;
  background-color:#f7f8e8;
  padding:3px 5px;
  border-right:1px solid white;
  height:25px;
    display:inline;
  }

#menuuser a:hover {
  background-color:#336699;
  }
Código:
.panel_iconos {
  width: 30px;
  height: 30px;
  background-image: url('../imagenes/iconos.png');
  background-repeat: no-repeat;
  display:block;
}

.panel_iconos.nuevo {top:6px; height:18px; width:30px; background-position: 0 0px;}
.panel_iconos.logout { background-position: 0 -19px;}
.panel_iconos.perfil { background-position: 3px -48px;}
.panel_iconos.fav { background-position: 0 -77px;}
.panel_iconos.mensaje { background-position: 0 -107px;}
  #2 (permalink)  
Antiguo 29/01/2010, 05:49
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Problema display de lista

Buenas,

la propiedad li es a la que debes añadir el float left, no al menu contenedor. En tu código html lo marcado en rojo no aporta, se lo puedes añadir a <a href="..".>

Código:
<li><a href="" /><span alt="Nuevo." class="panel_iconos nuevo"></span></a></li>
Mira estos ejemplos, te pueden servir de guía.

http://www.librosweb.es/css/capitulo...vanzados2.html

http://araudi.net/ejemplos/menu_centrado.html

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.

Etiquetas: display, lista
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 06:36.