Discussion :

[Pierre Maurette]

Bonjour,
J'ai un souci que je pense classique. Le but est de placer une fine zone à coins supérieurs arrondis (ou coupés, peu importe) en utilisant la transparence gif. La largeur de la page doit pouvoir être variable.
Je teste avec IE6, Firefox 1.0.6 et Opera 8.
J'ai fait de nombreux essais, voici une solution parmi les plus simples:

le CSS:

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
19
#reglette {
margin:0px 17px 0px 17px;
height:10px;
background:url("images/reglettefond10.gif") repeat-x bottom;
}
#reglette #imggauche {
float:left;
margin-left:-17px;
width:17px;
height:10px;
background:url("images/reglettegauche10.gif") no-repeat bottom;
}
#reglette #imgdroite {
float:right;
margin-right:-17px;
width:17px;
height:10px;
background:url("images/reglettedroite10.gif") no-repeat bottom;
}

Le HTML correspondant:

Code :

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

1
2
3
4
<div id="reglette">
	<span id="imggauche"></span>
	<span id="imgdroite"></span>
</div>

C'est impeccable sous FF et Opera, le problème c'est IE6 qui ignore les images de coin, à cause du margin négatif.
J'ai essayé d'ajouter une zone centrale pour ne plus avoir de marges négatives, mais ou c'est impossible, ou je ne suis pas assez calé en float (ce qui est le cas).
Des solutions au problème, j'en aurais certainement, d'autant que je génère en PHP et que je peux détecter IE6. Mais j'ai évité ça jusqu'ici. Il y a même encore plus simple, puisque je suis pour l'instant sur fond uni et que j'y resterai sans doute.
Voilà, j'aimerais bien régler le problème tel qu'il est, sans trop "négocier".
Merci d'avance pour toute suggestion

Pierre

[etarip]

D'expérience, j'aurrais tendance a te dire qu'il faut éviter de faire des margin négatif car comme tu as pu le voir le résultat entre IE et FF est différent.
Par contre si tu trouves une alternative elle m intéresse.
J'avais du revoir ma mise en page.

[Pierre Maurette]

Par contre si tu trouves une alternative elle m intéresse.

L'alternative, elle serait peut-être d'ajouter un style #reglette #barre et d'enchaîner #reglette #imggauche, #reglette #barre et #reglette #imgdroite, et arrivant à ce que #reglette #barre prenne toute la largeur (inconnue) entre les deux autres.
C'est là où je coince, étant trop faible en float, display etc.

La question reste ouvert ....

Pierre

PS: j'ai pour l'instant comme déjà dit résolu pragmatiquement le problème en virant la transparence du gif.