problèmes de background et de div [résolu]

problèmes de background et de div [résolu] - HTML/CSS - Programmation

Marsh Posté le 07-04-2009 à 21:25:33    

Bonsoir tout le monde,  
ça fait un bail que je ne suis pas venu vous faire un petit coucou..
 
Voila je rencontre un soucis que je n'arrive pas à résoudre et qui pourtant doit être très simple..
 
J'ai pour l'instant un design de ce type :  
http://img12.imageshack.us/img12/2787/image01r.th.jpg
 
j'ai réussi à mettre en place toutes les div, marquées en soulignées sur l'image.. pas de soucis tout fonctionne bien.
Mon seul soucis réside dans le fait que j'aimerais faire en sorte que le texte de mon contenu soit au dessus du bg de mon contenu.. POur ça aucun soucis, mais je rencontre un problème en souhaitant mettre dans mon contenu 3 images de background différentes..
 
Je m'explique avec cette image :  
http://img4.imageshack.us/img4/5931/image02b.th.jpg
 
Comme vous le constatez, avec le contenu plus important, l'image du haut reste en place, l'image du bas reste en bas de mon div, et l'image du milieu est étendue ...
C'est ceci que je n'arrive pas à faire.  
Faire en sorte que mon div est 3 images de fond, une qui restera toujours en haut, une autre toujours en bas, et une autre qui ce répètera pour combler le vide entre les deux ...  
j'ai effectué pas mal de testes, avec 3 div pour chaque image en z-index, mais ça me fais un truc très foireux..  
 
Voici mon bout de code simplifié :  

Code :
  1. <body>
  2.     <div id="global">
  3.         <div id="entete"></div>
  4.         <div id="menuKC">
  5.         </div>
  6.         <div id="centre">
  7.             <div id="flashGroupe">...</div>
  8.             <div id="contenu">
  9.              <div id="contenuHaut">
  10.              <div id="contenuBas">
  11.                 <div id="contenuCentre">
  12.                  Tribus hanc e partibus tangit oceanus, ita nominibus ut locis differens; Eous ab oriente, a meridie Indicus, a septentrione Scythicus. Ipsa, ingenti ac perpetua fronte versa ad orientem, tantum ibi se in latitudinem effundit, quantum Europe et Africa, et quod inter ambas Pelagus immissum est. Inde cum aliquatenus solida processit, ex illo oceano, quem Indicum diximus, Arabicum mare et Persicum, ex Scythico Caspium recipit: et ideo qua recipit angustior, rursus expanditur, et fit tam lata, quam fuerat. Deinde, cum jam in suum finem aliarumque terrarum confinia devenit, media Nostris aequoribus excipitur: reliqua altero cornu pergit ad Nilum, altero ad Tanain. Ora ejus cum alveo Nili amnis descendit in Pelagus; et diu, sicut illud incedit, ita sua litora porrigit: dein fit venienti obviam, et primum se ingenti ambitu incurvat; post se ingenti fronte ad Hellesponticum fretum extendit: ab eo iterum obliqua ad Bosporum, iterumque ad Ponticum latus curva, aditum Maeotidos transverso margine attingit. Ipsam gremio ad Tanain usque complexa, fit ripa, qua Tanais est. <br />
  13.                 </div></div></div>
  14.             </div>   
  15.         </div>
  16.         <div id="pieddepage"></div>
  17.     </div>


 
Rien de bien sorcier  
et le css simplifié aussi juste pour le contenu
 

Code :
  1. /* Contenu secondaire */
  2. #contenu {
  3. width:745px;
  4. height:500px;
  5. margin-left:279px;
  6. z-index:10;
  7. /*background-image:url(../images/contenu_15.png);*/
  8. }
  10. /* le min height pour les autres navigateurs que IE */
  11. html>body #contenu {
  12. height: auto;
  13. min-height: 500px;
  14. }
  16. /* Contenu secondaire */
  17. #contenuHaut {
  18.  width:745px;
  19.  height:254px;
  20.  background-image:url(../images/contenu_bis_09.png);
  21.  background-position:top left;
  22.  background-repeat:no-repeat;
  23.  z-index:1;
  24.  /*background-image:url(../images/contenu_15.png);*/
  25. }
  27. /* le min height pour les autres navigateurs que IE */
  28. /*html>body #contenuHaut {
  29.  height: auto;
  30.  min-height: 500px;
  31. } */
  33. /* Contenu secondaire */
  34. #contenuBas {
  35.  width:745px;
  36.  height:216px;
  37.  background-image:url(../images/contenu_bis_12.png);
  38.  background-position:bottom left;
  39.  background-repeat:no-repeat;
  40.  z-index:3;
  41.  /*background-image:url(../images/contenu_15.png);*/
  42. }
  44. #contenuCentre {
  45.  width:745px;
  46.  height:500px;
  47.  background-image:url(../images/contenu_bis_10.png);
  48.  background-repeat:repeat-y;
  49.  z-index:2;
  50.  /*background-image:url(../images/contenu_15.png);*/
  51. }
  53. /* le min height pour les autres navigateurs que IE */
  54. html>body #contenuCentre {
  55.  height: auto;
  56.  min-height: 500px;
  57. }


 
Est ce que quelqu'un à déjà eu à faire ce genre de manipulation et si oui est ce qu'il pourrait m'éclairer de ses lanternes pour voir un peu comment je peux bidouiller tout ça ..
 
