Discussion :

[crakocrako]

Bonjour,

j'ai fait une structure avec deux divs et une image alignés les uns sous les autres:

Code :

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

1
2
3
4
 
<div class="div_home_left_news_title">Title</div>
<img class="home_img_news_separator" src="images/content/home/home_news_separation.png">
<div class="div_home_left_news_content">content</div>

avec les css suivants:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.div_home_left_news_title
{
	position:relative;
	width:100%;
}
 
.div_home_left_news_content
{
	position:relative;
	width:100%;
}
 
.home_img_news_separator
{
	width:100%;
	height:1px;
}

Mon problème est qu'à l'affichage l'image qui devrait s'afficher avec 1px de hauteur s'affiche avec la hauteur du texte normal (~12px)...


Comment puis-je fixer la taille de l'image à 1px pour de bon?

Merci

[Yorick]

Salut,

Les dimensions de l'image doivent être définies par les attributs de <img>, pas dans la CSS.

Par ailleurs d'un point de vue sémantique ce que tu fais est MAL.
Cette image est juste un séparateur visuel, elle ne porte pas d'information en soi, il faudrait donc l'utiliser en tant que background-image d'un élément (ici, l'élément qui contient le title ou celui du content)

[crakocrako]

ok,

merci pour la réponse, j'ai modifié mon code pour faire comme tu m'as indiqué, mais le problème c'est que maintenant je ne peux plus garder la largeur de mon background à la taille du div...

Pour que ça soit un peu plus clair, avant mon image avait un width de 100% ce qui fait qu'elle s'ajustait automatiquement à la largeur de mon div. Par contre comment je peux changer la largeur de mon background-image pour avoir le même résultat?

Encore merci

[Yorick]

Si ta div à une largeur constante, il suffit de refaire l'image.

Si elle ne l'est pas et donc si cette image doit s'adapter c'est un peu plus problématique.

Effectivement on ne peut ajuster la largeur d'une background-image en CSS2... mais en CSS3 c'est possible. Problème IE ne gère pas cette propriété.

Vu que l'image est un simple filet on peut aussi utiliser border-image, mais de la même façon... IE ne gère pas (tout comme le multiple background)

Donc après c'est un choix.
Si tu veux ce filet dégradé aussi sur IE, utilise une img comme tu l'as fait au début.
Si tu peux t'en passer sur IE alors il faudra prévoir une méthode de substitution (hack CSS ou commentaires conditionnels pour charger une feuille spécial IE).
___________________________

Sinon je viens de penser à une bidouille en écrivant ces lignes mais ça dépendra de la structure du doc.

L'idée c'est d'avoir un filet plein (sans dégradé) porté par l'élément title et d'avoir un dégradé transparent->couleur_de_fond porté par l'élément content, calé sur la droite et superposé au filet (grace à position:relative).

[crakocrako]

oki merci,

j'ai ajouté les propriétés css suivantes:

Code :

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

1
2
3
4
5
 
-o-background-size:100%;
-webkit-background-size:100% 1px;
-khtml-background-size:100% 1px;
-moz-background-size:100% 1px;

Ca fonctionne sur la plupart des navigateurs mais pas sur ie, l'image n'a pas la bonne largeur donc il n'y a pas le dégradé sur la partie de droite.

Encore merci pour vos réponses