Colocar banners laterales

sanrockero · #1 (**permalink**) 13/11/2012, 17:19

Hola chicos y chicas,

tengo intención de colocar un par de banners laterales (tipo rascacielos) a los costados del contenido principal de mi web.

Para ello quisiera algún consejo sobre cual sería la mejor forma de proceder.
Como ejemplo podemos tomar la página del diario marca www.marca.com, donde los banners laterales conservan la posición al hacer la ventana más pequeña, pero el contenido principal se alinea a la izquierda en cuanto el espacio no es suficiente (haciendo desaparecer el banner).

Eso es lo que quiero conseguir. Alguien sabría orientarme?

Gracias de antemano.

memoadian · #2 (**permalink**) 13/11/2012, 17:52

Responsive design con mediaqueries

javierflti · #3 (**permalink**) 14/11/2012, 02:55

con un position:absolute en el div de los banners y un z-index más alto(por si acaso) creo que debería bastar, aunque no estoy muy seguro

pollin14 · #4 (**permalink**) 14/11/2012, 14:16

Analisis:

La columna principal (donde se muestra el contenido) tiene dos columnas: una a la izquierda (las noticias) y otra a la derecha (el baner). Esta columna tiene un ancho fijo y esta centrada.

La columna de la izquierda (noticias) tiene dos columnas.

El codigo:

Espero que este codigo te sirva para empesar a entender como funciona html junto con css.

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                background-color:#DADADA;
            }
            
            .center{
                margin-right:auto;
                margin-left:auto;
            }
            #izquierda,#derecha{
                float:left;
            }
            
            #principal{
                width:530px;
                min-height:600px;
                padding:5px;
                background-color: yellow;
            }
            
            #izquierda{
                width:400px;
            }
            
            #derecha{
                width:120px;
                height:240px;
                background-image: url('http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-4.png') ;
                background-repeat: no-repeat;
            }
            
            #uno{
                height:200px;
                background-color: purple;
            }
            
            #dos{
                height:300px;
                background-color: brown;
            }
            
            #uno,#dos{
                width:200px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="principal" class="center">
            <div id="izquierda">
                <div id="uno"></div>
                <div id="dos"></div>
                <div style="clear:both"></div>
            </div>
            <div id="derecha"></div>
        </div>
    </body>
</html>

javierflti · #5 (**permalink**) 15/11/2012, 02:35

Creo que es en la que pone #derecha la que tienes para el banner no?
Si añades un position:absolute ya te queda puesto siempre en el mismo sitio de la página aunque te muevas o lo redimensiones. Tienes que poner luego donde quieres que aparezca y listo, por ejemplo a x distancia de la derecha, de arriba, etc.