Deux colonnes et un bloc au milieu, façon Interview

Bonjour !

Mon problème est le suivant : j'ai déjà une CSS avec deux colonnes (hauteur et largeur fixes) et j'aimerai pouvoir insérer au milieu des deux colonnes, une image qui serait alors encadrée par les deux colonnes.
Si vous ne voyez pas ce que je veux dire, pensez aux magazines : certains d'entre eux, lorsqu'ils retranscrivent une interview, insèrent un gros bloc de citation, au milieu du texte.
Si je ne suis toujours pas assez claire , je vous joins ce schéma

Le but bien sûr,est que l'image ne superpose pas le texte mais qu'elle soit encadrée par lui...

Je vous remercie par avance

la bise

Camille

Bonjour,

Voici une proposition inspirée de l'exemple de yakou32

La feuille de style :

*
	{
	margin: 0;
	padding: 0;
	border: 0;
	}

html
	{
	font-size: 100%;
	width: 100%;
	height: 100%;
	}

body
	{
	font-family: helvetica,geneva,arial,tahoma,sans-serif;
	font-size: 1em;
	}

#conteneur
	{
	position:relative;
	width:750px;
	}

#col1
	{
	text-align: justify;
	padding:10px;
	width:350px;
	float:left;
	}

#col2
	{
	text-align: justify;
	padding:10px;
	width:350px;
	float:right;
	}

.spacer
	{
	height:208px;
	}

#col1 .spacer
	{
	float:right;
	}

#col2 .spacer
	{
	float:left;
	}

#col1 .pseudo-encart
	{
	width:110px; /* moitié de la largeur de l'image + padding de 10 pixels à gauche */
	height:170px; /* hauteur de l'image + padding de 10 pixels en haut et en bas */
	float:right;
	clear:right;
	}

#col2 .pseudo-encart
	{
	width:110px; /* moitié de la largeur de l'image + padding de 10 pixels à droite; */
	height:170px; /* hauteur de l'image + padding de 10 pixels en haut et en bas */
	float:left;
	clear:left;
	}

#encart
	{
	position:absolute;
	top:228px; /* hauteur du spacer + padding haut des colonnes + padding haut de l'image */
	left:275px; /* (largeur du conteneur + padding des colonnes - largeur de l'image) / 2 */
	}

Le code HTML :

<div id="conteneur">
	<img src="image.jpg" id="encart" alt="" />
	<div id="col1">
		<div class="spacer"></div>
		<div class="pseudo-encart"></div>
		Lorem ipsum dolor sit amet, consectetuer adipisci elit. Summum praeclarorum approbantibus, oratione gessisse magnopere sed autem, si et incurrunt quidem.. Cum modum aut malivoli in in, non alias nisi eas esse, te movet potione cyrenaicisque quod plane voluptas et, effectrices effecerit memoria plurimum vel, effecerit voluptate eorumque stabilitas atque videro nam, esse alios si non, de bene, magnos sensus etiam, iniuria ut statim rerum defuturum animi rationem repellat tamen est, in quod utrumque torquate, eo quibus, confirmavit afflueret coercendi maximis solida et, tum an, distinctio tamen fieri sed, dicere sed, dolore esse multis ad praesidium eo quam et nosmet laudatum recta extremum, ipsum sine quam videtisne inbecilloque non detractis, partem vult aut.
		Ab faciunt causae insatiabiles, earum.. Utamur non ut necessarius, terentianus animi putant habent egregios nihil, sit sit quam tamquam tempore probabo fruitur ergo vivendum.. Divelli ita tam suscipiantur, efficiat quam possit futurove nec autem ne, moderatius.. Electram quicquid historiae, iracundiae est in conversam ac sine, non veri natura infantes vera amori placet, grata latine, recte pertineant statue suum ea, esse sunt tuo faciant mea physicis centurionum.. Etsi libidinum sua, quae susciperet is tam interrogari, modo facere ex ars non.
	</div>
	<div id="col2">
		<div class="spacer"></div>
		<div class="pseudo-encart"></div>
		Lorem ipsum dolor sit amet, consectetuer adipisci elit. Summum praeclarorum approbantibus, oratione gessisse magnopere sed autem, si et incurrunt quidem.. Cum modum aut malivoli in in, non alias nisi eas esse, te movet potione cyrenaicisque quod plane voluptas et, effectrices effecerit memoria plurimum vel, effecerit voluptate eorumque stabilitas atque videro nam, esse alios si non, de bene, magnos sensus etiam, iniuria ut statim rerum defuturum animi rationem repellat tamen est, in quod utrumque torquate, eo quibus, confirmavit afflueret coercendi maximis solida et, tum an, distinctio tamen fieri sed, dicere sed, dolore esse multis ad praesidium eo quam et nosmet laudatum recta extremum, ipsum sine quam videtisne inbecilloque non detractis, partem vult aut.
		Ab faciunt causae insatiabiles, earum.. Utamur non ut necessarius, terentianus animi putant habent egregios nihil, sit sit quam tamquam tempore probabo fruitur ergo vivendum.. Divelli ita tam suscipiantur, efficiat quam possit futurove nec autem ne, moderatius.. Electram quicquid historiae, iracundiae est in conversam ac sine, non veri natura infantes vera amori placet, grata latine, recte pertineant statue suum ea, esse sunt tuo faciant mea physicis centurionum.. Etsi libidinum sua, quae susciperet is tam interrogari, modo facere ex ars non.
	</div>

