L'immagine fissa e il contenuto si sovrappongono la barra laterale fissa come la risoluzione dello schermo / la dimensione della finestra diminuisce

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

Domanda

Ho una pagina con la seguente struttura: 

<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>
.

e formattato con il seguente 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;
}
.

La visualizzazione della pagina su un widescreen mostra il contenuto fine.Tuttavia, poiché riducono le dimensioni della finestra, o se vedo il sito su una schermata di risoluzione inferiore, l'immagine fissa e il testo sotto di esso inizia a oscurare la barra laterale, anche se scala un po '.Inoltre, quando la pagina sta scorrendo, anche se alcuni dei testo si spostano per rendere lo spazio per la barra laterale, il testo sotto si sovrappone quando scorreva.

Un approssimativo esempio del problema può essere visto qui: http://jsfiddle.net/4wqzp/

Quali cambiamenti devo fare?

Modifica: per chiarire, speravo una soluzione basata su CSS / HTML semplice.JavaScript è un'opzione, anche se sto cercando di evitarlo da quando non l'ho usato davvero in questo sito finora.

È stato utile?

Soluzione

Per l'utilizzo di un design adattivo usato due modi)), il primo è utilizzare il bootstrap framework, il secondo èScrittura query dei supporti

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top