Discussion :

[Dionyzos]

Bonjour,

Voici mon problème :
Je souhaite créer sur ma page un bandeau 300x20px de couleur rouge avec le coin droit en biseau.
Pour cela je créée un DIV dans ma partie HTML, et je lui attribue en CSS un background-color: red pour la couleur de fond et pour mon coin droit, un background-image en norepeat et en position right. Or, j'aimerais que l'image du coin soit à l'extérieur du DIV ; donc je change le

Code :

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

background-position: right

en

Code :

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

background-position: 105%

Le hic c'est que mon image de coin sort du DIV comme prévu, mais disparait sous le reste de la page

Existe-t-il un moyen d'éviter cela ?

Pour info, voilà ce que j'aimerais obtenir :

[Candygirl]

l'image de fond s'applique sur la surface de l'élément, tu ne peux donc pas la faire sortir sans placer ton image dans un autre élément.

A part ça je ne comprends pas bien pourquoi tu veux, dans ton cas que l'image sorte de son élément ? ou alors c'est juste pour le 1px du cadre (mais alors pourquoi mettre un %) ?

[Dionyzos]

Et bien si je n'utilise qu'un seul DIV avec comme CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#monDiv {
    background-color: #b80707;
    border: 1px black solid;
    background-image: url(corner_red.gif);
    background-position: right;
    background-repeat: no-repeat;
    width: 400px;
    height: 17px;
}

Voici ce que j'obtiens :


La bordure du DIV passe autour de l'image de coin (ce qui est logique), et c'est pourquoi je veux le faire sortir du cadre pour qu'il ne soit pas entouré par la bordure.

J'espère avoir été plus clair

[Candygirl]

Oui, c'est bien ce que j'ai dit alors Je relevais juste que l'utilisation de % n'est pas très heureux pour un décalage de 1px d'où mon doute...

Tu peux, par exemple, passer par une imbrication de div:

Code html :

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

1
2
3
4
5
6
 
<div class="cadre">
  <div class="biseau">
    <p>ceci est un cadre avec biseau</p>
  </div>
</div>

Code css :

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
20
21
22
* {margin:0; padding:0;}
 
.cadre {
    background-color: #b80707;
    border: 1px black solid;
    width: 75%;
}
 
.biseau {
    background: url(biseau.gif) no-repeat top right;
    margin:-1px;
    padding:1em 3%;
    min-height:1px; /donne le layout IE7 */
}
 
 
/* \*/
* html .biseau {
	height:0;  /* donne le layout IE6- pc */
	position:relative; /* pour la prise en compte du margin nég */
}
/*  */

Cette solution est un peu lourde niveau gestion IE, mais elle passe sur tous les IE, mac compris, sauf erreur.

Il y a d'autres manières de faire en jouant avec le positionnement relatif par exemple.

[Dionyzos]

Merci pour ton aide Candygirl, mais c'est justement ce que je voulais éviter à tout prix, "d'alourdir" le code HTML.
M'enfin, j'ai pas non plus trop le choix, je vais devoir surcharger mon div

Merci encore

[Candygirl]

Merci pour ton aide Candygirl, mais c'est justement ce que je voulais éviter à tout prix, "d'alourdir" le code HTML.

Alors tu as aussi d'autres solution, genre utiliser la pseudo-class:before:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.cadre {
    background-color: #b80707;
    border: 1px black solid;
    width: 75%;
    min-height:22px;
}
 
.cadre:before {
	content: url(biseau.gif);
	text-align:right;
	display:block;
	margin:-1px -1px -22px 0;
}

Code html :

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

1
2
3
<div class="cadre">
    <p>ceci est un cadre avec biseau</p>
</div>

avec une image de 22px de haut dans mon exemple. Par contre on est alors, il me semble, obligé de recourir au js sur IE puisqu'il ne sait pas interpréter le :after ou :before

Tu peux aussi choisir de le faire exclusivement en js vu que c'est de la pure déco et que le site ne s'en trouveras que peux affecté au cas ou js est désactivé.