Tom's Guide > Forum > Programmation > Petit problème avec mon design en css

Petit problème avec mon design en css

Forum Programmation : Petit problème avec mon design en css

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

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 :

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



Code CSS :

Code :
  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. #banniere
  13. {
  14.   width:980px;
  15.   height:516px;
  16.   background-image:url("Graph/haut.jpg" );
  17. }
  18. #colonneg
  19. {
  20.   float:left;
  21.   background-repeat:repeat-y;
  22.   background-image:url("Graph/gauche.jpg" );
  23. }
  24. #corps
  25. {
  26.   margin-left:110px;
  27.   width:760px;
  28.   background-color:#000000;
  29. }
  30. #colonned
  31. {
  32.   float:right;
  33.   width:110px;
  34.   height:225px;
  35.   background-repeat:repeat-y;
  36.   background-image:url("Graph/droite.jpg" );
  37. }
  38. #pied_de_page
  39. {
  40.   float:bottom;
  41.   width:980px;
  42.   height:126px;
  43.   background-image:url("Graph/bas.jpg" );
  44. }



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

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

Personne n'a de solution!

Poor Droopy :(

Répondre à droopy4ever

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

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

Code :
  1. float:bottom;

ça n'existe pas !
float prend comme valeur left ou right.
sert toi plutot de :

Code :
  1. clear:both;

qui prend comme valeur left, right et both et qui permet de placer un element sous le dernier flottant.
a plus

Répondre à gccyrillus

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é

Répondre à droopy4ever
Tom's Guide > Forum > Programmation > Petit problème avec mon design en css
Aller à :

Il y a 2167 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens