Discussion :

[laurentg2003]

Bonjour,
Tout est dans le titre.
Je souhaite formater mon texte sur deux colonnes avec centrée verticalement et horizontalement une image qui flotterait dans le texte
Ci joint la photo de ce que je veux faire

J'ai trouvé comment faire 2 colonnes via CSS :display:table,table-cell etc
et comment centrer une image verticalement et horizontalement
Mais je veux donc faire les 2 à la fois
Si quelqu'un sait comment faire ou a une piste
Merci d'avance !

[rodolphebrd]

Bonjour,

il y a cet article qui peut vous intéresser : http://css-tricks.com/float-center/

[laurentg2003]

Merci beaucoup !!!!!!
Je pense que c'est la solution.Je venais d'ailleurs de partir sur une position absolue pour l'image!Je fais des sites webs depuis des années mais là je passe au tout CSS ,exit les tableaux ,je redebute...
Je ferme pas le topic au cas ou

[rodolphebrd]

Sinon cet article est pas mal : http://alistapart.com/article/crosscolumn
Exemple 4 détaillé:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="overall">
	<h1>Example 4: Fixing the Accessibility Problems</h1>
 
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient<span class="CCspace">&nbsp;</span> montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</p>
		<p>Praesent congue sagittis elit. Nullam sagittis tortor ut dui. Praesent tristique feugiat ligula. Quisque congue ante vel augue facilisis nonummy. Nulla auctor, purus id ullamcorper ultrices, justo metus venenatis odio, eu nonummy pede urna pretium tortor. Aliquam erat volutpat. Nullam ante. Aenean feugiat. Etiam lacinia dolor sagittis nunc. Maecenas nibh risus, suscipit vel, elementum vitae, posuere et, purus. Vivamus ipsum nunc, mattis non, gravida ut, tempor et, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sem. Integer accumsan mi sed metus porta volutpat. Duis sollicitudin enim at diam. Donec ultrices sem aliquam ante ullamcorper placerat.</p>
	</div>
 
	<div class="col">
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tristique arcu vitae dui. Ut tempus wisi eget urna. Nullam laoreet scelerisque felis. Aliquam turpis libero, iaculis nec, porta nec, condimentum<span class="CCpullout"><del> [Pullout: </del><span><img src="http://d.alistapart.com/crosscolumn/monkey.jpg" alt=""> The office monkey, riding the office camel. </span><del>] </del></span> sit amet, dolor. Proin cursus orci eu purus. In quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan, augue vitae vehicula viverra, risus velit consequat nunc, ut molestie erat risus non dui. Morbi placerat leo. Maecenas iaculis elit at eros. Cras sem. Phasellus augue.</p>
		<p>Integer molestie eros et urna. Aenean egestas lectus ac mi. Etiam semper lectus at ipsum. Nunc cursus wisi eget urna. Donec pretium tristique sapien. Integer ligula nunc, malesuada gravida, posuere luctus, semper sit amet, nunc. Cras sagittis blandit urna. Nunc eu arcu sed magna vestibulum dictum. Fusce pretium interdum risus. Praesent bibendum lacinia sem. Aliquam erat volutpat.</p>
		<p>Nunc arcu. Ut faucibus purus in risus. Morbi sem. Nunc consequat, sem a suscipit scelerisque, leo tortor sollicitudin nibh, quis vehicula turpis nibh et lorem. Fusce facilisis semper felis. Cras quis magna. In hac habitasse platea dictumst. Etiam quam nisl, bibendum et, tincidunt vel, tristique sed, eros. Cras laoreet. Etiam nisl eros, luctus nec, eleifend vitae, aliquam id, sapien.</p>
	</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
* {margin:0;padding:0;}
p {padding:.625em 0; text-align:justify; line-height:20px;}
#overall {width:755px; margin:0 auto;}
.col {width:365px; padding:0 5px; float:left;}
.CCspace {width:175px; height:315px; padding:5px; float:right;}
.CCpullout {width:350px; height:315px; padding:5px; float:left; margin-left:-185px;}
.CCpullout span {width:350px; position:absolute; text-align:center; font-size:.9em; font-weight:bold;}
.CCpullout del {font-size:0px; color:#fff; position:absolute;}

http://codepen.io/anon/pen/DrlfF

[laurentg2003]

Merci Je crois que là j'ai toutes les armes en main

[laurentg2003]

Re,
J'ai trouvé une solution batarde avec un pseudo tableau couplé avec la propriété cs3 before Je créé un tableau de 2 colonnes et au milieu des 4 cellules un flottant avec before ensuite je positionne l'image en position absolu sur le flottant
et la stupeur IE et Google Chrome m'affiche la même chose mais pas Firefox voir capture
Voice le code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.table{display:table;border:1px solid red;width:98%;height:98%;/*border-collapse: separate; border-spacing: 0px; */} 
.tableRow{display:table-row;} 
.tableCell{display:table-cell;border:1px solid black;width:200px;height:200px;}
#imgArticle1{ position: absolute; top: 430px; left: 440px; }
#cell3:before ,#cell4:before { content: ""; width: 104px; height: 157px;background-color:#000000;margin-bottom:170px;}
#cell1:before ,#cell2:before { content: ""; width: 104px; height: 157px;background-color:#000000;margin-top:170px;}
#cell1:before { float: right;}
#cell2:before { float: left;}
#cell3:before { float: right;}
#cell4:before { float: left;}

et le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="table">	   
        <img src="article1.png" id="imgArticle1">
	<div class="tableRow"><div class="tableCell" id="cell1">Bonjour</div><div class="tableCell" id="cell2">Bonjour<br/>monsieur</div></div>
	<div class="tableRow"><div class="tableCell" id="cell3">Bonjour</div><div class="tableCell" id="cell4">Bonjour<br/>monsieur</div></div>
</div>

En JavaScript il serait facile de corriger cela mais ça serait du sale boulot
Si quelqu'un a une idée merci