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 :
Le code 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 <!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>
Et enfin une capture de ce que ça donne sous Safari (idem Firefox et IE...) :
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
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; }
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.
Partager