Probleme de longueur en CSS
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:
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:
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
