[debutant] utiliser les DIV pour créé un menu.

**paterson** · 05/09/2008, 14h23

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 :

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

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 :

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
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&amp;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&amp;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 :

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
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

**HiRoN** · 05/09/2008, 16h09

Envoyé par paterson

Problème, on a tous des écran différent, donc il faut le modifier...

Et donc ? But du post ?

Si page < hauteur résolution = Page en height:100%
Si page > hauteur résolution = Page qui s'adapte
?

Si oui, un ptit tour ici pourrait aider...
Sinon, j'ai rien compris...

**paterson** · 05/09/2008, 16h34

Désolé , je me suis mal expliqué .

Se que je veux faire , s'est le fichier 1

Se que j'ai, s'est le fichier 2 , quand je met pas mal de texte dans contenu .

J'ai déjà tenter quelques truc , mais sa marche pas

**HiRoN** · 05/09/2008, 17h55

Regarde ceci, ca devrait sûrement t'aider...

Dans l'idée :

Code HTML :

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

1
2
3
4
5
6
 
<div id="conteneur">
	  <div id="header">header </div>
	  <div id="gauche">Gauche</div>
	  <div id="centre">Contenu</div>
</div>

Code CSS :

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

1
2
3
4
5
 
html, body { height:100%; padding:0; margin:0; }
#conteneur { position: absolute; width:100%; background-color:#CCCCFF; }
#centre { background-color:#9999CC; margin-left: 200px; }
#gauche { position: absolute; left:0; width:200px; height:100%; }

**paterson** · 05/09/2008, 19h32

Merci HiRoN , sa fonctionne nickel .

[debutant] utiliser les DIV pour créé un menu.

CSS

Discussions similaires

Partager

Partager