Desplazamiento Fondo

nusee · #1 (**permalink**) 22/01/2009, 20:52

Hola! Disculpen la molestia, tengo un problema que nose muy bien como solucionar, soy medio nuevo en esto de Diseño Web.

La cuestion es que tengo este codigo:

XHTML

Cita:

<div id="wrap">
<div id="proyectos">
<div class="content"></div>
</div>
<div id="top">
<h1><a id="toggle" href="#">Proyectos</a></h1>
</div>
</div>

CSS

Cita:

*{
font-size: 62.5%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px;
}

body{
font: 1.1em/1.8em "Lucida Grande", Tahoma, Arial, Sans-Serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0px;
}

#wrap{
background: url(../images/background/background.jpg) repeat-x top left; height: 610px;
}

#proyectos{
background: #1e1e1e; position: relative;
}

#proyectos .content{
width: 550px; height: 80px; padding-top: 25px; margin: 0 auto;
}

#top{
background: url(../images/proyectos_top/proyectos_top.png) repeat-x top left; height: 24px; font-size: 1.1em; text-align: center; position: relative; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-bottom: 56px;
}

#top h1{
font-size: 1px;
}

#top h1 a{
background: url(../images/proyectos/proyectos.png) no-repeat; width: 112px; height: 14px; display: block; text-indent: -1000em; overflow: hidden; float: right; margin-top: 5px; margin-right: 5px;
}

La cuestion es que se supone que arriba me quedaria una linea horizontal con un boton que al tocarlo usando Javascript se desplaza hacia abajo un menu, lo que pasa es que lo hace tapando el fondo, yo lo que quiero es que al abrirse me desplaze el todo la imagen de fondo hacia abajo.

Muchas gracias por la ayuda, saludos! =)

Calizman · #2 (**permalink**) 22/01/2009, 21:44

Saludos nusee!!

creo que... el menu en JS es el que esta afectando, porque no intentas hacer un menu con css que se pesplaze?

te dejo esta pagina y tu revisa los menus! de repente hay alguno que te solucione el problema, o que te ayude a solucionarlo!

Saludos

Mikmoro · #3 (**permalink**) 23/01/2009, 03:40

Por el <a id="toggle", inagino que estás usando mootools.

Sería necesario ver eso funcionando, porque yo al menos no entiendo lo que dices de deplazar la imagen.

nusee · #4 (**permalink**) 23/01/2009, 10:28

Hola! Muchas gracias por sus respuestas.

La cuestion es que al hacer click en Toggle, la imagen de fondo no se desplaza hacia abajo (osea no la arrastra), yo lo que quiero lograr es que al abrirse me desplaze la imagen de fondo también hacia abajo, no que la tape.

Suertee y gracias! =)

Mikmoro · #5 (**permalink**) 23/01/2009, 11:02

¿Y tú ves tu imagen de fondo? yo no, y no veo que ocurra nada al pulsar toggle.

Ah, ya, hablabas de explorer.

Dalvenjha · #6 (**permalink**) 23/01/2009, 11:10

Ok quieres que la imagen se mueva al deslizarse la barrita, entonces no puedes ponerla como imagen de fondo en el body. Tu solución va por dos caminos, o usas javascript lo que haría eso pesado, o simplemente metes ese fondo en un div container que baje con la barrita, mira imagino que la barrita esa va a empujar algún div no?

Mi solución es que maquetes asi:

Código HTML:

<html>
<body>
<div id="barrita">
</div>
<div id="container">
aca toooodo tu contenido
</div>
</body>
</html>

Luego haces lo siguiente:

Código:

#barrita{
position:relative;
width:100%;
}

#container{
position:relative;
width:100%;
}

Y asi dentro del container pones toda tu maquetación.

Saludos!!

nusee · #7 (**permalink**) 23/01/2009, 12:12

Muchas gracias a todos! Ya logre solucionarlo haciendo como me dijo Dalvenjha!

Suertee!! =)