Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
625 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  images de fond trois colonnes de même hauteur

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

images de fond trois colonnes de même hauteur

n°1982032
julien2b
Posté le 08-04-2010 à 15:24:03  profilanswer
 

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. ?>
  5.   <?
  6. include('menucampig1.php');
  7. ?>
  8.  
  9.   <?
  10. include('menucampig2.php');
  11. ?>
  12. <div id="principal">
  13.   <div id="content"> 
  14.   </div></div>
  15.   <?
  16. include('cadrebas.php');
  17. ?>
  18. </div>


 
_________________________
Code css
_________________________
 

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


Message édité par julien2b le 08-04-2010 à 16:01:32
mood
Publicité
Posté le 08-04-2010 à 15:24:03  profilanswer
 

n°1982049
David Bori​ng
Posté le 08-04-2010 à 15:45:05  profilanswer
 

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/

n°1982079
julien2b
Posté le 08-04-2010 à 16:25:14  profilanswer
 

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.

n°1982091
David Bori​ng
Posté le 08-04-2010 à 16:44:55  profilanswer
 

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"

n°1982107
julien2b
Posté le 08-04-2010 à 17:22:02  profilanswer
 

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

n°1982309
aspirateur
Posté le 09-04-2010 à 08:04:16  profilanswer
 

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. <div id="col1">
  3. <!-- Place le contenu de la colonne 1 ici -->
  4. </div>
  5. <div id="col2">
  6. <!-- Place le contenu de la colonne 2 ici -->
  7. </div>
  8. <div id="col3">
  9. <!-- Place le contenu de la colonne 3 ici -->
  10. </div>
  11. </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. #col1{
  6. width: 200px;
  7. }
  8. #col2{
  9. width: 500px;
  10. }
  11. #col3{
  12. width: 200px;
  13. }


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  images de fond trois colonnes de même hauteur

 

Sujets relatifs
réceptionnaire d'évenement pour tester en tache de fond une entréeDreamweaver : mettre une image de fond derriere un titre
Module de news en diapo d'images[RESOLU] [JS] Echanger deux images
Selection et tri sur plusieurs tables avec memes colonnesTexte de la même couleur que le fond
Script java zoom d'imagesSquelettisation sur des images 2D
superposition d'images en cssafficher images ds certains div / choix bouton php
Plus de sujets relatifs à : images de fond trois colonnes de même hauteur


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR