Une image sur une bordure d'un DIV

13 janv. 2010, 12:18

Bonjour,

Je souhaiterai placer une image sur la bordure droite d'un élement <div>, après quelques tests infructueux, je me suis demandé si c etait vraiment possible

Le code CSS de mon div :

Code : Tout sélectionner

.blockLeft{
	border		: 2px solid;
	margin 		: 5px;
	padding 	: 5px;
	width 		: 78mm; /*330px;*/
	float		: left;
	/**background: url("images/mon_image.gif") repeat-y right top;**/
}
html>body .blockLeft{-moz-border-radius	: 	10px; }

j ai essayé de cette façon par exemple :

<?php echo $html->image('barre_synthese_b.png',array('style' => 'margin-right:250px; z-index : 100; width : 10px;')); ?>	
<div class="blockLeft" style="border-color:#00CCFF;">
<p>contenu...</p>
</div>

voir encore comme ça, avec l image dans le div

<div class="blockLeft" style="border-color:#00CCFF;">
<?php echo $html->image('barre_synthese_b.png',array('style' => 'float:right; z-index : 100; width : 10px;')); ?>	
<p>contenu...</p>
</div>

Et aussi tenté avec l'image après le contenu, mais aucun résultat corrects. Vous auriez une solution svp ?
Merci

03 mars 2010, 11:01

Je reup le topic car ma solution ne fonctionne pas sous Internet Explorer 7 ou supérieure.
Voila ma solution fonctionnant sous Mozilla Firefox :

<div class="blockRight" style="border-color:#00CC99; height: 200px;">
	<p align="right" class="titreBlock" style="color:#00CC99;">
		<?php echo $html->image('puce_synthese_v.jpg', array('style' => 'width : 12px;')); ?>
		balblabla...
	</p>	
</div>
<?php echo $html->image('barre_synthese_accueil_v.png', array('style' => 'width: 5px; height : 180px; margin-top : 25px; margin-right: -315px; float: right;')); ?>

Sous IE7, l'image se met sur la bordure gauche et non la bordure droite. Apparement IE7 ne prendrait pas le margin négatif (j avoue c est un peu bricolage mais bon ^^). Mais je ne vois pas d'autres solutions pour le moment

03 mars 2010, 13:02

Bon je ne sais pas si cela va t'aider mais:

Les margin négatif, je ne sais pas, je n'ai jamais testé, mais je ne pense pas que ce soit la bonne solution.

Pour les floats, de mémoire, cela bug souvent sur IE, mais cela fonctionne très bien avec certains paramétrages...
En faisant des recherches sur Google, cela devrait te mettre sur la voie...

Sinon, à première vue, le css positioning devrait surement être la méthode la plus propre et la plus stable si cela est possible dans ton cas évidemment...
http://www.w3schools.com/Css/css_positioning.asp

Ah, et puis sinon, le css display, cela aide souvent dans certains cas:
http://www.w3schools.com/css/pr_class_display.asp

03 mars 2010, 13:51

Les images sur les bordures c'est possible avec CSS3:

http://www.css3.info/preview/border-image/

Bonne continuation! : )

03 mars 2010, 14:12

Intéressant oui, sauf que border-image, ce n'est pas sur mais à la place de...
Puis apparemment pas encore compatible IE
Après, tout dépend ce que l'on entend par sur

Sinon je confirme, ca fonctionne parfaitement et proprement avec les infos que j'ai donné plus haut

(IE y compris)
J'avais eu un petit doute tout d'un coup

Une image sur une bordure d'un DIV

Qui est en ligne