[SOLUCIONADO] Problema con posicionamiento fijo

temerariomalaga · #1 (**permalink**) 29/03/2013, 04:15

Buenas, tengo una web con un banner, un menú horizontal justo debajo del baner y debajo el contenido. El banner y el menú los tengo con un posicionamiento fijo, para que al bajar el cursor siempre aparezcan (como si utilizase los obsoletos frames). El problema está en que no se que posicionamiento ponerle al contenidopara que no se vea por debajo del banner y el menú cuando me desplazo por la web.
Dejo aquí un poco del código HTML y el CSS correspondiente a los div.

Código HTML:

Ver original<div id="banner">
            <img src="images/banner.gif">
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.html">inicio</a>
                <li><a href="firmas.html">firmas</a>
                <li><a href="productos.html">productos</a>
                <li><a href="descargas.html">descargas</a>
                <li><a href="contacto.php">contacto</a>
            </ul>
        </div>
        <div id="text">
                         .
                         .
                         .
                         .

Código CSS:

Ver original#banner {
    position: fixed;
    top: 0px;
    left: 300px;
    }
#menu {
    text-align: center;
    list-style-type: none;
    position: fixed;
    top: 120px;
    left: 400px;
    }
#menu li a {
    color: #000;
    font-size: 25px;
    font-family: "Comic Sans MS";
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    padding-bottom: 7px;
    }
#menu li {
    display: inline;
    background-color: #CC6600;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 17px;
    }
#text {
    margin-left: 30px;
    text-align: center;

pzin · #2 (**permalink**) 29/03/2013, 04:21

Colócale a div#text una posición relativa y un z-index mayor que los elementos fijos, que en este caso no tienen.

Código CSS:

Ver originaldiv#text {
  position: relative;
  z-index: 5;
}

De todas formas me parece un poco extraño que se le ponga una posición fija a un menú que luego vaya a ser oculto por el contenido.

Normalmente este tipo de consultas es al revés. Pero bueno, igual tiene sentido al ver el sitio.

temerariomalaga · #3 (**permalink**) 29/03/2013, 04:48

Cita:

Iniciado por Bonez

De todas formas me parece un poco extraño que se le ponga una posición fija a un menú que luego vaya a ser oculto por el contenido.

Normalmente este tipo de consultas es al revés. Pero bueno, igual tiene sentido al ver el sitio.

Creo que me expliqué mal. El problema es que se oculta, yo lo que quiero es que no se me oculte el menú por el texto si no como tu dices no tiene mucho sentido

pzin · #4 (**permalink**) 29/03/2013, 04:55

Ahora ya vuelves a pisar el suelo de los mortales.

Pero realmente, con sólo ese código, tendría que ocurrir así. Supongo que entonces falta código ahí. O si es mucho y lo tienes colgado también vale una URL.

temerariomalaga · #5 (**permalink**) 29/03/2013, 05:00

Lo tengo en modo local porque no quiero tocar la que tengo colgada hasta que no solucione ese tema. Voy a intentar explicarme de nuevo a ver si me explico mejor

Tal como está la página se me quedan fijos el baner y el menú pero al desplazar la página el texto se mete por debajo del baner y el menú. Yo quiero que pase eso pero que no se vea el texto que ya ha pasado por ahí, porque el menú y el baner no ocupan todo el ancho de la pantalla y por los laterales que no hay nada se ve el texto por debajo del baner y el menú.
No se si me he explicado mejor o peor de antes asi que espero que entiendas que quiero decirte

MTK · #6 (**permalink**) 29/03/2013, 05:01

Hola Bonez! Podrías recomendarme a algún miembro del grupo que controle con el tema de empresas que se dediquen a envíos masivos. Llevo desde ayer pero observo que a la gente la cuesta abrirse con un nuevo miembro. Muchas gracias, Marta.

pzin · #7 (**permalink**) 29/03/2013, 05:26

Cita:

Iniciado por temerariomalaga

