background-repeat ?

[Siddartha]

Bonjour,

Je cherche a créer un barre de 20px de large environ sur le côté gauche mais qui prendrait toute la longueur verticale et qui se répéterait.

J'ai utilisé les balises background-image et background-repeat pour réaliser ce petit truc. Mais à l'évidence, il semblerait que cela bloque sous ie ..

Aprés m'être renseigné sur le trés bon w3schools.com sur ces balises, elles semblereraient bien fonctionné sous ie, mais à l'évidence, chez moi ca ne fonctionne que sous mozilla/firefox

J'en suis à me demander si ces attributs css sont réellement valides sous ie ?

Pour vous faire une idée : la page

et le code css utilisé :

#barre {position: absolute; height: 100%; left:0px; top:150px; width:18px; background-image:url(images/barre.png); background-repeat: repeat-y;}

[Bug]

essaye

#barre {position: absolute; height: 100%; left:0px; top:150px; width:18px; background: url("images/barre.png") repeat-y;}

le repeat est facultatif si ton conteneur fait la meme largeur que ton image

[Siddartha]

Je viens d'essayer sans succès, ca ne s'est pas arrangé.

[LaurentDenis]

Ton problème ne vient pas des propriétés background (globalement bien supportées), mais de la propriété height de la div vide utilisée pour placer cette image :

- height:100% est très inégalement supporté et son utilisation toujours risquée dans ce contexte. Ici, IE5 et 5.5, ainsi qu'Opera, ignorent cette hauteur en pourcentage. La div étant vide, sa hauteur calculée est nulle et ton image d'arrière-plan n'apparaît pas.

- cette div vide est de toute façon inutile puisque tu peux styler directement l'élément de contenu réel concerné.

Il te suffit d'appliquer les propriétés de background (ici en notation raccourcie) à la div contenant le tableau, en remplaçant la marge gauche de celle-ci par un padding :

#centre {
padding-left: 20px;
margin-right: 210px;
background: url(barre.png) #fff 0% repeat-y scroll;
}

Si tu souhaite que ce bandeau borde la totalité du contenu de la page, appliquer le même principe au body.

Dans les deux cas, le contenu détermine une hauteur calculée non nulle, et l'arrière-plan peut s'afficher.

En conclusion :

- ce problème de hauteur est une difficulté fréquemment rencontrée quand on passe à l'utilisation de CSS, car l'implémentation médiocre de height ne permet pas de faire "comme avec des tableaux".

- pour passer à css, ne pas se dire "je mets une div là où je mettais une cellule", mais chercher plutôt à appliquer les styles aux éléments réels balisant le contenu.

Modifié 11 Mai 2004 par LaurentDenis