</div>

C'est un exemple pour une image de 200 pixels de large et 150 pixels de hauteur.
Modifié par Shunkin (08 May 2008 - 11:41)

Une autre version sans doute plus simple à mettre en œuvre mais qui nécessite d'utiliser deux fois l'image et un correctif pour Internet Explorer 6 :

La feuille de style commune :

*
	{
	margin: 0;
	padding: 0;
	border: 0;
	}

html
	{
	font-size: 100%;
	width: 100%;
	height: 100%;
	}

body
	{
	font-family: helvetica,geneva,arial,tahoma,sans-serif;
	font-size: 1em;
	}

#conteneur
	{width:750px;}

#col1
	{
	text-align: justify;
	padding:10px;
	width:350px;
	float:left;
	}

#col2
	{
	text-align: justify;
	padding:10px;
	width:350px;
	float:right;
	}

.spacer
	{height:208px;}

#col1 .spacer
	{float:right;}

#col2 .spacer
	{float:left;}

.right
	{
	display:block;
	float:right;
	margin-right:-120px; /* (largeur de l'image + padding-right de la première colonne + padding-left de la deuxième colonne)  / 2 */
	clear:right;
	padding:10px;
	padding-right:0;
	position:relative;
	z-index:500;
	}

.left
	{
	display:block;
	float:left;
	margin-left:-120px; /* (largeur de l'image + padding-right de la première colonne + padding-left de la deuxième colonne)  / 2 */
	clear:left;
	padding:10px;
	paddin-left:0;
	position:relative;
	z-index:500;
	}

Le correctif pour Internet Explorer 6 :

.right
	{margin-right:-60px; /* (largeur de l'image + padding-right de la première colonne + padding-left de la deuxième colonne)  / 4 */}

.left
	{margin-left:-60px; /* (largeur de l'image + padding-right de la première colonne + padding-left de la deuxième colonne)  / 4 */}

Le code HTML :

<div id="conteneur">
	<div id="col1">
		<div class="spacer"></div>
		<img src="image.jpg" class="right" alt="" />
		Lorem ipsum dolor sit amet, consectetuer adipisci elit. Summum praeclarorum approbantibus, oratione gessisse magnopere sed autem, si et incurrunt quidem.. Cum modum aut malivoli in in, non alias nisi eas esse, te movet potione cyrenaicisque quod plane voluptas et, effectrices effecerit memoria plurimum vel, effecerit voluptate eorumque stabilitas atque videro nam, esse alios si non, de bene, magnos sensus etiam, iniuria ut statim rerum defuturum animi rationem repellat tamen est, in quod utrumque torquate, eo quibus, confirmavit afflueret coercendi maximis solida et, tum an, distinctio tamen fieri sed, dicere sed, dolore esse multis ad praesidium eo quam et nosmet laudatum recta extremum, ipsum sine quam videtisne inbecilloque non detractis, partem vult aut.
		Ab faciunt causae insatiabiles, earum.. Utamur non ut necessarius, terentianus animi putant habent egregios nihil, sit sit quam tamquam tempore probabo fruitur ergo vivendum.. Divelli ita tam suscipiantur, efficiat quam possit futurove nec autem ne, moderatius.. Electram quicquid historiae, iracundiae est in conversam ac sine, non veri natura infantes vera amori placet, grata latine, recte pertineant statue suum ea, esse sunt tuo faciant mea physicis centurionum.. Etsi libidinum sua, quae susciperet is tam interrogari, modo facere ex ars non.
	</div>
	<div id="col2">
		<div class="spacer"></div>
		<img src="image.jpg" class="left" alt="" />
		Lorem ipsum dolor sit amet, consectetuer adipisci elit. Summum praeclarorum approbantibus, oratione gessisse magnopere sed autem, si et incurrunt quidem.. Cum modum aut malivoli in in, non alias nisi eas esse, te movet potione cyrenaicisque quod plane voluptas et, effectrices effecerit memoria plurimum vel, effecerit voluptate eorumque stabilitas atque videro nam, esse alios si non, de bene, magnos sensus etiam, iniuria ut statim rerum defuturum animi rationem repellat tamen est, in quod utrumque torquate, eo quibus, confirmavit afflueret coercendi maximis solida et, tum an, distinctio tamen fieri sed, dicere sed, dolore esse multis ad praesidium eo quam et nosmet laudatum recta extremum, ipsum sine quam videtisne inbecilloque non detractis, partem vult aut.
		Ab faciunt causae insatiabiles, earum.. Utamur non ut necessarius, terentianus animi putant habent egregios nihil, sit sit quam tamquam tempore probabo fruitur ergo vivendum.. Divelli ita tam suscipiantur, efficiat quam possit futurove nec autem ne, moderatius.. Electram quicquid historiae, iracundiae est in conversam ac sine, non veri natura infantes vera amori placet, grata latine, recte pertineant statue suum ea, esse sunt tuo faciant mea physicis centurionum.. Etsi libidinum sua, quae susciperet is tam interrogari, modo facere ex ars non.
	</div>
</div>

Modifié par Shunkin (10 May 2008 - 04:08)