[layout]Positionnement de menu flottant

Version imprimable

27/02/2007, 19h30
Laurent Gomila

1 pièce(s) jointe(s)

[layout]Positionnement de menu flottant

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 ?
27/02/2007, 19h50
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é)

Ok, voici un peu de code.

Tout d'abord ma structure HTML :

Code:

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:

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

re,

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

Code:

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:

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?

27/02/2007, 20h40
Laurent Gomila

Je vais essayer ça, merci.

Citation:

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.
27/02/2007, 20h57
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 ?
27/02/2007, 21h21
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
27/02/2007, 21h24
Dan_A

Citation:

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

Citation:

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.
28/02/2007, 08h46
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.

:merci:
28/02/2007, 09h50
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 ?
28/02/2007, 09h55
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...)
28/02/2007, 10h08
Bisûnûrs
Citation:

Envoyé par 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 ?

Bug IE6< :

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

Exemple :
Code:

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

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.
28/02/2007, 10h19
Laurent Gomila

Citation:

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