images de fond trois colonnes de même hauteur

images de fond trois colonnes de même hauteur - HTML/CSS - Programmation

Marsh Posté le 08-04-2010 à 15:24:03    

Bonjour, j'essaye de réaliser un site, mais j'ai quelques lacunes.
j'aimerais que les  2 colonnes du menu soit extensible par rapport au milieu.en résumé, que tout soit de même hauteur. d'après ce que j'ai compris, il faudrait que je fasse un fonds avec des images fond différentes. car les colonnes des menus son d'une même couleur, tandis que le milieu a une couleur différente.
mais de quel largeur et hauteur faire le fonds d'images, et qu'elle code metrent et ou.
je vous remercie par avance, de l'aide que vous trouverez m'apporter.
http://accessibilite-corsica.com/restaurants.php
 
 

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


 
_________________________
Code css
_________________________
 

Code :
  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. }


Message édité par julien2b le 08-04-2010 à 16:01:32
Reply

Marsh Posté le 08-04-2010 à 15:24:03   

Reply

Marsh Posté le 08-04-2010 à 15:45:05    

Tu dois mettre tes 3 blocs dans #principal
donc menus + content
Ensuite du dois employer la technique des "colonnes factices"
http://www.pompage.net/pompe/colonnesfactices/

Message cité 1 fois
Reply

Marsh Posté le 08-04-2010 à 16:25:14    

David Boring a écrit :

Tu dois mettre tes 3 blocs dans #principal
donc menus + content
Ensuite du dois employer la technique des "colonnes factices"
http://www.pompage.net/pompe/colonnesfactices/


 
Merci ta réponse.
j'aimerais bien trouver un modèle avec trois colonnes, car la, je comprends rien.

Reply

Marsh Posté le 08-04-2010 à 16:44:55    

tu peux trouver ton bonheur avec les gabarits d'Alsacreations  
http://www.alsacreations.com/stati [...] liste.html
 
Regardes ceux qui ont "simulation de colonnes de même hauteur"

Message cité 1 fois
Reply

Marsh Posté le 08-04-2010 à 17:22:02    

David Boring a écrit :

tu peux trouver ton bonheur avec les gabarits d'Alsacreations  
http://www.alsacreations.com/stati [...] liste.html
 
Regardes ceux qui ont "simulation de colonnes de même hauteur"


 
 
j'avais déjà regardé, mais je n'avais pas réussi.
je vais recommencer à nouveau demain.
merci!!

Reply

Marsh Posté le 09-04-2010 à 08:04:16    

Salut, voilà comment je procède pour ce genre de chose.
 
Tu crée tes 3 colonnes dans une div globale:
 

Code :
  1. <div id="global"> 
  2.  
  3. <div id="col1"> 
  4. <!-- Place le contenu de la colonne 1 ici --> 
  5. </div> 
  6.  
  7. <div id="col2"> 
  8. <!-- Place le contenu de la colonne 2 ici --> 
  9. </div> 
  10.  
  11. <div id="col3"> 
  12. <!-- Place le contenu de la colonne 3 ici --> 
  13. </div> 
  14.  
  15. </div>


 
 
Après pour le css je vais donner des largeurs à mes colonnes, respectivement 200, 500 et 200px soit au total 900 px.
Tu ouvre ton logiciel de dessin préféré, tu crée une image de 900px de largeur sur 10px de hauteur. Et tu dessine un fond divisé en 3 parties de 200, 500 et 200px. Tu appelle ce fond "bg.png" par exemple.
Ton code css ressemblera à ça:
 
 

Code :
  1. #global{ 
  2. width:900px; 
  3. background: url('bg.png') repeat-y; 
  4.  
  5. } 
  6.  
  7. #col1{ 
  8. width: 200px; 
  9. } 
  10.  
  11. #col2{ 
  12. width: 500px; 
  13. } 
  14.  
  15. #col3{ 
  16. width: 200px; 
  17. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed