28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image en plein milieu d'un texte

Pages :
Bonjour,

Je souhaiterais mettre en page un texte accompagné d'une illustration.
Je me casse la tête depuis quelques jours sans trouver une solution convenable...

Voici en quelques mots ce que je souhaite faire :
J'aimerais placer une image au centre (horizontalement et verticalement) d'un texte, à la façon d'un journal. Le texte sera scindé en 2 colonnes et justifié.
J'arrive à placer l'image soit à droite, soit à gauche mais au centre c'est pour le moment mission casse tête Smiley decu

Est-ce que quelqu'un a déjà été confronté à cette problématique ? Avez-vous une solution ?

Par avance merci.

Chris.
Modifié par ChrisFX (28 Jul 2011 - 00:57)
Bonjour à toutes et à tous,

je ne comprends pas ce que tu entends par placer une image au centre d'un texte ?

Veux-tu dire, une image en arrière-plan avec du texte par dessus en répartissant le texte dans deux colonnes ?

Ou bien une image centrale, sans texte par dessus, mais avec un texte à gauche qui contourne l'image et un autre texte à droite qui contourne aussi l'image?

@+
Artemus24 a écrit :

Ou bien une image centrale, sans texte par dessus, mais avec un texte à gauche qui contourne l'image et un autre texte à droite qui contourne aussi l'image ?


C'est bien ça... Illustrer un texte à l'aide d'une image tout comme tu l'as si bien décris Smiley smile
jb_gfx a écrit :
Laisse-moi deviner : tu viens du monde du Print et tu ne connais rien au Web ?


Si seulement, j'aurais eu une excuse au moins... Non c'est juste que je suis très rouillé, je développe mais je ne m'occupe pas de la mise en page en général.
jb_gfx a écrit :
Laisse-moi deviner : tu viens du monde du Print et tu ne connais rien au Web ?

Il est taquin, non ? Smiley lol
Bonsoir jb-gfx,

c'est "à la façon d'un journal" qui te faire dire cela ?

@ Chris FX : voici un exemple basique d'une image et d'un texte qui s'enroule autour, mais sur une seule colonne. Pourquoi ne pas mettre l'autre colonne accolée à ce pavé ? 
<!doctype html>
<html>
<head>
<title>Image Cadr&eacute;e</title>

<style type="text/css">
.pave {
	background-color	: yellow;
	width				: 800px;
	padding				: 10px;
}

.gauche {
	float				: left;
	margin-right		: 10px;
}
</style>
</head>

<body>
	<div class="pave">
		<img class="gauche" src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" />
		<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<p class="clear" />
	</div>
</body>
</html>
Mais ça ne répond que partiellement à ta question.

@+
Modifié par Artemus24 (25 Jul 2011 - 21:50)
jb_gfx a écrit :
Bon alors : tu as un(e) graphiste qui vient du Print et qui ne connait rien au Web. Smiley lol


Non plus lol Je dois faire un site pour une amie et pour une fois je dois m'occuper de la partie mise en page / graphisme etc... Smiley decu

@Artemus24 : Merci, je vais tester ça Smiley smile
Bonsoir à toutes et à tous,

je suis encore débutant et une image centrée avec du texte qui s'enroule autour des deux cotés et au dessus et en dessous, je n'ai jamais vu ça en exemple.

Mais pourquoi faire quelque chose d'aussi "journalistique" ?

Une colonne, une image cadrée à droite ou à gauche et un texte qui s'enroule autour, c'est déjà pas mal. Non ?

Sinon des experts de ce forum vont te trouver une super solution ?

Car moi aussi j'aimerai savoir faire cela ?

@+
jb_gfx a écrit :
Je pensais que c'était plutôt un truc comme ça


C'est exactement ce qu'il me faut !!!
Salut @tous »

Ah oui le style magazine moi j'adore.
@Artemus24 : tu en a des tutos sur Alsa qui traite du sujet » image envelopper de texte.

..
Techniquement en CSS, à part passer par des bidouilles ignobles, je sais pas comment tu peux le faire.

PS : Il y avait un truc monstrueux (dans le sens horrible) dans ce genre sur le site perso d'Eric Meyer mais je le retrouve plus.
Modifié par jb_gfx (25 Jul 2011 - 22:12)
Bonsoir à toutes et à tous,

@ Zardoz : j'ai dit que la forme journalistique que Chris FX recherche, je ne sais pas le faire.

Par contre mettre une image à gauche ou à droite dans une boite avec du texte qui s'enroule, ça oui je sais le faire !

@+
Modifié par Artemus24 (25 Jul 2011 - 22:12)
jb_gfx a écrit :
Techniquement en CSS, à part passer par des bidouilles ignobles, je sais pas comment tu peux le faire.
PS : Il y avait un truc monstrueux (dans le sens horrible) dans ce genre sur le site perso d'Eric Meyer mais je le retrouve plus.

"Une heure" de recherches pour remettre la main sur un sujet posté par Florent il y a quelques années (sic Smiley confus )...
Suicide capillaire...
+ le lien vers "les solutions" du site A List Apart

Bon, nous sommes d'accord :
- C'est pour faire mumuse Smiley cligne
- Cela pose différents problèmes (d'accessibilité, de respect du flux, de robustesse, de sémantique, etc...) Smiley decu
- C'est de la bidouille (ignoble, monstrueuse et horrible...diront certains...) à ne pas utiliser Smiley lol
Rien ne vaut le fameux :
img { float: center;}


Je sais où se trouve la porte Smiley lol
Mouais. A mon avis aussi, ça se fait avec de la bonne grosse bidouille !

Peut être si tu mets à ton image une position absolue, tu la mets au centre et ensuite tu fais quatre paragraphes, un en haut, un à gauche, un à droite et un en bas avec une position relative.
Bonjour à toutes et à tous,

après avoir lu les différentes réponses datant de 2005 extraites des liens du dernier post de "6l20", j'ai fait une tentative de résolution d'image au centre d'un texte répartie sur deux colonnes. J'ai l'impression que cela répond à la question posée, sans grosse bidouille. Je pense que l'on peut faire mieux.
<!doctype html>
<html>
<head>
<title>test</title>

<style type="text/css">
div#boite {
		margin				: 100px auto 0 auto;
		padding				: 0 30%;
		background-color	: blue;
}

div#col1 {
		float				: left;
		background-color	: yellow;
		width				: 50%;
}

span#bloc1 {
		float				: right;
		width				: 100px;
		height				: 133px;
}

div#col2 {
		float				: right;
		background-color	: pink;
		width				: 50%;
}

span#bloc2 {
		float				: left;
		width				: 110px;
		height				: 133px;
}

img {
		display				: block;
		margin-top			: 2px;
		width				: 200px;
		height				: auto;
}

br#clear {
		clear				: both;
}
</style>
</head>

<body>
	<div id="boite">
		<div id="col2">
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span id="bloc2"></span>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
		</div>

		<div id="col1">
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span id="bloc1"><img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" alt="image"></span>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
		</div>

		<br id="clear" />
	</div>
</body>
</html>
@+
Pages :
Sujet clos
Aller à