Discussion :

[Laurent Gomila]

Salut

J'ai un site web dont la mise en page est la suivante :
- Un DIV pour le menu, collé à gauche à l'aide d'un "float : left"
- Un DIV pour le contenu de la page

Mon problème est que comme le menu est un élément flottant, tout n'est pas décalé correctement à sa droite.

Un schéma valant mieux que milles explications, voici en pièce jointe ce que j'ai (à gauche) et ce que je voudrais (à droite).

Donc, comment faire pour avoir un menu qui soit correctement positionné à gauche sans ces inconvénients de mise en page ?

[MasterOfChakhaL]

salut,

Les captures, c'est bien, mais la plupart du temps, le code reste le mieux

Avant de te répondre, il faudrait savoir quels sont les éléments dont tu maitrises la largeur.
(width défini, quelque soit l'unité)

[Laurent Gomila]

Ok, voici un peu de code.

Tout d'abord ma structure HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="navigation">
    <div id="main_menu">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <a href="..." ><img ... /></a>
</div>
 
<div id="content">
   ...
</div>

Les éléments importants des styles :

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
 
div#navigation
{
    float         : left;
    margin-top    : 0.5em;
    margin-right  : 1.5em;
    margin-bottom : 1em;
}
 
div#main_menu
{
    font-size     : large;
    width         : 150px;
    height        : 300px;
    margin-bottom : 10px;
    background    : url("./images/menu-bg.jpg") no-repeat;
    border        : 1px solid white; /* FireFox bug ?? */
}
 
div#content
{
    padding : 1em;
}

Donc, seule la taille du menu est fixe (pour coller à l'image de fond).

[MasterOfChakhaL]

re,

en modifiant un tout petit peu ton balisage html, tu peux y arriver:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="container">
    <div id="navigation">
        <div id="main_menu">
            <ul>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
        <a href="..." ><img src="" alt="" /></a>
    </div>
    <div id="content">
 
    </div>
</div>

et 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
30
div#navigation
{
    width: 152px; /* la largeur de main_menu + de ses bordures */
    margin-left: -152px;
 
    float         : left;
    margin-top    : 0.5em;
    /*margin-right  : 1.5em;*/
    margin-bottom : 1em;
}
 
div#main_menu
{
    font-size     : large;
    /*width         : 150px;*/
    height        : 300px;
    margin-bottom : 10px;
    background    : url("./images/menu-bg.jpg") no-repeat;
    border        : 1px solid white; /* FireFox bug ?? */
}
 
div#container
{
    margin-left: 152px;
}
div#content
{
    padding: 1em;
    padding-left: 1.5em; /*compense le margin-right enlevé dans #navigation*/
}

si tu as besoin d'explications... tu sais où poster

EDIT: pourquoi fais-tu référence a un bug de firefox dans ton code? de quoi s'agit-il?

[Laurent Gomila]

Je vais essayer ça, merci.

EDIT: pourquoi fais-tu référence a un bug de firefox dans ton code? de quoi s'agit-il?

En fait si je ne mets pas de bordure, le DIV "main_menu" est décalé en hauteur par rapport à son parent, alors qu'il n'y a aucune marge sur l'un ou l'autre des DIV. Ca ne le fait ni avec une bordure (que j'ai mis de la même couleur que le fond du coup), ni sous IE, ce qui m'amène à penser que c'est un bug de FF.

[Laurent Gomila]

Ca marche avec ta solution, si ce n'est que tout est décalé de 152 pixels vers la gauche (le menu sort de l'écran). Quelle serait la solution la plus propre pour corriger ça ?

[MasterOfChakhaL]

T'es sur de ton coup?

Soit tu as quelque chose qui interfère dans ta page, soit tu as inversé content et container dans le code que je te propose...

Si t'as moyen de mettre ca en ligne...

EDIT:
question subsidiaire -> as tu déclaré un doctype au début de ta page?
Sans doctype, tu peux difficilement espérer faire des choses subtiles au niveau positionnement en css

[Dan_A]

Ca ne le fait ni avec une bordure (que j'ai mis de la même couleur que le fond du coup), ni sous IE, ce qui m'amène à penser que c'est un bug de FF.

ça aurait pu arriver avec un autre navigateur ( http://www.complexspiral.com/publica...psing-margins/ )

si ce n'est que tout est décalé de 152 pixels vers la gauche (le menu sort de l'écran).

Avec tous les navigateurs ?
La totalité du code ou un lien vers la page permettrait peut-être de répondre.

[Laurent Gomila]

Désolé, c'était une bête erreur de syntaxe dans mon CSS, ça fonctionne au poil maintenant.

Merci également pour la petite lecture concernant les marges, c'était très instructif.

[Laurent Gomila]

J'ai parlé trop vite : cette solution ne marche pas sous IE (tout est placé correctement mais le menu disparaît).
J'ai un vague souvenir de problèmes avec les marges négatives sous IE 6, est-ce que ça pourrait être ça ?

[MasterOfChakhaL]

re,

Il n'y a pas de probmème spécial pour les marges négatives et IE.
As-tu un doctype dans ta page? Sans doctype IE ne gère pas le même modèle de boite, et donc les éléments n'auront pas la même taille. Vu que ici, on définit précisément les dimensions, ca pourrait venir de là.

Tu peux essayer de mettre ton menu en display:inline (ca fait que IE gère les flottants de manière plus conforme).
Tu peux également passer ton div (id=content) en float right.

En tout cas, soit sur que c'est possible d'obtenir cette mise en page sur ie avec des marges négatives (je parle à partir d'IE6 avant, je n'en sais rien...)

[Bisûnûrs]

J'ai parlé trop vite : cette solution ne marche pas sous IE (tout est placé correctement mais le menu disparaît).
J'ai un vague souvenir de problèmes avec les marges négatives sous IE 6, est-ce que ça pourrait être ça ?

Bug IE6< :

Les marges horizontales sont doublées sur le premier élément d'une série d'éléments flottants.

Exemple :

Code :

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

1
2
3
4
5
6
7
.marge{
   float:left;
   margin-left:50px;
   width:300px;
   height:100px;
   background:#f00;
}

Code html :

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

1
2
3
<div class="marge">Texte</div>
<div class="marge">Texte2</div>
<div class="marge">Texte3</div>

La première marge à gauche vaudra alors 100px et les autres 50px comme correct.

Solution : Basculer le premier élément (voire tous, ça ne changera rien) à inline : display:inline;

Un exemple vaut certainement mieux qu'un long discours : Hop.

Donc du coup, ta marge négative est doublée sur IE6, ce qui fait que tu ne vois plus ton menu étant trop à gauche.

[Laurent Gomila]

Bug IE6< :

Les marges horizontales sont doublées sur le premier élément d'une série d'éléments flottants.

Parfait, c'était bien ça. Merci beaucoup