1. <div id="template">
2. <?
3. include('cadrehaut.php');
4. ?>
6.   <?
7. include('menucampig1.php');
8. ?>
9.  
10.   <?
11. include('menucampig2.php');
12. ?>
13. <div id="principal">
14.   <div id="content"> 
17.   </div></div>
18.   <?
19. include('cadrebas.php');
20. ?>
21. </div>

1. body {
2. padding: 0px;
3. margin: 0px;
5. }
6. #template {
7. color: #000;
8. width: 90%;
9. max-width: 90em;
10. min-width: 850px;
11. margin-left: auto;
12. margin-right: auto;
13. background-color: #DDDDDD;
14. -moz-border-radius: 15px;
15. -webkit-border-radius: 15px;
16. -khtml-border-radius: 15px;
17. border-top: 5px solid #333;
18. border: thick green double;
19. }
20. /* Contenu principal */
21. #principal {
22. font-family: arial, helvetica, verdana, sans-serif;
23. font-family: 'times new roman', times, serif;/* ajouté */
24. font-size: 1.5em;
25. line-height: 1.5em;
26. }
27. /***********************************************/
28. /*pour les liens externe */
29. /***********************************************/
30. a.lien_ext:after {
31. content: "\0000a0[\2197]";
32. }
33. a:focus/*ca retire le cadre autour des liens externes */
34. {
35. outline:0;
36. }
37. /***********************************************/
38. /* ENTETE */
39. /***********************************************/
40. #header {
41. font-family: arial, helvetica, verdana, sans-serif;
42. font-family: 'times new roman', times, serif;/* ajouté */
43. background-color: #DDD;
44. height: 160px;
45. text-align: center;
46. color: #000;
47. font-weight: bold;
48. }
49. div#logo {
50. float:left;
51. height: 160px;
52. background-color:#FF3300;
53. }
54. /***********************************************/
55. /* message déroulant haut de page */
56. /***********************************************/
57. #message{
58. background-color:#8AC1F2;
59. border-top: 2px solid green;
60. border-bottom: 2px solid green;
61. }
63. /***********************************************/
64. /* PARTIE CENTRALE ACCUEIL*/
65. /***********************************************/
66. div#blocnews {
67. float:right;
68. width:230px;
69. height:430px;
70. background-color:#FF3300;
71. padding-top: 0px;
72. }
73. /***********************************************/
74. /* PIED DE PAGE */
75. /***********************************************/
76. #pied {
77. height: 120px;
78. padding: 5px;
79. background: #FFCC99;
80. text-align: center;
81. margin-top: 2px;
82. font-weight: bold;
83. border-top: 2px solid green;
84. clear:both;
85. }
86. /***********************************************/
87. /*block Menu Boutons*/
88. /***********************************************/
90. #boutons{
91. font-family: arial, helvetica, verdana, sans-serif;
92. font-family: 'times new roman', times, serif;/* ajouté */
93. margin: 0px;
94. font-weight: bold;
95. color: black;
96. height: 128px;/* origine 125*/
97. background-color: #FFCC99;/*le fonds darkred */
98. }
99. /***********************************************/
100. /* Menu Boutons*/
101. /***********************************************/
103. a { text-decoration: none;
104. font-weight: bold;
105. background-color: #FF9900; /*le fonds bouton */
106. color: black;
107. }
108. a:visited { color: black; } /*jaune */
109. a:hover { color: black; }  /* lettres qui changent au passage de la souris */
110. a:active { color: #CCC; /* le fonds des boutons change au passage de la souris */}
112. /* DEBUT LISTE 5 - CODE INTEGRAL */
113. ul.liste5 { /* style de la liste <ul> */
114. margin:5px 0 5px 0 ; /* marges */
115. height:1em ; /* hauteur de la liste - remplace le spacer normalement indispensable pour les float */
116. display:table ; /* fait passer la liste en mode table */
117. border-collapse:collapse ; /* fusionne les bordures de la table */
118. width:99%} /* largeur de la liste 99% <ul> */
120. ul.liste5 li { /* style des <li> */
121. margin:3px;/*rajoutésmargin:5px; */
122. float:left ; /* le float:left remplace le display:inline. permet le passage en DTD stricte */
123. border:2px solid green ; /* bordure rouge autour de chaque <li> */
124. width:23.7% ; /* largeur de chaque 21.7 %<li> */
125. text-align:center} /* centre le texte dans chaque <li> */
127. /* cacher à IE */
128. ul.liste5>li {display:table-cell} /* indispensable pour que les autres navigateurs que IE accepte la largeur de <li> */
130. .liste5 a { /* style des liens sans survol */
131. text-decoration:none ; /* pas de soulignement */
132. color: black; /* police bouton*/
133. display:block;} /* l'effet de hover prendra toute la largeur du <li> */
135. .liste5 a:hover {/* style des liens avec survol */
136. color: black; background-color:#DDDDDD;} /* changement de couleur au survol des boutons */
137. /***********************************************/
138. /* titre du site haut de page */
139. /***********************************************/
140. #titre{
141. font: 25px arial, helvetica, verdana, sans-serif;
142. color: #008000;
143. font-weight: bold;
144. text-align: center;
145. line-height: 2em;
146. }
148. /***********************************************/
149. /* Line séparateur */
150. /***********************************************/
151. .spacer {
152. background-color: #FFCC33;
153. clear: both;
154. border: 1px solid #000;
155. }
156. /***********************************************/
157. /* MENU GAUCHE */
158. /***********************************************/
159. #menu{
160. float:left;
161. width: 125px;
162. left: 0px;
163. background-color: #FFCC99;
164. color: black;
165. font: 12px arial, helvetica, verdana, sans-serif;
166. font-weight: bold;
167. border-right: 2px solid green;
168. }
169. #menu ul{
170. list-style-type: none;
171. margin: 0px;
172. padding: 0px;
173. }
174. #menu li a{
175. margin: 0px;
176. padding: 2px;
177. display: block;
178. height: 1em;
179. color: #000;
180. text-decoration: none;
181. }
182. #menu a:hover{
183. background-color: #add8e6;
184. }
185. #menu h5{
186. font-weight: bold;
187. font-size: 1.5em;
188. border: 1px solid #6495ED;
189. background-color: green;/* couleur marrons  Haute-Corse*/
190. color: #fff;
191. text-align: center;
192. margin: 0px;
193. }
196. /***********************************************/
197. /* MENU DROITE */
198. /***********************************************/
199. #Rmenu{
200. float:right;
201. right: 0px;
202. width: 125px;
203. background-color: #FFCC99;
204. color: black;
205. font: 12px arial, helvetica, verdana, sans-serif;
206. font-weight: bold;
207. border-left: 2px solid green;
208. }
210. #Rmenu ul{
211. list-style-type: none;
212. margin: 0px;
213. padding: 0px;
214. }
215. #Rmenu li a{
216. margin: 0px;
217. padding: 2px;
218. display: block;
219. height: 1em;
220. color: #000;
221. text-decoration: none;
222. }
223. #Rmenu a:hover{
224. background-color: #add8e6;
225. }
226. #Rmenu h5{
227. font-weight: bold;
228. font-size: 1.5em;
229. border: 1px solid #6495ED;
230. background-color: green;/* couleur marrons  Corse du Sud*/
231. color: #fff;
232. text-align: center;
233. margin: 0px;
234. }

<div id="global">

<div id="col1">
<!-- Place le contenu de la colonne 1 ici -->
</div>

<div id="col2">
<!-- Place le contenu de la colonne 2 ici -->
</div>

<div id="col3">
<!-- Place le contenu de la colonne 3 ici -->
</div>

</div>

#global{
width:900px;
background: url('bg.png') repeat-y;

}

#col1{
width: 200px;
}

#col2{
width: 500px;
}

#col3{
width: 200px;
}