Attention je tiens à préciser que le code html est un test, donc je sais que les div sont très mal imbriqués et autre hein, c'est l'un de mes nombreux tests ^^
Merci par avance pour tous ceux qui pourront m'aider :)  
 
 [:magnasuprema]


Message édité par micfont999 le 07-04-2009 à 21:57:43

---------------
> http://graphicriver.net/user/micfo [...] micfont999  
Reply

Marsh Posté le 07-04-2009 à 21:25:33   

Reply

Marsh Posté le 07-04-2009 à 21:44:08    

tu dois avoir des div placés comme ça :

Code :
  1. <div id="contenu"> 
  2.    <div id="contenuBas"> 
  3.         Contenu texte 
  4.     </div> 
  5. </div>


 
tu donnes seulement la largeur à contenu, la hauteur se fera en fonction du contenu de contenuBas...
contenu aura l'image du haut, en no-repeat et aligné en haut, ainsi qu'un fond gris.
contenuBas aura l'image du bas, en no-repeat et aligner en bas. Il aura aussi un min-height pour eviter le chevauchement de background avec contenu.
 
On s'est compris ? ^^


Message édité par abais le 07-04-2009 à 21:45:06

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 07-04-2009 à 21:47:40    

oui on s'est compris, sauf que je ne peux pas mettre un fond gris :)  
Le fond qui dois ce répéter doit être également une image :( :( c'est bien ça le soucis ... les images que j'ai fourni dans le topic sont un exemple...  
 
Merci à toi pour ta réponse rapide.. c'est gentil

Reply

Marsh Posté le 07-04-2009 à 21:57:17    

Bon voila la solution à tous mes problèmes, t'étais pas si loin en fait :)  
 

Code :
  1. <div id="contenu">
  2.              <div id="contenuCentre">
  3.              <div id="contenuHaut">
  4.              <div id="contenuBas">
  5.                
  6.                  Tribus hanc e partibus tangit oceanus, ita nominibus ut locis differens; Eous ab oriente, a meridie Indicus, a septentrione Scythicus. Ipsa, ingenti ac perpetua fronte versa ad orientem, tantum ibi se in latitudinem effundit, quantum Europe et Africa, et quod inter ambas Pelagus immissum est. Inde cum aliquatenus solida processit, ex illo oceano, quem Indicum diximus, Arabicum mare et Persicum, ex Scythico Caspium recipit: et ideo qua recipit angustior, rursus expanditur, et fit tam lata, quam fuerat. Deinde, cum jam in suum finem aliarumque terrarum confinia devenit, media Nostris aequoribus excipitur: reliqua altero cornu pergit ad Nilum, altero ad Tanain. Ora ejus cum alveo Nili amnis descendit in Pelagus; et diu, sicut illud incedit, ita sua litora porrigit: dein fit venienti obviam, et primum se ingenti ambitu incurvat; post se ingenti fronte ad Hellesponticum fretum extendit: ab eo iterum obliqua ad Bosporum, iterumque ad Ponticum latus curva, aditum Maeotidos transverso margine attingit. Ipsam gremio ad Tanain usque complexa, fit ripa, qua Tanais est. <br />
  7.                    
  8.                    
  9.                 </div></div></div>
  10. </div>


 
 
et le css  
 

Code :
  1. /* Contenu secondaire */
  2. #contenu {
  3. width:745px;
  4. height:500px;
  5. margin-left:279px;
  6. z-index:10;
  7. /*background-image:url(../images/contenu_15.png);*/
  8. }
  10. /* le min height pour les autres navigateurs que IE */
  11. html>body #contenu {
  12. height: auto;
  13. min-height: 500px;
  14. }
  16. /* Contenu secondaire */
  17. #contenuHaut {
  18.  width:745px;
  19.  background-image:url(../images/contenu_bis_09.png);
  20.  background-position:top left;
  21.  background-repeat:no-repeat;
  22.  z-index:1;
  23.  /*background-image:url(../images/contenu_15.png);*/
  24. }
  26. /* le min height pour les autres navigateurs que IE */
  27. /*html>body #contenuHaut {
  28.  height: auto;
  29.  min-height: 500px;
  30. } */
  32. /* Contenu secondaire */
  33. #contenuBas {
  34.  width:745px;
  35.  height:500px;
  36.  background-image:url(../images/contenu_bis_12.png);
  37.  background-position:bottom left;
  38.  background-repeat:no-repeat;
  39.  z-index:3;
  40.  /*background-image:url(../images/contenu_15.png);*/
  41. }
  43. #contenuCentre {
  44.  width:745px;
  45.  background-image:url(../images/contenu_bis_10.png);
  46.  background-repeat:repeat-y;
  47.  z-index:2;
  48.  /*background-image:url(../images/contenu_15.png);*/
  49. }
  51. /* le min height pour les autres navigateurs que IE */
  52. html>body #contenuBas {
  53.  height: auto;
  54.  min-height: 500px;
  55. }


 
l'ordre est donc vraiment important :)  
 
Merci à vous de votre lecture ^^ et merci à toi pour l'indice ^^


---------------
> http://graphicriver.net/user/micfo [...] micfont999  
Reply

Sujets relatifs:

Leave a Replay

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