Habillage texte image [Résolu]

Bonjour

Je n'arrive pas à réaliser un habillage d'image par un texte tel que sur l'image jointe
Y'a-t-il la solution quelque part (je n'ai pas trouvé ni dans les FAQs ni sur le forum)
ou quelqu'un saurait-il comment faire ?
Merci d'avance.



Modifié par remaye (20 Apr 2008 - 14:14)

Petite précision par rapport a mon post précédent :

Si l'image est en haut du texte, pas de problème :

<div class="blocimage">
  	<img src="image.jpg" />
</div>

<div class="bloctexte">Verentur quam et probabo ....
</div>

associé à:

div.bloctexte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 250px;
	padding-left: 50px;
}

div.blocimage {
	margin: 0;
	float: left;
	margin-top: 50px;
}

ça marche très bien.

mais si l'image doit être plus basse, je n'ai plus de solution :

padding-top ou margin-top sur l'image ne marche pas:
le texte ne passe pas au dessus de l'image.

et bien sûr position:absolute sort l'image du flux et le texte n'est plus "repoussé" par l'image ...

Hello,

je pense qu'il faut utiliser l'attribut "display: inline-block;" ("display: -moz-inline-box;" pour Mozilla au niveau du div qui contient tes 2 autres divs.

Merci
J'ai essayé, ça ne change rien à l'affaire ...
Peut-être pas très bien capté la manoeuvre ...

En tout cas j'ai tout retourné dans tous les sens
et je ne suis pas un expert-CSS
mais j'ai bien le sentiment que ce-n'est-pas-possible ?

Si quelque expert veut bien me faire mentir ...

En tout cas, merci.

Non ce n'est pas possible en css. En javascript ca doit pouvoir se creuser...

Salut,

Une piste...

img{
float: left;
height: 50px;
width: 75px;
margin: 10px;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales. Sed convallis nibh quis libero. Nulla at ipsum. Cras blandit blandit sem. Sed sollicitudin quam sit amet nibh. In hac habitasse platea dictumst. Nullam lorem justo, rutrum sit amet, ornare ut, blandit et, orci. Quisque diam. Aenean quam libero, faucibus quis, luctus sit amet, sagittis eu, nulla. Vestibulum ultricies cursus neque.
<img src="image.jpg" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales. Sed convallis nibh quis libero. Nulla at ipsum. Cras blandit blandit sem. Sed sollicitudin quam sit amet nibh. In hac habitasse platea dictumst. Nullam lorem justo, rutrum sit amet, ornare ut, blandit et, orci. Quisque diam. Aenean quam libero, faucibus quis, luctus sit amet, sagittis eu, nulla. Vestibulum ultricies cursus neque.
</p>

Oui,
merci professeur Shadocko
mais ce n'est pas tout à fait ce que je cherche:
1- le texte ne "coule" pas autour de l'image (puisque celle-ci est insérée à un endroit précis du texte)
2- l'image est alignée avec le texte et ne peut être décalée vers la gauche (cf. schema + haut)

Mais effectivement, j'ai essayé pas mal de solutions qui ne marchent pas,
et, la logique Shadock elle aussi a ses limites, je crois bien que c'est pas possible en CSS

Quant au javascript, peut-être, en effet, mais je ne suis pas spécialiste,
et à priori n'aime pas beaucoup surcharger ma mise en page avec du javascript
Vais plutot changer de mise en page ...

Merci.

Bonjour remaye,

Je viens de tenter d'obtenir l'effet désiré, et il me semble que ce qui suit y parvient "assez bien"...
Testé sous Firefox, Opera, Safari, IE7, IE6, IE5.5 (...)

div.bloctexte {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	width:250px;
	}
/* Lu uniquement par IE 6, valeur à définir suivant le besoin */
[#blue]/* Il est sans doute préférable d'utiliser les commentaires conditionnels*/[/#]
* html div.bloctexte {
	padding-left:20px; 
			}
img   {
	float:left;
	margin:5px 5px 3px -20px;
	}

<div class="bloctexte">Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine <img src="image.jpg" alt="" /> Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur,etcaetera...</div>

L'image est à placer à la mimine...peut-être qu'une solution javascript conviendrait mieux ?!...

Sauf grosse erreur ou omission cela va sans dire (et mieux en le disant...)

Cdt,
Sylvain
Modifié par 6l20 (09 Oct 2008 - 13:58)

Merci 6l20
comme quoi impossible n'est pas CSS !
d'autant que j'étais également sur le point de poster une autre solution
quoique dans le même esprit :

div.bloctexte {
	width: 300px;
	padding-left: 100px;
	text-align:justify;
	}

div.bloctexte img{
	position: relative;
	left: -50px;
	float: left;
	margin: 5px -50px 5px 0px;
}

qui fonctionne également (bien que je n'ai pas pu le tester sur IE7 et IE5.5) mais qui, par rapport à la tienne, peut peut-être présenter des inconvénients du fait du positionnement en relatif (... ?)

En tout cas merci pour ta solution sans plus simple et plus "naturelle".

Et ... je ne sais pas comment on fait pour marquer un sujet comme "résolu"
qqun peut me dire ... ou le faire.
Merci.

Moué ... ça me semble fort être du bidouillage tout ça (pas de solution CSS fiable pour le moment ... concernant une solution Javascript n'en parlons même pas).

Enfin si le sujet est considéré comme résolu, il suffit d'éditer le premier post de ce sujet et d'ajouter [Résolu] dans le titre du sujet.

Bonne continuation.
Romain

yodaswii a écrit :

Moué ... ça me semble fort être du bidouillage tout ça (pas de solution CSS fiable pour le moment ... concernant une solution Javascript n'en parlons même pas).

Remarque intéressante...Pourrais-tu préciser ta pensée ? (en quoi est-ce une bidouille ?)

Cdt,
Sylvain

a écrit :
Remarque intéressante...Pourrais-tu préciser ta pensée ? (en quoi est-ce une bidouille ?)

Le but des CSS est la séparation entre contenu et forme (jusque là tout le monde est d'accord ). Dans cet exemple, l'image est placé dans le flux d'une façon à obtenir la présentation souhaitée.

Cela implique quelques problèmes :
- nécessité de modifier la structure HTML en cas d'évolution du contenu ;
- plus grave si l'image est significative, on se retrouvera avec une alternative textuelle en plein milieu d'un texte (ce qui n'est définitivement pas sa place).

Donc certes le rendu est bien celui voulu mais comporte de gros inconvénients. D'où ma remarque.

<edit>Quand à l'option Javascript, ce n'est pas son rôle ...</edit>
Modifié par yodaswii (20 Apr 2008 - 14:58)

+1 pour les remarques de yodaswii. Mis à part ceci:

yodaswii a écrit :
<edit>Quand à l'option Javascript, ce n'est pas son rôle ...</edit>

On peut tout à fait s'autoriser la bidouille du placement de l'image dans le flux du contenu texte. Il faut bien sûr être conscient du fait que c'en est une, mais cela ne signifie pas qu'il faille la rejeter. Imaginons par exemple -- cas improbable s'il en est -- que l'on privilégie le rendu visuel sur l'accessibilité. Ou bien que l'image soit tout bêtement une illustration traitée sur le mode suivant: l'information est donnée dans le texte, et l'image en répète une partie ou présente une simple illustration avec alternative textuelle vide. Dans ce cas, le problème d'accessibilité est réglé (soit inexistant, soit considéré comme non prioritaire pour le projet).

Il nous reste donc le problème du traitement manuel. C'est justement là qu'un script JS qui va bien pourrait être utile, afin d'automatiser le placement de l'image au bon endroit, moyennant quelques calculs. Ces calculs ne seront pas extrêmement fiables, mais ça peut être un mécanisme intéressant malgré tout.

<mode hôpital qui se fout de la charité>

Quant au rôle de Javascript, je veux bien que tu me l'explique. Deux copies double minimum et plan dialectique exigé.

</mode hôpital qui se fout de la charité>

<digression mais pas tant>

C'est marrant les mots qu'on (moi y compris) manie par ici: «sémantique», «rôle», etc. On va bientôt parler de l'existence de CSS et de la transcendance de HTML.
L'intégration web est un humanisme.

</digression mais pas tant>

yodaswii a écrit :
...

Ok, merci pour ces précisions

Quant au rôle de Javascript, je veux bien que tu me l'explique. Deux copies double minimum et plan dialectique exigé. [lol]

Je pense qu'on va éviter . Certes, le rôle du Javascript reste très vague du fait de ses possibilités. Mais pour moi ce n'est pas un cas d'utilisation correcte. Tes propos semblent me donner raison :

a écrit :
Il nous reste donc le problème du traitement manuel.

a écrit :
Ces calculs ne seront pas extrêmement fiables.

J'ai vraiment du mal à voir comment un solution Javascript peut rendre une telle présentation (même avec des calculs car il y'aura toujours dépendance avec les propriétés CSS). Mais certes la formulation de mon propos n'était pas l'une des meilleures.

Concernant l'image ... en effet, si l'image n'est pas significative la "bidouille du placement de l'image dans le flux du contenu texte" peut être compréhensible. Je suis allé un peu vite en besogne.

yodaswii a écrit :
Tes propos semblent me donner raison

Oui et non (et en fait plutôt non). Mes propos disent que la solution est loin d'être parfaite. Mais on peut tout à fait choisir d'utiliser des solutions imparfaites, surtout si on en a bien mesuré les avantages et inconvénients, ainsi que le cout de mise en oeuvre. Je ne t'apprends rien.

Trop content !
J'ai trouvé une solution 100% CSS !!!

Bon, si je suis content, c'est aussi parce que c'est la première fois que je viens poster une réponse sur Alsacréations, plutôt qu'une énième question !!!

Bon, j'avais le même problème, et avais besoin de trouver la soluce... C'est le seul post qui parlait d'habillage un peu particulier, où le float n'est pas nécessairement aligné en haut...

Bon, voilà ma soluce :
le code HTML :

<div id="conteneur">
<div id="spacer"></div>
<div id="encart">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nam lectus sem, rutrum id, ultrices at, rutrum et, massa.
Nam pellentesque. Curabitur rhoncus fringilla metus. Class aptent taciti 
ociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Proin vel diam. Nam laoreet sodales lacus.
Aliquam adipiscing odio a pede. Proin non eros vitae nulla sagittis ornare. 
Suspendisse placerat velit vitae arcu. Ut aliquet commodo metus. Donec in 
arcu. Maecenas elit. Maecenas at nibh.

</div>

et le CSS:

#conteneur
	{
		background-color:#000066;
		width:500px;
		margin-left:200px;
		padding:20px;
		color:#FFFFFF;
	}
#spacer
	{
		background-color:#00FF33;
	height:150px;
	float:right;
	}
#encart
	{
		background-color:red;
		width:200px;
	float:right;
		padding:10px;
		color:#FFFFFF;
	clear:right;
	}

L'idée est de placer deux div en float.
Mais la première est une float fantôme, qui va jouer le rôle de spacer.
Pour que l'encart se place sous le spacer plutôt qu'à coté, il suffit de lui ajouter l'attribut clear. Ainsi, étant flottant, l'encart se positionne bien sur le coté, mais étant clear, il est poussé vers le bas par le spacer. Il suffit juste de donner une hauteur au spacer, et aucun contenu pour qu'il soit invisible, et ça roule.
Modifié par yakou32 (23 Apr 2008 - 23:24)

Hello,

Si ça marche correctement avec les divers navigateurs, c'est peut-être une belle trouvaille.
Tu ne nous ferais pas une page en ligne décrivant cette technique, avec exemple(s) et résultats des tests dans les navigateurs?

OK.
Je vais faire ça.
Bon, je m'en vais quelques jours au soleil, et je reviens avec un tutoriel au mois de mai...

J'ai aussi une variante sous le coude assez sympa...

Pour patienter, je peux déjà dire que ça tourne sous FF2, IE6, IE7, IE5.5..

En attendant le tuto de Yakou32 que je remercie au passage , j'ai fait une page 'bricolage' comme ça , testé sur Firefox, Opera et I.E 6 avec des résultats quelque peu différents mais l'idée est là.