Lo tengo en modo local porque no quiero tocar la que tengo colgada hasta que no solucione ese tema. Voy a intentar explicarme de nuevo a ver si me explico mejor

Tal como está la página se me quedan fijos el baner y el menú pero al desplazar la página el texto se mete por debajo del baner y el menú. Yo quiero que pase eso pero que no se vea el texto que ya ha pasado por ahí, porque el menú y el baner no ocupan todo el ancho de la pantalla y por los laterales que no hay nada se ve el texto por debajo del baner y el menú.
No se si me he explicado mejor o peor de antes asi que espero que entiendas que quiero decirte

Aaaaahora...

Puede llegar a ser muy fácil o complicado. Si tienes un fondo de color opaco entonces no hay problema ya que con aplicarle ese color al fondo de los elementos fijos lo demás se ocultaría.

Si tienes un imagen como fondo, entonces depende de cómo esté puesto.

Cita:

Iniciado por MTK

Hola Bonez! Podrías recomendarme a algún miembro del grupo que controle con el tema de empresas que se dediquen a envíos masivos. Llevo desde ayer pero observo que a la gente la cuesta abrirse con un nuevo miembro. Muchas gracias, Marta.

No sé a qué te refieres con grupo ni envíos masivos ni nada. Haz tu pregunta en el subforo adecuado.

temerariomalaga · #8 (**permalink**) 29/03/2013, 06:01

Pues he hecho de paso una modificación del estilo. He puesto que el color del menú ocupe todo el ancho y así me quito el problema del cambio de contrastes del fondo.
Pues eso solucionado. Ya que tengo este hilo abierto aprovecho y pongo otro problemilla que tengo. Tengo un div flotante para poner las novedades. El div tiene un parrafo con un id para identificar que es la cabecera. Pues bien, al desplazar la página hacia abajo la cabecera se me queda fija y el div se me desplaza hacia arriba con el resto de la página. Eso es por el posicionamiento fijo. El problema está en que al quitarlre el posicionamiento fijo al desplazar el scroll de las noticias, la cabecera se va, y si pongo el div como fijo con 0px a la derecha el texto de la página se mete dentro del div flotante. ¿hay alguna solución para que no se me mueva la cabecera del div?
El html y el css son los siguientes:

Código HTML:

Ver original<div id="text">
            <div id="notice">
                <p id="cabecera">Novedades</p>
                <!--<p class="noticia"><img src="images/arrow.jpg"/>En la sección de contacto encontrará un formulario que puede rellenar para realizar cualquier pregunta o solicitar su clave de descarga.<br><span class="fecha"> Publicado el 30/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>Nueva página!! Ahora podrá acceder desde la siguiente dirección: <a href="http://representacionessuviri.t15.org/">representacionessuviri.t15.org</a><br><span class="fecha"> Publicado el 30/03/13</span></p>-->
                <p class="noticia"><img src="images/arrow.jpg"/>El día 30 de marzo se procederá a cambiar el servidor de la web, cambiando también su dirección. Más noticias el día 30.<br><span class="fecha"> Publicado el 28/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>Ya está disponible el catálogo de Rovimat de 2013. Búsquelo en la sección de descargas y no olvide solicitar su clave.<br><span class="fecha"> Publicado el 28/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>Próximamente la web cambiará de dirección, permanezca atento al tablón de novedades.<br><span class="fecha"> Publicado el 27/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>En esta sección podrá ver las novedades referentes a la web.<br><span class="fecha"> Publicado el 27/03/13</span></p>
            </div>

Código CSS:

Ver original#notice{
    float: right;
    border: 3px solid #CC6600;
    height: 300px;
    width: 300px;
    overflow:auto;
    position: fixed right;
#cabecera{
    background-color: #CC6600;
    margin-top: -3px;
    position: fixed;
    width: inherit;
    }

pzin · #9 (**permalink**) 29/03/2013, 06:20

Código CSS:

Ver originalposition: fixed right;

