28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous, je suis tombé sur un problème en intégrant le design de mon nouveau site.
Sur Photoshop j'avais prévu de placer une image ronde au milieu de texte, voici schématiquement ce que je veut faire :

http://img441.imageshack.us/img441/7304/shemaq.jpg

Mais seulement voila au moment ou j'ai fait la maquette je ne me suis pas vraiment posé la question si c'était possible, et là je me doute qu'avec CSS3 ce n'est pas faisable ( dite le moi si vous avez la solution en CSS ! Smiley lol ), alors je me demande si en javascript cela serait possible ?

Merci de m'aider !

PS: Je l'ai posté dans cette catégorie car pour moi c'est de la mise en forme, mais mon topic serait peu-être mieux dans un endroit plus adéquate, excusez moi si c'est le cas Smiley ohwell
Modifié par Rems69008 (18 Mar 2012 - 21:59)
Salut et bienvenue,
Rems69008 a écrit :
Mais seulement voila au moment ou j'ai fait la maquette je ne me suis pas vraiment posé la question si c'était possible

Et oui, et tout le problème vient de là Smiley smile
Malheureusement, ce n'est pas vraiment réalisable. La question a déjà été abordée dans ce fil de discussion et les réponses et exemples apportés tenaient plus de la bidouille inutilisable qu'autre chose… Voir aussi une autre solution proposée par CSS-tricks, tout aussi contraignante, malheureusement Smiley cligne
Modifié par audrasjb (19 Mar 2012 - 09:34)
Bonjour,

Pour faire une image ronde en CSS3, tu trouveras la réponse ici :

Créer une image ronde en CSS3

Tu peux également spécifier le border radius en % (border-radius: 50%), mais pour que le résultat soit bon, les côtés de ton image doivent avoir le même nombre pair de pixels.

Pour la mettre au centre d'un bloc de texte, par contre, il me semble que tu risques de bidouiller pas mal.

Désolé pour cette demi-réponse Smiley ohwell
Merci de vos réponses, pour faire une image ronde ce n'était pas un problème, elle est déjà ronde depuis photoshop et border radius:180% marche aussi mais ne résout pas mon problème principal Smiley ohwell

Je regarderais ce soir ta solution audrasjb, ça à l'air de faire la moitié de ce que je veut, après pour que le texte vienne se "coller" autour de l'image j’essayerais de bidouiller avec des <br />, pas très propre mais bon...
Modifié par Rems69008 (19 Mar 2012 - 11:56)