Discussion :

[jubourbon]

Bonjour,

J'ai actuellement une page avec un header, un menu à gauche et un container. Tous ces elements se mettent en place grace au CSS et au Float Left.

Mon probleme est, que lorsque j'affiche un element dans le container, plus large que le navigateur, le container vient se placer sous le menu et me fait donc une page blanche, avec un ascenseur et mon element en bas de page.

Je souhaiterais, qu'il reste bien à sa place, et qu'un ascenseur horizontal, plus que verticale me permette de naviguer.

J'ai 2 contrainte: Je suis sous IE6, et le contenu du container est completement dynamique et ne peut etre afficher en position absolue...

Merci d'avance.

[c_s_s]

Bonjour,

As-tu essayé d'ajouter un overflow:auto sur ton conteneur ?

Peux-tu nous montrer le code HTML/CSS que tu utilises (ou une page en ligne) ?

[jubourbon]

J'ai bien essayé le overflow, ca ne fonctionne pas

Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div id="container">
    <div id="header">
        <asp:Image ID="Image1" runat="server" ImageUrl="../images/bandeau.jpg"/>
    </div>
    <form id="form1" runat="server" method="post">
        <div id="menu">
            <div class="elementmenu">
            <span class="MenuSurCategorie">Categorie1</span>
                <a href="../../referentiel/Lapage.asp">LapagepourCat1</a>
            <span class="MenuSurCategorie">Categorie</span>
                <a href="../../referentiel/Lapage.asp">LapagepourCat2.1</a>
                <a href="../../referentiel/Lapage.asp">LapagepourCat2.2</a>
            </div>
        </div>
        <div id="contenu">
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/>  
        </div>
    </form>
</div>

et voici le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
html, body, form 
{
    height: 100%;
    padding:0;
    margin:0;
}
 
 
#container
{
    height:100%;
}
 
#header{
    height:65px;
    margin: 0;
}
#menu
{
    float: left;
    height: 100%;
    width: 185px;
}
#contenu
{
    height:100%;
    margin-top:20px;
}

J'ai volontairement enlevé du CSS ce qui concerne l'esthetique pour une meilleur lisibilité.

[c_s_s]

Quand j'essaie ton code (avec un doctype xhtml 1.0 strict) et que j'ajoute overflow:auto sur #contenu, j'ai bien une barre de défilement horizontale qui s'affiche si le contenu est plus large que la fenêtre de navigation.

Par contre, tu définis une hauteur de 100% pour le bloc #contenu, et cette hauteur s'ajoute à celle de ton header, donc tu as naturellement la barre de défilement verticale du navigateur qui apparaît.

La barre de défilement horizontale du bloc #contenu est donc masquée en bas de page.