Discussion :

[Boris56]

Bonjour,

J'aurai voulu savoir comment faire pour appliquer la propriété "border-radius" à une image se trouvant dans une div exécutant cette propriété.

Petite restriction, le lien image ne doit pas être dans le css.

Une idée ?
Merci

[e-rwan]

pas sur d'avoir tout compris

Code :

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

1
2
3
4
 
<div syle="border-radius:10px">
<img src="ton_image" style="border-radius:10px;"/>
</div>

?
ton image sera dans une boite au bords arrondie et aura elle même les bords arrondies.

[Boris56]

Sa marche pas chez moi...

[e-rwan]

je ne peu pas te dire pourquoi si tu ne me passe pas ton code.
aussi, j'ai écris border-radius pour simplifier, mais cette propriété n'est reconnu telle quelle que par chrome je crois. pour firefox c'est -moz-border-radius et pour safari -webkit-border-radius, elle n'est pas reconnu par IE.
il faut savoir aussi qu'il s'agit d'une propriété css3 pas encore implantée officiellement puisque expérimentale.

[Boris56]

je ne peu pas te dire pourquoi si tu ne me passe pas ton code.
aussi, j'ai écris border-radius pour simplifier, mais cette propriété n'est reconnu telle quelle que par chrome je crois. pour firefox c'est -moz-border-radius et pour safari -webkit-border-radius, elle n'est pas reconnu par IE.
il faut savoir aussi qu'il s'agit d'une propriété css3 pas encore implantée officiellement puisque expérimentale.

Oui, ça je savais

Voici l'HTML :

Code :

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

1
2
3
4
5
<nav class="link_menu">
    <figure class="link_img">
    	<img src="images/icon_technocentre.jpg" width="200" height="100" style="-moz-border-radius:3px;"/>
    </figure>
</nav>

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
.link_menu {
	-moz-border-radius: 3px;
	height: 100px;
	width: 200px;
	margin-bottom: 20px;
}
 
.link_img {
	height: 100px;
	width: 200px;
	-moz-box-shadow: 0 1px 3px black;
	-moz-border-radius: 3px;
}

[e-rwan]

en effet j'ai testé à nouveau, le border-radius ne fonctionne pas sur les images. j'ai cru que ca avait fonctionné sur mon premier test ou l'image avait de la transparence.

voila la solution que j'ai trouvé à ton problème: ici
si tu n'as qu'une seule image tu peux entrer ça dans le css(mis en cache), mais si tu en as plusieurs ou qu'elles sont appelées via php tu peux toujours le mettre dans le code html, comme dans mon exemple.

[Invité]

met l'image dans un div en background