¿Y esto? Nunca lo he visto.

Quita ese right, así te funcionará bien. Y para ponerlo a la derecha, aplícate a #notice:

Código CSS:

Ver originalright: 0;

Luego #noticie no está bien cerrado. Supongo que será del copy/paste, pero por si acaso…

temerariomalaga · #10 (**permalink**) 29/03/2013, 06:33

Lo del fixed right se me coló de hacer pruebas para solucionarlo

Poniendo el position: fixed con el right: 0 sigue persistiendo el problema, el texto del div texto se mete por debajo del texto del div notice y aqui no iba a colar el meter la imagen de fondo porque se iba a notar demasiado la diferencia.

pzin · #11 (**permalink**) 29/03/2013, 09:08

Sin ver el código completo o a trozos es más difícil saber lo que pasa.

Como ya dije, en caso de haber una imagen de fondo se va a volver más difícil hallar una solución, y eventualmente llegar a ser imposible sólo con CSS.

temerariomalaga · #12 (**permalink**) 29/03/2013, 09:22

Cita:

Iniciado por Bonez

Sin ver el código completo o a trozos es más difícil saber lo que pasa.

Como ya dije, en caso de haber una imagen de fondo se va a volver más difícil hallar una solución, y eventualmente llegar a ser imposible sólo con CSS.

Pues ahí va el código completo de HTML de dicha página y el CSS correspondiente a las clases que se encuentran en esta página. A ver que se puede hacer, si no pues a acortar la página para que no salga el scroll en el índice

Código HTML:

Ver original<body>
        <div id="banner">
            <img src="images/banner.gif">
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.html">inicio</a>
                <li><a href="firmas.html">firmas</a>
                <li><a href="productos.html">productos</a>
                <li><a href="descargas.html">descargas</a>
                <li><a href="contacto.php">contacto</a>
            </ul>
        </div>
        <div id="text">
            <div id="notice">
                <p id="cabecera">Novedades</p>
                <!--<p class="noticia"><img src="images/arrow.jpg"/>En la sección de contacto encontrará un formulario que puede rellenar para realizar cualquier pregunta o solicitar su clave de descarga.<br><span class="fecha"> Publicado el 30/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>Nueva página!! Ahora podrá acceder desde la siguiente dirección: <a href="http://representacionessuviri.t15.org/">representacionessuviri.t15.org</a><br><span class="fecha"> Publicado el 30/03/13</span></p>-->
                <p class="noticia"><img src="images/arrow.jpg"/>El día 30 de marzo se procederá a cambiar el servidor de la web, cambiando también su dirección. Más noticias el día 30.<br><span class="fecha"> Publicado el 28/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>Ya está disponible el catálogo de Rovimat de 2013. Búsquelo en la sección de descargas y no olvide solicitar su clave.<br><span class="fecha"> Publicado el 28/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>Próximamente la web cambiará de dirección, permanezca atento al tablón de novedades.<br><span class="fecha"> Publicado el 27/03/13</span></p>
                <p class="noticia"><img src="images/arrow.jpg"/>En esta sección podrá ver las novedades referentes a la web.<br><span class="fecha"> Publicado el 27/03/13</span></p>
            </div>
            <div id="c_9d860e05b22e7fbbfb77830a8c791734" class="tiempo"></div><script type="text/javascript" src="http://www.eltiempo.es/widget/widget_loader/9d860e05b22e7fbbfb77830a8c791734"></script>
            <h1>Representaciones Suviri</h1>
            <p>Jesús Suviri, desde 1989 dedicado a la representacion de firmas relacionadas con la cocina, el baño, materiales de construccion, etc... trabajando directamente con profesionales especializados en el sector, en toda la Provincia de Málaga.</p>
</div>

Código CSS:

Ver originalbody {
    background: url('images/background.jpg') repeat-y;
    }
#banner {
    position: fixed;
    top: 0px;
    background: url('images/background.jpg') repeat-x;
    padding-left: 300px;
    }
