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

Sinon je confirme, ca fonctionne parfaitement et proprement avec les infos que j'ai donné plus haut :wink:
[i](IE y compris)[/i]
J'avais eu un petit doute tout d'un coup :)

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

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

Bonne continuation! : )

[u]Bon je ne sais pas si cela va t'aider mais:[/u]

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

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

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

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

<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;')); ?>

Je reup le topic car ma solution ne fonctionne pas sous Internet Explorer 7 ou supérieure.
Voila ma solution fonctionnant sous Mozilla Firefox :
[html]
<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;')); ?>
[/html]

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

<?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>

<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>

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]
.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; }
[/code]

j ai essayé de cette façon par exemple :
[php]
<?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>
[/php]

voir encore comme ça, avec l image dans le div
[php]
<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>
[/php]

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