[debutant] utiliser les DIV pour créé un menu.
Bonjour , au départ , j'utilisai les tableau pour ma mise en page, j'ai voulu faire un peu mieux , utiliser les DIV comme s'est expliqué sur le cour : http://pbnaigeon.developpez.com/tuto...-page-CSS/#LII
Problème , on a tous des écran différent , donc il faut le modifier ...
La page HTML light
Code:
1
2
3
4
5
6
|
....
<body>
<div id="haut"> <!-- Baniére --></div>
<div id="menu"><!--ZONE MENU--></div>
<div id="contenu"><!--ZONE Contenu--></div> |
Tout le code HTML générer , j'utilise pas mal de tableau , mais s'est prévu d'en faire partir quelques un ...
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://localhost/css/site.css">
<script language="JavaScript" type="text/javascript" src="http://localhost/menu.js"></script> </head>
</head>
<body>
<div id="haut">
<a href="http://localhost"><img src="http://localhost/img/banniere/banniere.jpg" border="0">
</div>
<!--ZONE MENU-->
<div id="menu"><table class="menu">
<tr><th>TEST</th></tr>
<tr><td><ul id="menu1" class="treeview"> <li><strong>TEST222</strong> <ul>
<li> <a href="http://localhost/page-1.html">NEW</a> </li>
</ul></li></ul></td></tr>
<script type="text/javascript">ddtreemenu.createTree("menu1", true);</script>
<tr><td><ul id="menu4" class="treeview"> <li><strong>test333</strong> <ul>
<li> <a href="http://localhost/page-5.html">Menu1</a> </li>
</ul></li></ul></td></tr>
<script type="text/javascript">ddtreemenu.createTree("menu4", true);</script>
</table><br><table class="lien"><tr><td>
<b>Mes liens</b><br />
<a href="http://www.voila.fr">voila.fr</a></td></tr></table>
<br>
<table class="identification"><tr><td>
<H2>Identification</H2>
<form action="http://localhost/robotm/page-1.html" method="post">
<TABLE width="100%">
<TR><TD>Login</TD><TD><input type="text" name="login"></TD></TR>
<TR><TD>Pass</TD><TD><input type="password" name="pass"></TD></TR>
<TR><TD></TD><TD><input type="hidden" name="action" value="conex">
<input type="submit" value="Se connecter"></TD></TR>
</TABLE>
</form>
<a href="http://localhost/index.php?type=inscription">S'inscrire</a> | <a href="http://localhost/index.php?type=pass_perdu">Mot de passe perdu</a>
</td></tr>
</table></div>
<!--ZONE contenu-->
<div id="contenu"><table class="cadre_page" >
<tr class="page_contenu"><td>Bonjour <br />
<br />
Bienvenue ici <br />
<br />
<b>S'est du BBCODE</b><br />
<br />
<a href="page-2.html">Lien </a><br />
<br />
<br />
<br />
efz dadajfezf oao zefiekzfjz jezf firjf eizjf jezif jiezf hejzfij hzfji ehjdi ezifze iezf jizef jiezjf izejfeiziefzeiz&lt;f jrij ezjjezjfzirjf ij jezjf jzefjezfo ijez rhg zjefjzehjzeij okoek jioejf zrjf iozejko zrjoezj iojijzeojezf iojze jjzeifezez joez jezifjzefkiezfjez fjio zefoezjio ze oez fjjezjioezf oze jez foepzthth tr t tregre reg <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
djze<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
efz<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
efz dadajfezf oao zefiekzfjz jezf firjf eizjf jezif jiezf hejzfij hzfji ehjdi ezifze iezf jizef jiezjf izejfeiziefzeiz&lt;f jrij ezjjezjfzirjf ij jezjf jzefjezfo ijez rhg zjefjzehjzeij okoek jioejf zrjf iozejko zrjoezj iojijzeojezf iojze jjzeifezez joez jezifjzefkiezfjez fjio zefoezjio ze oez fjjezjioezf oze jez foepzthth tr t tregre reg </td></tr></table>
<br>
<table class="cadre_page" ><tr><td>
<table class="galerie"><tr><th>Bonjour a tous </th></tr><tr><td>Voila mon site<br><a href="http://localhost/page-1">Lire la suite</a></td></tr></table></td></tr></table>
</div><!--ZONE FIN-->
</body> |
Le Fichier CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| div {
text-align:center;
}
div#haut {
width:100%;
height:auto;
}
div#menu {
float:left;
width:200px;
height:100%;
}
div#contenu {
float:left;
width:100%;
height:100%;
} |
Merci d'avance pour votre aide