#menu {
    text-align: center;
    list-style-type: none;
    position: fixed;
    top: 130px;
    background: url('images/background.jpg');
    padding-left: 400px;
    }
#menu li a {
    color: #000;
    font-size: 25px;
    font-family: "Comic Sans MS";
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    padding-bottom: 7px;
    }
#menu li {
    display: inline;
    background-color: #CC6600;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 17px;
    }
#menu a:hover {
    background-color: #00FFFF;
    }
#text {
    margin-left: 30px;
    padding-top: 250px;
    }
#notice{
    float: right;
    border: 3px solid #CC6600;
    height: 300px;
    width: 300px;
    overflow:auto;
    }
#notice p{
    text-align: center;
    }
#cabecera{
    background-color: #CC6600;
    margin-top: -3px;
    position: fixed;
    width: inherit;
    }
#notice img{
    margin-left: 0px;
    margin-right: 5px;
    }
.fecha {
    font-size: 15px;
    }
.noticia{
    padding-top: 5px;
    }
.tiempo{
    float: right;
    clear: right;
    margin-top: 20px;
    }

pzin · #13 (**permalink**) 29/03/2013, 09:32

Bueno así mucho no vamos a hacer porque sin la imagen de fondo, es difícil. http://jsbin.com/omoluh/1/edit

De todas formas, supongo que lo de novedades estará mal. Aplícale a #notice una posición relativa —los elementos que no tengan una posición estática (por defecto) hacen de contenedor para los elementos posicionados de forma absoluta o fija.

Ahora el asunto del fondo no lo entenderé hasta ver la imagen de fondo ahí bien puesta. Por eso igual es mejor que lo subas a algún sitio aunque sólo sea para verlo.

temerariomalaga · #14 (**permalink**) 29/03/2013, 09:37

[URL="http://representacionessuviri.t15.org/index.html"]http://representacionessuviri.t15.org/index.html[/URL]
Ese es el enlace de la web que tengo ahora mismo en el servidor.

pzin · #15 (**permalink**) 29/03/2013, 10:20

Y lo que quieres es que la cabecera de esas noticias se queda fija, ¿no? Porque entonces sólo tienes que hacer lo que dije arriba para que el contenedor de esas noticias haga de elemento de contención y la posición fija haga referente a este.

Que por cierto, la web se ve bastante mal en una resolución grande (1920):

Deberías de aplicar algún contenedor con un ancho máximo.

temerariomalaga · #16 (**permalink**) 29/03/2013, 10:31

Cita:

Iniciado por Bonez

Y lo que quieres es que la cabecera de esas noticias se queda fija, ¿no? Porque entonces sólo tienes que hacer lo que dije arriba para que el contenedor de esas noticias haga de elemento de contención y la posición fija haga referente a este.

Que por cierto, la web se ve bastante mal en una resolución grande (1920):

Deberías de aplicar algún contenedor con un ancho máximo.

Pues ya me funciona esto y ahora me pondré con lo que has dicho del ancho máximo, aunque a mi se me ve bien con la misma resolución que dices. Pues ya está, tema solucionado, gracias maestro Bonez.

temerariomalaga · #17 (**permalink**) 31/03/2013, 03:39

Después de haber puesto el ancho máximo de la pantalla ya me deja de servir la solución del fondo porque el fondo del menú se ha ajustado al ancho nuevo del contendor y ya no ocupa toda la página. ¿Hay alguna forma de "resetear" solamente los div del baner y el menú?

pzin · #18 (**permalink**) 31/03/2013, 04:39

Pon el menú y el banner en un contenedor que ocupe el 100% del ancho y pones ahí el fondo. Así tendrá siempre el mismo tamaño que el otro fondo.

temerariomalaga · #19 (**permalink**) 31/03/2013, 05:32

Ya está solucionado, al final sacando menú y banner del contenedor y asignandole un estilo común a los dos he conseguido que queden centrados y con la imagen de fondo. Gracias por la ayuda.