Capas que se mueven con la pagina

apustilnik · #1 (**permalink**) 06/06/2012, 11:21

Hola amigos, una consulta, alquien sabe como se hacen esas capas que se mueven automaticamente al uno subir o bajar la pagina en el navegador?
Por ejemplo podria ser una capa que contiene un menu de opciones, el cual nos interesa que siempre este visible para el usuario.
Desde ya muchas gracias, saludos

skiper0125 · #2 (**permalink**) 06/06/2012, 11:44

Hola que tal.

No entendí bien a tu duda pero creo que esto te va a servir, lo puedes implementar con css.

Código CSS:

Ver originaldiv.banner {
margin: 0;
position: fixed;
top: 2em;
right: auto;
width: 100%;
left: 2em;
}

Código HTML:

<div class="banner">menu</div>

Saludos

apustilnik · #3 (**permalink**) 06/06/2012, 20:37

hola muchas gracias por la respuesta antes que nada,
lo que yo necesito hacer, quiza suena dificil al explicarlo, pero sencillo al verlo en funcionamiento, no se si sera sencillo de hacer, es simple
supongamos una pagina cualquiera, con un menu de opciones (por ejemplo) en el margen derecho (o izquierdo da igual) y que el contenido de la pagina exede a la ventana del navegador, por lo que, para poder ver el contenido de la parte inferior, como sucede en millones de sitios, tenemos que bajar, usando la barra desplazadora del explorere, entonces, lo ke necesito es ke al bajar la pagina, el menu de opciones permanezca siempre visible y vaya bajando o subiendo a la vez que lo hacemos con la pagina, pero no se como hacerlo aqui te paso un ejemplo de menues siempre visibles
http://www.dynamicdrive.com/dynamici...lide/index.htm
muchas gracias

Cita:

Iniciado por skiper0125

Hola que tal.

No entendí bien a tu duda pero creo que esto te va a servir, lo puedes implementar con css.

Código CSS:

Ver originaldiv.banner {
margin: 0;
position: fixed;
top: 2em;
right: auto;
width: 100%;
left: 2em;
}

Código HTML:

<div class="banner">menu</div>

Saludos

skiper0125 · #4 (**permalink**) 06/06/2012, 21:13

Hola que tal.

Ya se lo que necesitas lo que necesitas es que el menú nunca pierda su posición original, te dejo este pequeño ejemplo.

Código HTML:

<!DOCTYPE html>
<html lang="es-ES">
<head>
    <meta charset="UTF-8">
    <title>prueba menu</title>
    <style type="text/css">
            ul#navigation {
                position: fixed;
                margin: 0px;
                padding: 0px;
                top: 10px;
                left: 0px;
                list-style: none;
                z-index:9999;
            }

            ul#navigation li a {
                display: block;
                width: 100px;
                height: 30px;
                background-color:#CFCFCF;
                background-repeat:no-repeat;
                background-position:center center;
                border:1px solid #AFAFAF;
            }

            ul#navigation li {
                width: 100px;
            }

            p{
                width:250px;
                margin: 0 auto;
            }
        </style>
</head>
<body>
    asdasdas
    <ul id="navigation">
            <li class="home"><a title="Home"></a></li>
            <li class="about"><a title="About"></a></li>
            <li class="search"><a title="Search"></a></li>
            <li class="photos"><a title="Photos"></a></li>
            <li class="rssfeed"><a title="Rss Feed"></a></li>
            <li class="podcasts"><a title="Podcasts"></a></li>
            <li class="contact"><a title="Contact"></a></li>
    </ul>
    <?php
        for($i=0;$i<=100;$i++)
        {
            echo "<br>";
        }
    ?>
</body>
</html>

prueba y comenta

Saludos

apustilnik · #5 (**permalink**) 06/06/2012, 21:42

antes que nada muchas gracias x la respuesta, y el codigo funciona perfecto
ahora mi consulta es, puedo hacer eso creando una clase css en dreamweaver? porque de momento no logre hacerlo, y probe aplicandole a la calase css diferentes tipos de posiciones, fixed, absolute, relative.... pero no funciona y no se porque

Cita:

Iniciado por skiper0125

Hola que tal.

Ya se lo que necesitas lo que necesitas es que el menú nunca pierda su posición original, te dejo este pequeño ejemplo.

Código HTML:

<!DOCTYPE html>
<html lang="es-ES">
<head>
    <meta charset="UTF-8">
    <title>prueba menu</title>
    <style type="text/css">
            ul#navigation {
                position: fixed;
                margin: 0px;
                padding: 0px;
                top: 10px;
                left: 0px;
                list-style: none;
                z-index:9999;
            }

            ul#navigation li a {
                display: block;
                width: 100px;
                height: 30px;
                background-color:#CFCFCF;
                background-repeat:no-repeat;
                background-position:center center;
                border:1px solid #AFAFAF;
            }

            ul#navigation li {
                width: 100px;
            }

            p{
                width:250px;
                margin: 0 auto;
            }
        </style>
</head>
<body>
    asdasdas
    <ul id="navigation">
            <li class="home"><a title="Home"></a></li>
            <li class="about"><a title="About"></a></li>
            <li class="search"><a title="Search"></a></li>
            <li class="photos"><a title="Photos"></a></li>
            <li class="rssfeed"><a title="Rss Feed"></a></li>
            <li class="podcasts"><a title="Podcasts"></a></li>
            <li class="contact"><a title="Contact"></a></li>
    </ul>
    <?php
        for($i=0;$i<=100;$i++)
        {
            echo "<br>";
        }
    ?>
</body>
</html>

prueba y comenta

Saludos

skiper0125 · #6 (**permalink**) 06/06/2012, 21:51

Cita:

Iniciado por apustilnik

antes que nada muchas gracias x la respuesta, y el codigo funciona perfecto
ahora mi consulta es, puedo hacer eso creando una clase css en dreamweaver? porque de momento no logre hacerlo, y probe aplicandole a la calase css diferentes tipos de posiciones, fixed, absolute, relative.... pero no funciona y no se porque

a que te refieres con crear una clase

no te entiendo en base a este código lo puedes utilizar en un documento con cualquier otro estilo, lo único que tienes que hacer es configurar bien tu css, ya que tengo un ejemplo parecido en el trabajo y funciona adecuadamente

Saludos

apustilnik · #7 (**permalink**) 07/06/2012, 10:55

lo que digo es lo siguiente, abro dreamweaver un nuevo documento, en el escribo un texto cualquiera, que exeda los limites de la ventana del navegador, creo una capa y abro el panel de estilos css y creo un nuevo estilo, al cual en la solapa posicionamiento, le establezco la propiedad fixed
y le aplico dicho estilo a la capa,
pero cuando lo visualizo en el explorer y desplazo la pagina hacia abajo, para ver el contenido, la capa no baja automaticamente, ni keda siempre visible, a eso voy, porque no me sale de ese modo ?

Cita:

Iniciado por skiper0125

a que te refieres con crear una clase

no te entiendo en base a este código lo puedes utilizar en un documento con cualquier otro estilo, lo único que tienes que hacer es configurar bien tu css, ya que tengo un ejemplo parecido en el trabajo y funciona adecuadamente

Saludos