maquetar una lista dentro de una capa en el top

igualacero · #1 (**permalink**) 26/09/2011, 06:50

Estoy intentando colocar una lista en la parte superior de un div, el problema surge porque la lista no se junta en la parte de arriba de la capa y me descuadra el diseño.
pongo el codigo porque sino imposible entenderlo.

Código:

html:

        <div id="friends">
        
       	  <ul id="friends_pro">            
            <li><a href="" ><img  src="imagenes/mens_pro.png" align="top"></a></li>  
                <li><a href="" ><img  src="imagenes/photo_pro.png"></a></li>
              <li><a href=""><img  src="imagenes/historial_pro.png"></a></li>
                <li><a href=""><img  src="imagenes/amigos_pro.png"></a></li>
		  </ul>

Código:

 css:
#friends{
	height:200px;
	width:1280px;
	padding:0px;
	margin:0px;
	list-style-type: none;
}
#friends_pro ul{
	padding: 0px;
	list-style-type: none;
	float:right;
	margin:0px;
	
}
#friends_pro li{
	list-style-type: none;	
	padding: 0px;
	margin:0px;
	
	}

pongo la imagen para verlo mejor

ya he intentado poner el div contendor más pequeño pero no hay forma de subirla hasta arriba o de que se pegue al máximo a la parte de arriba de la capa y entonces el último botón se sale del diseño.

souldeveloper · #2 (**permalink**) 26/09/2011, 08:07

As intentado hacer un clear a la capa superior
clear:Bottom a la capa que hay justo por encima del Div que creas.? no se mucho de css pero quiza eso te ayude a quitar el pequeño margen ese molesto

snowmanchip · #3 (**permalink**) 26/09/2011, 08:35

Hola... tengo una duda.. la lista que quieres ubicar arriba está dentro de qué contenedor? hay otro div que debe quedar al lado de esta lista?..se podría decir que un sidebar de un contenedor..te lo pregunto porque el div que contiene la lista tiene un ancho de 1280px..es imposible que se ajuste a la izq de la página aunque uses un float left, como ejemplo te envío este código:

Código HTML:

<div id="contenedor">
 <div id="friends">
        
       	  <ul id="friends_pro">            
            <li><a href="" ><img  src="imagenes/mens_pro.png" align="top"></a></li>  
                <li><a href="" ><img  src="imagenes/photo_pro.png"></a></li>
              <li><a href=""><img  src="imagenes/historial_pro.png"></a></li>
                <li><a href=""><img  src="imagenes/amigos_pro.png"></a></li>
		  </ul>
   </div>
  <div id="contenido">
  Lo que irá en este contenedor
  
  ,blabla bla</div>

css sólo ejemplo:

Código HTML:

#friends{
	height:200px;
	width:30%;
	padding:0px;
	margin:0px;
	list-style-type: none;
	float: left;
}
#contenido {
	width: 70%;
	float: right;
}

#friends_pro ul{
	padding: 0px;
	list-style-type: none;
	float:right;
	margin:0px;
	
}
#friends_pro li{
	list-style-type: none;	
	padding: 0px;
	margin:0px;
	
	}

Saludos

igualacero · #4 (**permalink**) 27/09/2011, 03:16

@souldeveloper la propiedad clear:bottom no existe o si te refieres a clear:both para cerrar la propiedad float de la capa superior ya lo he probado y nada.

@snowmanchip el contendor es #friends, al lado si va otra capa pero no quiero maquetarla a la izquierda lo que quiero es maquetarla hacia arriba, conseguir que la lista comience desde arriba de la capa sin dejar ese pequeño margen que queda.

snowmanchip · #5 (**permalink**) 27/09/2011, 07:11

hola igualacero..

Lo que te envié es sólo un ejemplo ya que no adjuntaste el layout completo, es decir los otros div como para captar bien tu idea, hay muchas maneras de lograr lo que quieres, si te fijas en la imagen que adjuntaste el efecto que deseas lograr no lo conseguirás, porque el elemento que contiene la lista es un bloque que ocupa todo el ancho de la página y quieres desplazarlo hacia arriba para que quede al lado de un elemento que no sabemos cómo está compuesto, si ese bloque lo reduces al ancho que deseas del ul se debiera posicionar fácilmente,
Actualmente #friends contiene a tu lista y tiene un ancho de 1280 px.
saludos.

igualacero · #6 (**permalink**) 27/09/2011, 08:09

HOla @snowmanchip,
este es el esquema completo de los divs:

Cita:

Todo esta dentro del div profile, he probado a reducir el tamaño de #friends al tamaño del ul y no se ha maquetado arriba.

snowmanchip · #7 (**permalink**) 27/09/2011, 08:17

adjunta el css de los otros elementos..,
además dónde quieres cada elemento..si puedes adjunta una imagen a mano del layout que quieres lograr.. creo que así lo sacaremos más rápido porque quizá no te he entendido bien..saludos..

igualacero · #8 (**permalink**) 27/09/2011, 14:44

okey, mira todos los div están como quiero maquetarlos te pongo la parte que falta del css:

Cita:

#profile{
height:500px;
width:1280px;
background-image:url(../imagenes/fond_perfil.png);
background-position:center;
background-repeat:no-repeat;
}
#buttons_prof{
height:83px;
width:1280px;
}
#photo_user{
height:240px;
width:1280px;
clear:both;
}

De esta imagen:

lo que quiero conseguir es que el boton de la lista que pone MENSAJES este pegado por arriba a la linea azul que es el div #friends porque el último botón de lista llamado amigos se sale del fondo gris. Todo el elemento de la lista con forma de rectángulo está sombreado con una maya de puntos y lo que quiero es poder subirlo entero para arriba y no dejar el espacio que hay entre la linea azul de arriba y el primer botón de mensaje.
Ya probé configurar #friends con un width más pequeño como me comentaste pero nada.

snowmanchip · #9 (**permalink**) 28/09/2011, 08:55

Hola...ayer no pude contestar, pero si te fijas como te mencioné antes, es imposible que te dé resultado si todos los divs ocupan el ancho total de la página, los tienes todos con width:1280px;

Saludos