Discussion :

[polothentik]

Salut,

J'essaye 2 méthodes pour réaliser une ligne de couleur dans une page html :

1ere méthode :

J'applique une image en background dans un un div vide que je repeat-x. L'image fait 1px de large x 2px de haut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#masthead3 {
	background-repeat: repeat-x;
	background-image: url('../Images/masthead3.png');
}

Cette méthode ne fonctionne ni sous FireFox2 ni sous IE6 (aucun affichage)


2nde méthode :

J'applique un background color est une hauteur spécifique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#masthead3 {
	height: 2px;
	background-color: #FF0000;
}

Cette méthode fonctionne sous FireFox2 (affichage parfait) tandis que sous IE6 problème (la hauteur de 2px n'est pas respectée : il semble tenir compte d'un hauteur par défaut)


Merci de m'apporter des précisions sur ces 2 méthodes et de m'informer sur la plus pertinente !

[Erwan31]

Bonjour,
pour commencer si IE6 affiche une hauteur minimum (comportement corrigé sur IE7), c'est qu'il affecte une hauteur minimale aux éléments.

Cette hauteur est celle de la taille du texte par défault 16px + les 2 interlignes par default (environ 1.2em) soit 16 X 1.2 = environ 19/20px si la taille du texte est celle par default.

Les solutions : font-size: 1px sur l'élément (la valeur "0" ne fonctionnant pas sur certains navigateurs) ou line-height: 1px sur l'élément.

Difficile de te donner la meilleur solution sans connaître l'ensemble de ta structure, le design et sans savoir si tu souhaites mettre du contenu dans ton div ou pas.

Tu as une autre solution qui consiste à doter ton div d'un border de 2px.

[Candygirl]

Un overflow:hidden me semble être la solution la plus simple à mettre en oeuvre, sauf cas particulier (genre contenu qui doit dépasser)

[polothentik]

Merci beaucoup !

C'est vfrai que je n'avais pas précisé que je ne souhaitais pas écrire dans mon div...

overflow: hidden est extrèmement efficace

Merci