28220 sujets

CSS et mise en forme, CSS3

Background-image sur toute la hauteur d'une colonne

Hello, j'ai recherché un post similaire à ma question, et je n'ai rien trouvé...

Je voudrais remplir une colonne par une image, la répéter verticalement, et qu'elle remplisse toute la hauteur.
Or, si je lui dit 
height:100%
elle remplit toute la colonne, certes, mais dès que je fait un scroll vertical (je descend l'ascenseur), celle-ci n'est plus visible à partir du bas initial de la fenêtre.

Ai-je été clair ? Et comment faire ?
Bonjour,

Toute la hauteur de quoi ?

Une hauteur n'a pas de sens si elle ne fait pas référence à un contenu (Le but du jeu étant d'afficher et de mettre en forme du contenu).
Modifié par Laurent Denis (11 Aug 2006 - 14:07)
Bon, alors j'ai mis en ligne ce que ça me donne :
http://terraincognita.free.fr/test/test_css.php

Je précise que c'est sous Firefox que ça déconne.

Et voici le code 

<html><head><style>
html { margin: 0;
       padding: 0; }

body { margin: 0;
       padding: 0;
       background-color: #000;
       text-align: center;
       height: 100%; }

#page { text-align: left;
        width: 760px;
        margin: 0px auto 0px auto;
        position: relative;
        background: #EEE;
        border: 0;
        height: 100%; }

#milieu { background: #DDD url(fond.gif) repeat;
          width: 644px
          height: 100%; }

#gauche { background: #DDD url(gauche.gif) repeat-y;
          width: 58px;
          height: 100%;
          float: left; }

#droite { background: #DDD url(droite.gif) repeat-y;
          width: 58px;
          height: 100%;
          float: right; }

#pied { clear:both;
        height: 1px;
        background-color: #000; }

</style></head>
<body>
<div id="page">
   <div id="gauche"></div>
   <div id="droite"></div>
   <div id="milieu">
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>           
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
           bla<br><br>bla<br><br>bla<br><br>
      <div id="pied"></div>     
   </div>
</div>
</body></html>


j'ai testé en vain des tonnes de codes, et je ne vois pas la ruse...
Modifié par Felipe (12 Aug 2006 - 10:53)
Bonjour,

Simplifions, simplifions. Toutes ces hauteurs, largeurs, float, positions relatives et clear sont inutiles Smiley cligne

C'est le contenu qui va "tirer" tout cela, en hauteur comme en largeur:

CSS:
body {
margin: 0;
padding: 0;
background: #000;
text-align: center;
}
#gauche {
background: url(gauche.gif) repeat-y left top;
width: 760px;
margin: 0 auto;
text-align: left;
}
#droite {
background: url(droite.gif) repeat-y right top;
}
#milieu {
background: #ddd url(fond.gif);
margin: 0 58px; 
}


HTML:

<body>
  <div id="gauche">
    <div id="droite">
      <div id="milieu">
        ...contenu en flux...
      </div>
    </div>
  </div>
</body>


Sinon, une remarque: ne pas faire de test sans Doctype (pour ne pas tester en mode de rendu Quirks)
Modifié par Laurent Denis (12 Aug 2006 - 06:56)
Waouh, it works !!! Smiley biggrin Smiley lol
C'est fou, j'ai vraiment du mal à comprendre les grands principes de positionnement. Bien vu et Laurent Denis.

De plus, ça épure considérablement le code. Merci

Néanmoins, le soucis est que si mon texte du milieu n'est pas suffisamment long, les colonnes ne remplissent pas toute la page (ce que je voulais). C'et pour ça que j'ai abusé de "height:100%"
Dois-je réutiliser le "footer" et où dois-je le mettre.

Enfin, que veux-tu dire par Doctype et Quirks ?

résultat ici : http://terraincognita.free.fr/test/test_css.php
cmoiray a écrit :

Néanmoins, le soucis est que si mon texte du milieu n'est pas suffisamment long, les colonnes ne remplissent pas toute la page (ce que je voulais). C'et pour ça que j'ai abusé de "height:100%"


min-height pour les navigateurs modernes, height pour IE en commentaires conditionnels.

cmoiray a écrit :

Enfin, que veux-tu dire par Doctype et Quirks ?


Le rendu CSS est potentiellement différent sans DTD. Voir ce billet du blog (qu'il faudrait mettre dans la FAQ du forum, en fait) :
http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-nous
Salut Laurent,

Bon, je me suis renseigné sur le doctype avec ton lien, puis j'ai fureté vers celui-ci :
http://pompage.net/pompe/doctype/
Je ne comprends pas la différence entre Strict, Transitional et Frameset.

De plus je m'arrache les peu de cheveux qui me reste avec cette foutu technique des min-height. En cherchant sur le web, des milliers de solutions me sont proposées, mais aucune ne marche.
avec des footer en position absolue et bottom:0
avec des container, et tout le toutim...

ça fait 3 heures que je me prends la tête, et j'en ai sacrément marre...
Puis-je, une nouvelle fois, oser te demander ton aide ? Smiley confused

voici ce que j'ai fait :
http://terraincognita.free.fr/test/test_css.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><style>
html, body {
height: 100%;
}

body { margin: 0;
       padding: 0;
       background: #000;
       text-align: center;
        }
#container {
position: relative;
margin: 0;
padding: 0;
text-align: center;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}


#gauche {
background: url(gauche.gif) repeat-y left top;
width: 760px;
margin: 0 auto;
text-align: left;
}

#droite {
background: url(droite.gif) repeat-y right top;
}

#milieu {
background: #ddd url(fond.gif);
margin: 0 58px;
}

#footer {
position: absolute;
bottom: 0;
}

html>body #container {
height: auto;
}

</style></head>
<body>
<div id="container">
      <div id="gauche">
             <div id="droite">
                       <div id="milieu">
                               bla<br><br>bla<br><br>bla<br><br>
                       </div>
             </div>
      </div>
      <div id="footer">fd</div>
</div>
</body></html>
Sujet clos
Aller à