Foros del Web » Creando para Internet » CSS »

Div flotante

Estas en el tema de Div flotante en el foro de CSS en Foros del Web. Hola amigos , me estoy quebrando la cabeza con un proyecto que tengo. Necesito saber como dejar una capa div , este funciona como menu ...
  #1 (permalink)  
Antiguo 12/07/2010, 22:44
 
Fecha de Ingreso: julio-2010
Mensajes: 2
Antigüedad: 7 años, 5 meses
Puntos: 0
Div flotante

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><!-- comienza contenedor-->
<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>
<!-- fin contenedor-->

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
  #2 (permalink)  
Antiguo 13/07/2010, 10:42
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.047
Antigüedad: 8 años, 11 meses
Puntos: 46
Respuesta: Div flotante

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
  1. #id{
  2.     possition:fixed;
  3.     top:#px; /*numero de pixeles respecto al top*/
  4.     left:#px; /*numero de pixeles respecto a la izquierda*/
  5. }

suerte
  #3 (permalink)  
Antiguo 13/07/2010, 12:12
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Div flotante

es position no possition, con una S Ok!!
saludos!!
  #4 (permalink)  
Antiguo 13/07/2010, 16:21
 
Fecha de Ingreso: julio-2010
Mensajes: 2
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Div flotante

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!

Etiquetas: flotante
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:35.