Question sur background

Bonsoir à tous,

Voici déjà mon bout de code :

Ceci est mon premier conteneur, je lui ai donné une image d'arrière-plan ainsi qu'une couleur. L'arrière plan est fixe et ne se répète pas, la couleur est donc censée prendre le relai.

div#content {
  background: #0b151d url("img_menu/background.png") no-repeat top left;
  width: 964px;
  height: 837px; //j'ai testé une hauteur fixe et auto... mon problème est là
  padding-top: 30px;
  padding-bottom: 30px;
  color: #ffffff;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  float: left;
}

Cette boîte contient une autre boîte, je le précise au passage, dont voici le code :

div#content2 {
    background: url("img_menu/bg55n.png");
    background-repeat: repeat-x,y;
    font-size: 12px;
    color: #FFF;
    text-align: justify;
    width: 85%;
    padding: 40px;
    border: 1px solid #000000;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

Ce qui m'ennuie, c'est le background du #content (c'est une image un peu grande).

- Si je le mets en hauteur fixe de 837 pixels, ça m'affiche l'image du background dans son intégralité, c'est bien. Mais si je fais un essai avec un long texte, le background ne s'étire pas avec le bloc, que ce soit l'image ou la couleur. Elle reste à 837 pixels de haut et tout ce qui dépasse en dessous est privé de background.

- Si je mets une hauteur "auto" pour que le background s'étire avec le bloc dans le cas où il y a beaucoup de texte, c'est impeccable quand y'a beaucoup de texte. QUand y'a deux lignes, mon background s'affiche à hauteur de deux lignes.


Ma question est donc la suivante :

Comment forcer l'affichage complet de l'image d'arrière-plan de 837 pixels de haut, et comment faire pour qu'en plus, l'arrière plan continue de s'afficher si le contenu du bloc lui fait dépasser ses 837 pixels de hauteur ?

J'espère avoir bien expliqué ma question... Merci d'avance, je sèche.

Bonjour,

Effectivement, ni height: 837px ni [i]height: auto (ou pas de height du tout, vu que "auto" est la valeur par défaut) ne correspondent à ton besoin.

Ce dont tu as besoin, c'est d'une hauteur minimale. Or, il y a précisément une propriété pour ça: min-height. Cela donnera donc: min-height: 837px.

Une nuance cependant: tous les navigateurs récents (dont IE7) comprennent min-height, mais pas IE6. Par contre, IE6 comprend height comme si c'était une hauteur minimale (à moins que l'on ne déclare un overflow: auto|scroll|hidden).

Donc, via une feuille de style de correctifs pour IE6 et inférieurs appelée dans un commentaire conditionnel, on fera:

div#content {height: 837px;}

Pour les commentaires conditionnels, voir la FAQ du forum.

Quelques précisions:
1.

background: #0b151d url("img_menu/background.png") no-repeat top left;

Pour background-position, on indique d'abord la position horizontale, puis la position verticale. Il est donc préférable d'écrire:

background: #0b151d url("img_menu/background.png") no-repeat left top;

(Même si ici les navigateurs s'y retrouveront tout de même, c'est une habitude à prendre.)

2.

height: 837px; //j'ai testé une hauteur fixe et auto... mon problème est là

Cette syntaxe de commentaire ne peut pas être utilisée en CSS. La seule syntaxe possible est la suivante: /* commentaire */

3.

margin-top: auto;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;

Tu peux aussi utiliser la propriété margin en indiquant les valeurs depuis margin-top jusqu'à margin-left, dans le sens des aiguilles d'une montre:

margin: auto auto 0px auto;

Mais ici, tu pourrais sans doute encore simplifier en indiquant juste une valeur pour les deux marges verticales et une pour les deux marges horizontales:

margin: 0 auto;

Par contre, si tu utilises les marges automatiques pour obtenir un centrage horizontal de ton bloc, il ne faut pas déclarer float: left: les deux ne sont pas compatibles.

4.

background-repeat: repeat-x,y;

Syntaxe erronée. Pour une répétition dans les deux directions, la valeur à utiliser est repeat, tout simplement. Attention à ne pas inventer des valeurs pour les propriétés: ça ne marche pas. [/i]
Modifié par Florent V. (13 Sep 2007 - 11:20)

Bonjour Florent et merci, ça fonctionne, le min-height était exactement ce qu'il me fallait. Je pense que cela me sera utile bien d'autres fois

Florent V. a écrit :
Par contre, si tu utilises les marges automatiques pour obtenir un centrage horizontal de ton bloc, il ne faut pas déclarer float: left: les deux ne sont pas compatibles.

C'est intéressant ce que tu me dis. Voici comment est construire ma page :



div#container c'est la zone de ma page, div#navmenu contient des onglets verticaux. div#content est collé à div#navmenu.
Le problème c'est que si je retire le float: left, div#content passe en-dessous de div#navmenu, et n'est plus à côté de lui. Il y aurait autre chose à mettre à part float: left ?

Ada a écrit :
Voici comment est construire ma page :

upload/9862-Untitled-2.png

Dans ce cas, ce sont les marges automatiques qui sont en trop, vu qu'apparemment tu ne cherches pas à avoir un centrage horizontal de div#content.

Le float ne serait théoriquement pas indispensable sur div#content, si div#navemenu est déjà flottant ou positionné en absolu. Donc pour savoir pourquoi ça passe à la ligne... je ne me prononce pas sans voir la page elle-même.