28172 sujets

CSS et mise en forme, CSS3

Bonjour à vous tous,

Une petite question toute simplette mais avec laquelle je perd bp de temps Smiley ohwell

Je désire afficher un texte qui entoure une image (alignée à droite) mais cette image je désirs qu'elle soit centrée verticlalement de manière exact par rapport au bloc qui lui peut changer de contenu...

Avez vous un petit exemple de personnes l'ayant fais ?
Pour l'info j'ai essayé ainsi :


p {
	position:relative;
	font: 11.5px Verdana, Arial, Helvetica, sans-serif;
	color:#bdbcbc;
	line-height:22px;
	text-align:justify;
}

p img { float:right; vertical-align:bottom; margin: 0 0 10px 10px; }


D'avances merci !
Fab
Bonjour,

Je ne suis pas certain d'avoir bien saisi ta demande, mais si c'est bien ce à quoi je pense, je crois qu'il va t'être bien difficile d'y parvenir…
Pourrais-tu nous fournir un bref schéma du résultat recherché?
Bonjour,

bigfab a écrit :
Je désire afficher un texte qui entoure une image (alignée à droite) mais cette image je désirs qu'elle soit centrée verticlalement de manière exact par rapport au bloc qui lui peut changer de contenu...

Ça pas être possible en HTML CSS. Ce qui s'en rapproche le plus est bien entendu le comportement flottant, mais il n'a pas la capacité de faire ce que tu souhaites: le positionnement vertical de l'image flottante dépendra uniquement de sa place dans le flux.

bigfab a écrit :
Avez vous un petit exemple de personnes l'ayant fais ?

Ben du coup, non, vu que c'est pas possible. Smiley cligne

Ce qu'on peut imaginer à la rigueur, c'est de placer l'image juste avant le texte (et donc flottante à droite avec les marges qui vont bien pour l'espacement du texte), et ensuite d'appliquer un script JS qui:
- compterait le nombre de caractères dans le bloc suivant l'image (ou un bloc ayant un identifiant donné);
- retirerait l'image du DOM et la replacerait dans le texte, avec un savant calcul pour trouver l'emplacement exact (Nb caractères / 2 - X caractères), en évitant de couper un mot tant qu'à faire;
- côté accessibilité, c'est plus simple si l'image est une illustration ou une redite du texte environnant, ça permet de mettre un alt="".

Jamais croisé de script faisant cela pour ma part. Faudrait que j'essaie, mais vu ma maitrise de Javascript je risque de pas mal galérer. Smiley lol