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 !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
droopy4ever   04-11-2005 à 19:31:52

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" >
  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>
  11. <body  onload="setHover()">
  12. <!--Bannière--!>
  13. <div id="banniere"></div>
  15. <!--Colonne de gauche--!>
  16. <div id="colonneg"></div>
  18. <!--Colonne de droite--!>
  19. <div id="colonned"></div>
  21. <!--Corps du site--!>
  22. <div id="corps">
  23.     <!--menu--!>
  24.     <?php
  25.     include('Menu/menu.php');
  26.     ?>
  27.    
  31.       <!--articles, informations ...--!>
  32.       <?php
  33.       include('article.php');
  34.       ?>
  35. </div>
  37. <!--Pied du site--!>
  38. <div id="pied_de_page"></div>
  40. </body>
  41. </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. }
  13. #banniere
  14. {
  15.   width:980px;
  16.   height:516px;
  17.   background-image:url("Graph/haut.jpg" );
  18. }
  20. #colonneg
  21. {
  22.   float:left;
  23.   background-repeat:repeat-y;
  24.   background-image:url("Graph/gauche.jpg" );
  25. }
  27. #corps
  28. {
  29.   margin-left:110px;
  30.   width:760px;
  31.   background-color:#000000;
  32. }
  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. }
  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

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
droopy4ever   04-11-2005 à 22:59:36
- 0 +

Personne n'a de solution!

Poor Droopy :(

Répondre à droopy4ever
gccyrillus   05-11-2005 à 11:18:34
- 0 +

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
droopy4ever   05-11-2005 à 11:30:50
- 0 +

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
Créer un nouveau sujet Répondre
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.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,387 secondes
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