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 ?