Se connecter avec
S'enregistrer | Connectez-vous

Petit problème avec mon design en css

Dernière réponse : dans Programmation

Bonsoir,

J'essaye de mettre en place le design que j'ai réalisé mais voilà j'ai un petit soucis, je n'arrive pas à répéter verticalement deux images en fonction de la longueur de mes articles qui se trouvent entre ces deux images.

Code XHTML :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" >
  3.  
  4. <head>
  5. <link rel="stylesheet" media="screen" type="text/css" href="lien.css" />
  6. <link rel="stylesheet" media="screen" type="text/css" href="design.css" />
  7. <link rel="stylesheet" media="screen" type="text/css" href="menu.css" />
  8. <*script type="text/javascript" src="menu.js"></script>
  9. </head>
  10.  
  11. <body  onload="setHover()">
  12. <!--Bannière--!>
  13. <div id="banniere"></div>
  14.  
  15. <!--Colonne de gauche--!>
  16. <div id="colonneg"></div>
  17.  
  18. <!--Colonne de droite--!>
  19. <div id="colonned"></div>
  20.  
  21. <!--Corps du site--!>
  22. <div id="corps">
  23.      <!--menu--!>
  24.      <?php
  25.      include('Menu/menu.php');
  26.      ?>
  27.  
  28.  
  29.  
  30.  
  31.       <!--articles, informations ...--!>
  32.       <?php
  33.       include('article.php');
  34.       ?>
  35. </div>
  36.  
  37. <!--Pied du site--!>
  38. <div id="pied_de_page"></div>
  39.  
  40. </body>
  41. </html>


Code CSS :

  1. body
  2. {
  3.    width:980px;
  4.    color:#FFFFFF;
  5.    font-family:Verdana, Arial, Helvetica, sans-serif;
  6.    font-size:11px;
  7.    margin:auto;
  8.    margin-top:20px;
  9.    margin-bottom:20px;
  10.    background-image:url("Graph/fond.jpg");
  11. }
  12.  
  13. #banniere
  14. {
  15.    width:980px;
  16.    height:516px;
  17.    background-image:url("Graph/haut.jpg");
  18. }
  19.  
  20. #colonneg
  21. {
  22.    float:left;
  23.    background-repeat:repeat-y;
  24.    background-image:url("Graph/gauche.jpg");
  25. }
  26.  
  27. #corps
  28. {
  29.    margin-left:110px;
  30.    width:760px;
  31.    background-color:#000000;
  32. }
  33.  
  34. #colonned
  35. {
  36.    float:right;
  37.    width:110px;
  38.    height:225px;
  39.    background-repeat:repeat-y;
  40.    background-image:url("Graph/droite.jpg");
  41. }
  42.  
  43. #pied_de_page
  44. {
  45.    float:bottom;
  46.    width:980px;
  47.    height:126px;
  48.    background-image:url("Graph/bas.jpg");
  49. }


Au début je pensais que c'était dû aux valeurs des mes images de gauche et droite donc j'ai enlever height mais voilà cela n'affiche plus l'image!! je ne comprend pas comme faire pour que mes images se répète en fonction de la longeur "du corps".

Je remercie tout le monde qui me proposeront leur aide.

Droopy!

PS: voilà comment est mon graphisme mais codé avec des tableaux donc pas beau comme code !! wink

Montagne du Destin

Autres pages sur : petit probleme design css

Lassé par la pub ? Créez un compte

bonjour,

il te faut un min-height et pas seulement un height pour que tes "block" s'etendent en hauteur avec leur contenu:
exemple: pour
  1. #colonned
  2. {
  3.    float:right;
  4.    width:110px;
  5. min-height:225px;
  6. height:auto!important; /* pour les navigateurs recents pour ne pas les bloquer avec la valeur suivante*/
  7.    height:225px;/* ça c'est pour IE , comme il ne comprend pas min-height ...*/
  8.    background-repeat:repeat-y;
  9.    background-image:url("Graph/droite.jpg");
  10. }

maintenant ta colonne est extensible en hauteur

tu fais une erreur sur le css de #pied_de_page 
  1. float:bottom;
ça n'existe pas !
float prend comme valeur left ou right.
sert toi plutot de :
  1. clear:both;
qui prend comme valeur left, right et both et qui permet de placer un element sous le dernier flottant.
a plus

Merci pour ton aide, j'ai testé ton code mais malheureusement les colonnes ne s'agrandit pas en fonction du txte qui a au milieu. Je pense que cela vient des block car le milieu s'étend bien mais pas les colonnes car elle ne font pas partie de l'article donc aucune raisons pour s'étendre.
Alors j'ai fait comme a dit gatsusat, j'ai modifié la découpe de mon graphisme et je me suis limité à 3 bloc pour le graphisme : bannière, milieu, pied de page.
Maintenant le coprs du site s'étend bien en fonction de la longuer des articles. Sauf que maintenant je dois travailler sur mon menu car il n'est plus à l'endroit que je souhaite.

Merci à vous deux pour l'aide que vous m'avez apporté
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde