Imagen fija y se superpone a la barra lateral fija a medida que la resolución de pantalla / tamaño de la ventana disminuye

StackOverflow https://stackoverflow.com//questions/25081585

Pregunta

Tengo una página con la siguiente estructura: 

<body>
<div id="page">
    <div id="header-container">
        <header>
        </header>
    </div>

    <div id="main-container">
        <div id="main" class="site-main">
            <div id="sidebar-container">
                <div id="sidebar">
                </div>
            </div>

            <div id="content-container">
                <div id="main-banner-container">
                    <div id="main-banner-holder">
                        <img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
                    </div>
                </div>
                <div id="content" class="content" role="main">
                </div>
            </div>
        </div>
        <div id="footer-container">
            <footer>
                <div id="footer-images">
                </div>
            </footer>
        </div>
    </div>
</div>  
</body>

y formateado con los siguientes CSS: 

body {
    margin: 0 auto;
    width: 70%;
    background-color: rgb(0,114,187);
    font-family: verdana;
}

#header-container {
    padding-bottom: 15px;
    padding-top: 20px;
    padding-left: 35px;
    padding-right: 35px;
    height: 190px;
}

header {
    position: fixed;
    width: 66%;
    padding-top: 30px;
    top: 0px;
}

#sidebar-container {
    height:500px;
    width:320px;
    float:right;
}

#sidebar {
    position: fixed;
    color: rgb(211,34,52);
    padding: 10px;
    right: 16.5%;
    top:226px;
}

#content-container {
    width: 72%;
}

#main-banner-container {
    max-width: 900px;
}

Ver la página en una pantalla panorámica muestra la multa del contenido.Sin embargo, a medida que reduce el tamaño de la ventana, o si veo el sitio en una pantalla de resolución más baja, la imagen fija y el texto debajo de ella comienza a oscurecer la barra lateral, a pesar de que se escala un poco.Además, cuando la página está desplazándose, aunque algunos de los mensajes de texto se mueven para hacer espacio para la barra lateral, el texto debajo de ella se superpone cuando se desplaza.

Un ejemplo aproximado del problema se puede ver aquí: http://jsfiddle.net/4wqzp/

¿Qué cambios necesito hacer?

Editar: Para aclarar, esperaba una solución plana basada en CSS / HTML.Javascript es una opción, aunque estoy tratando de evitarlo, ya que realmente no lo he usado en este sitio hasta ahora.

¿Fue útil?

Solución

Para usar un diseño adaptativo usado de dos maneras)), la primera es usar la Bootstrap Framework, el segundo esEscribiendo consultas de medios

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top