Probleme de longueur en CSS

**Morpheus262** · 31/03/2007, 10h47

Bonjour,

Voila j'ai un site, et pour une fois je voulais faire un design un peu "sophistiqué", mais comme a chaque fois je me bloque a l'eternel probleme de gerer les longueurs avec CSS.

Je m'explique, j'un un menu a gauche et un corps de page
mon corps de page est variable, mais la taille de mon menu gauche ne le suit pas.

J'aimerai que le bloc gauche et menu se termine au meme endroit.

ma 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
#conteneur{
    position: absolute;
    width: 96%;
    margin:2%;
}
 
#header{
    height:120px;
    border:1px solid #ffffff;
    padding:0px;
    background-color:#cc0066;
    color:#ffffff;
}
 
#gauche{
    position:absolute;
    left:0;
    width: 150px;
    background-color:#cc6699;
    margin-top:5px;
    border:1px solid #ffffff;
}
 
#corps{
    background-color:#e6b3cc;
    margin-left: 155px;
    margin-top:5px;
    border:1px solid #ffffff;
    /*padding:5px;*/
 
}
 
#situation{
    background-color:#ffccff; /*ffccff*/
    border-bottom:2px solid #660033;
    /*margin-top:-5px;
    margin-right:-5px;
    margin-left:-5px;*/
    padding-left:5px;
}
 
#menu_haut{
    background-color:#ffccff;
    border:2px solid #660033;
    margin:10px;
 
    padding:5px;
}
 
#footer{
    clear:both;
    text-align:center;
    border-top:2px solid #660033;
    background-color:#ffffff;
}
 
body{
    font-family:"Comic sans MS";
    color:#4e4e4e;
    font-size: 13px;
    margin: 0px;
    padding: 0px;
    background-color:#6B2E4D;
}

et ma structure de page :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <title>Acceuil</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" rel="stylesheet" href="style/style_test.css" />
</head>
<body>
    <div id="conteneur">
    <!-- Debut de la page -->
        <div id="header">
        <!-- Header -->
            <div id="bloc_titre">
 
            header
            </div>
            <div id="bloc_login">
            <!-- Bloc login/connecté -->
              bloc login
            </div><!-- fin bloc login -->
        </div><!-- fin bloc header -->
        <div id="gauche">
        <!-- Menu gauche -->
          <a href="">Accueil</a><br />
          <a href="">Messages</a><br />
          <a href="">Sondages</a><br />
          <a href="">Photos</a><br />
          <a href="">Concours</a><br />
          <a href="">Annuaire lieux</a><br />
          <a href="">Liens Web</a><br />
          <a href="">Membres</a><br />
        </div><!-- fin bloc gauche -->
        <div id="corps">
        <!-- Corps de la page -->
            <div id="situation">
            <!-- Situation -->
            situation
            </div><!-- fin bloc situation -->
            <div id="menu_haut">
            <!-- Menu haut optionnel depend de la page -->
            menu haut
            </div><!-- fin bloc menu haut -->
             <h1>Titre H1</h1>
             <h2>Sous titre</h2>
             <h3>Titre rubrique</h3>
             <h4>Titre sous rubrique</h4>
             <h5>Titre sous sous rubrique</h5>
        </div><!-- fin bloc corps -->
        <div id="footer">
        <!-- footer -->
           Copyright Administration
        </div><!-- fin bloc footer -->
    </div><!-- fin bloc page -->
</body>
</html>

D'avance merci pour votre aide

**trotters213** · 01/04/2007, 11h34

Le CSS que tu nous a donné montre en effet le problème. Par contre le lien que tu nous donnes ne fait pas apparaitre le problème (le CSS n'est pas le même

)
Aute remarque le rendu de ton site (le lien que tu nous donnes) est différent entre IE 6 et FF 2. Tu as un problème de hasLayout dans ta div cont_page.
Ajoute ceci :

Code :

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

height:100%;

dans ton div cont_page et ça devrait rentrer dans l'ordre.

**Morpheus262** · 02/04/2007, 14h55

En effet j'ai modifié entre temps le site et j'ai ajouté ce fameux cont_div pour obtenir un résultat proche de ce que je desirais (pas parfait mais bon)...

POur le resultat sous IE 6, il est deja different de IE 7 alors a partir de la pour le faire coller avec FF 2 dur dur...tant que tout s'affiche sans trop de bug graphique, meme si c'est different, je m'en contenterai j'ai renoncé a utiliser ce IE de mer... oups je m'emporte, donc je verifie juste que ca donne pas un résultat inverse non plus, mais je cherche pas a avoir le meme strictement, trop de subtilité m'echappe encore

Merci

Probleme de longueur en CSS

CSS

Discussions similaires

Partager

Partager