[CSS] Placement "bancal" de blocs div
Bonjour,
J'ai un petit problème gênant au niveau de la prise en charge des blocs div et de leur agencement en CSS. Voici déjà le code HTML :
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
| <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top">
<h1>Kerbos</h1>
</div>
<div id="body">
<div id="menu">
<ul>
<li><a href="index.php?q=1:0:0:0:0:0">Accueil</a></li>
<li><a href="index.php?q=1:0:0:0:0:0">Jouer</a></li>
<li><a href="index.php?q=1:0:0:0:0:0">Forum</a></li>
<li><a href="index.php?q=1:0:0:0:0:0">Messages</a></li>
<li><a href="index.php?q=1:0:0:0:0:0">Profil</a></li>
<li><a href="index.php?q=1:0:0:0:0:0">A propos</a></li>
</ul>
</div>
<div id="content">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetuer [...]</p>
<p>[...]</p>
<p>[...]</p>
<p>[...]</p>
<p>[...]</p>
</div>
</div>
</div>
</div>
</body>
</html> |
Le code 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| /*
-------------------------------------------------------------------
Global Definitions
-------------------------------------------------------------------
*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
}
/*
-------------------------------------------------------------------
Global Skelton
-------------------------------------------------------------------
*/
#top h1 {
display: none;
}
#top {
height: 0px;
}
#container {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
padding-top: 74px;
background: #FFFFFF url('../images/kerbos_medium.jpg') no-repeat 15px 15px;
}
#body {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
#content {
margin: 0px 0px 0px 200px;
padding: 0px 10px 10px 10px;
background-color: #FF0000;
}
#menu {
width: 200px;
height: 100%;
float: left;
background: #F2F2F2 url('../images/menu_bottom.gif') no-repeat bottom left;
}
/*
-------------------------------------------------------------------
Menu
-------------------------------------------------------------------
*/
#menu ul {
list-style-type: none;
padding: 0px 0px 5px 0px;
margin: 0px;
}
#menu li {
border-bottom: 1px solid #DDDDDD;
padding: 8px 10px 8px 15px;
border-right: 1px solid #DDDDDD;
}
#menu a {
font-size: 12px;
color: #000000;
text-decoration: none;
}
#menu a:hover {
text-decoration: underline;
} |
Et enfin une capture de ce que ça donne sous Safari (idem Firefox et IE...) :
http://img379.imageshack.us/img379/5179/capt4ui.png
La coloration rouge est faite à des fins de test, et vous aurez compris qu'au final je voudrais coller le bloc du contenu à la bordure haute. Mais ça ne marche pas....
D'avance merci.
