L'image fixe et le contenu chevauchent la barre latérale fixe en tant que résolution d'écran / taille de la fenêtre diminue

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

Question

J'ai une page avec la structure suivante: 

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

et formaté avec les CSS suivants: 

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;
}

Affichage de la page sur un écran large montre le contenu bien.Cependant, comme je réduisais la taille de la fenêtre, ou si j'en affiche le site sur un écran de résolution inférieur, l'image fixe et le texte en dessous de cela commencent à obscurcir la barre latérale, même s'il fait une échelle un peu.En outre, lorsque la page est défilante, même si une partie du texte se déplace pour créer de la place pour la barre latérale, le texte ci-dessous se chevauche lors de la défilement défilé.

Un exemple rugueux du problème peut être vu ici: http://jsfiddle.net/4wqzp/

Quels changements dois-je faire?

Edit: Pour clarifier, j'espérais une solution basée sur CSS / HTML uni.JavaScript est une option, bien que j'essaie de l'éviter depuis que je ne l'ai pas vraiment utilisé dans ce site jusqu'à présent.

Était-ce utile?

La solution

Pour utiliser une conception adaptative utilisée de deux manières)), le premier consiste à utiliser bootstrap framework, le second estécrire requêtes multimédias

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top