Div flotante

icharls · #1 (**permalink**) 12/07/2010, 21:44

Hola amigos , me estoy quebrando la cabeza con un proyecto que tengo. Necesito saber como dejar una capa div , este funciona como menu y al hacer scroll solo se mueve el contenedor pero al achicar la ventana del navegador se despalza todo el contenedor y la div me queda fija y deberia moverse con todo. Ademas lo he probado en otras resoluciones y se descompagina todo. Aca les dejo los codigos, espero una ayuda.

codigo HTML

<body>
<div id="all">
<div id="wrapper">

<div id="side-a">

<div id="titulo">Portafolio - Open Souce Icons</div>
<div id="iconware">
<div id="bloque">
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>

</div>

</div>

<div id="separador"></div>

<div id="iconware">
<div id="titulo">Portafolio - Freeware Icons</div>
<div id="opensource">
<div id="bloque">
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>

</div>

</div>

</div>
<div id="separador"></div>

<div id="contacto">
<div id="titulo">Contactame</div>

<p>Wake up, fatty cute awesome, bigdaddy!</p>

</div>

</div>
<div id="side-b"></div>
<div id="footer"></div>

<div id="flotante">
<div id="pic">
<img src="imagenes/picture.png" width="128" height="117" alt="Jairo " /></div>
<div id="name"><h1>Jairo Boudewyn</h1></div>
<div id="socials"><img src="imagenes/socials.png" width="144" height="20" alt="Sociabiliza!" align="right"/></div>
<div id="nav">Blog - Portafolio - Contacto</div>

</div>

</div>

</div>


codigo css

body{
margin-top: 250px;
font-family: "Abadi MT Condensed Extra Bold";
font-size:100%;
text-align: left;
background-color: #f9f8f8;
line-height:1.3125em;

}
/*cambio de color de la seleccion*/

::selection { /* Para Safari, Chrome, Konqueror, Opera etc.*/
background: #599d08;
color: #fff; }
::-moz-selection { /* Para Firefox, Flock, etc. */
background: #599d08;
color: #fff; }

h1{
font-size: 39px;
color: #599d08;
text-align: left;

}

p{
font-family: "Tahoma";
font-size: 12px;
color:#000;
text-align: left;

}

#all{
width: 100%;
height: 100%;
overflow: auto;

}

#wrapper{
width: 960px;
height: auto;
margin: 0 auto;
min-width: 100px;

}

#side-a{
width: 550px;
height: auto;
float: left;
overflow: hidden;

}

#side-b{
width: 410px;
height: auto;
float: left;
margin: 0 auto;

}

#footer{

width: 960px;
height: 50px;
clear: both;
}

#flotante{
width: 400px;
height: auto;
position: fixed;
left: 920px;
top: 250px;
z-index: 1000;
overflow: inherit;

}

#pic{
width: 130px;
height: 118px;
float: left;

}

#name{
width: 248px;
height: auto;
float: left;
font-family:"Delicius Bold";
padding-top: 5px;
margin-bottom: 3px;

}

#socials{
width: 242px;
height: 28px;
float: left;
cursor: pointer;
margin-right: 6px;

}

#nav{
width: 248px;
height: 43px;
float: left;

}

#separador{
width: 550px;
height: 1700px;

}

#titulo{
width: 525px;
height: auto;
margin: 5px;
padding-left: 15px;

}

#bloque{
width: 525px;
text-decoration: none;
display: block;

}

#prev{
width: 52px;
height: 52px;
border: 1px solid #599d08;
float: left;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;

}

#opensource{
width: 525px;
height: auto;
margin: 5px;
padding-left: 15px;
overflow: hidden;

}

#iconware{
width: 525px;
height: auto;
margin: 5px;
padding-left: 15px;
overflow: hidden;

}

#contacto{
width: 525px;
height: 540px;
margin: 5px;
padding-left: 15px;
overflow: hidden;

}

Espero la ayuda de uds. De antemano un futuro desempleado :s

lair · #2 (**permalink**) 13/07/2010, 09:42

Hola primero que nada, NO puedes repetir identificadores <div id="prev"></div>, para eso mejor utiliza clases <div class="prev"></div>, para que un div no se mueva utiliza las siguientes propiedades:

Código CSS:

Ver original#id{
    possition:fixed;
    top:#px; /*numero de pixeles respecto al top*/
    left:#px; /*numero de pixeles respecto a la izquierda*/
}

suerte

XxflezhaxX · #3 (**permalink**) 13/07/2010, 11:12

es position no possition, con una S Ok!!
saludos!!

icharls · #4 (**permalink**) 13/07/2010, 15:21

Gracias por la respuesta, pero mi problema es otro al hacer resize con el navegador, la capa no se ajusta con el contenedor, se queda inmovil, habra algun truco para que la div flotante siga al contenedor principal???
Gracias amigos!