28172 sujets

CSS et mise en forme, CSS3

Placement précis d'une image dans un texte multi-colonnes

Bonjour,

Je souhaite formater le texte d'une page web sur plusieurs colonnes. J'utilise pour cela les propriétés 'column-count' et 'column-gap' dans ma feuille de style. Le formatage fonctionne correctement.

Mais j'aimerai pouvoir positionner une image, en haut de la dernière colonne. Cela quelque soit la taille du texte. Et bien sur elle ne devra pas se superposer avec le texte.

Voici le code que j'utilise.
HTML:
<h2>TITRE</h2>

<div class="photo_droite">
     <IMG SRC="/_images/illustration.jpg" BORDER="0" WIDTH="365" HEIGHT="178" ALT="">
</div>

<div id="bloc_deux_colonnes">
     <h3>sous-titre 1</h3>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
     <h3>sous-titre 2</h3>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
</div>


CSS:
#bloc_deux_colonnes {
	width: 749px;
	text-align: justify;
	-moz-column-count: 2;
	-moz-column-gap: 15px;
	-webkit-column-count: 2;
	-webkit-column-gap: 15px;
	column-count: 2;
	column-gap: 15px;
}
.photo_droite {
	position: absolute;
	left: 397px;
	top: 70px;
}


Avec la solution ci-dessus l'image se positionne bien en haut à droite de mon pavé multi-colonnes, mais il recouvre le texte:

upload/47640-exemple01.jpg

Cela vient de l'utilisation de 'position:absolute'. Y aurait-il une propriété pour définir que le texte et l'image ne doivent pas se superposer ?
J'ai essayé d'autres solution, avec 'position:relative', avec l'image incluse dans le DIV 'bloc_deux_colonnes', mais impossible de définir son positionnement.

Quelqu'un aurait une idée ?

jdeheyn
As-tu déjà essayé de créer une nouvelle classe à l'intérieur de "photo_droite" qui encadre l'image. Tu mets la largeur de ton image et cette classe tu lui mets un float:right; ? Après ça dépend si tes images auront tout le temps la même largeur... Jt'avou que c'est un peu de la bidouille mais faut souvent ça avec les images.
Bonjour,

Position:absolute l'image sort du flux donc le problème rencontré est normal.
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html

Ensuite la solution qui me vient immédiatement serait de positionner l'image juste avant le pave de texte et de travailler à partir de ça:

<div id="bloc_deux_colonnes">
     <h3>sous-titre 1</h3>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
     <h3>sous-titre 2</h3> 
<IMG SRC="/img/formations.png" BORDER="0" WIDTH="410" HEIGHT="165" ALT="">
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
</div>

Modifié par rodolpheb (03 Jan 2013 - 17:57)
:ice_tea12 a écrit :
As-tu déjà essayé de créer une nouvelle classe à l'intérieur de "photo_droite" qui encadre l'image. Tu mets la largeur de ton image et cette classe tu lui mets un float:right; ?


Non, ça ne change rien. la propriété 'position:absolute' prend le dessus, et l'image reste superposée au texte.

:rodolpheb a écrit :
Ensuite la solution qui me vient immédiatement serait de positionner l'image juste avant le pave de texte


C'est une solution qui fonctionne, effectivement, mais elle ne permet pas de garder l'image toujours en haut à droite de la dernière colonne. Si mon texte après "sous-titre 2" est plus long que celui de "sous-titre 1" l'image va basculer dans la colonne de gauche. Smiley decu
Le fait que l'image se superpose avec le texte vient effectivement, comme tu le dis, de la propriété 'position:absolute'. Mais j'ai pas trouvé avec les autres propriétés celle qui me permettrait de positionner l'image de manière précise.
Je suis en grand fan de table-cell et je l'utiliserais comme cela:
<div class="colonnes">
     <h3>sous-titre 1</h3>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          </div>
          <div class="colonnes">
     <h3>sous-titre 2</h3>
     <IMG SRC="/img/formations.png" BORDER="0" WIDTH="410" HEIGHT="165" ALT="">
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
          <p>Bla bla bla ....</p>
</div>



.colonnes {
display:table-cell;
width:50%;
}
rodolpheb a écrit :
Je suis en grand fan de table-cell


Effectivement rodolpheb, avec 'table-cell' ça fonctionnerait, mais je perds l'avantage de 'column' qui équilibre automatiquement le texte dans les différentes colonnes. Smiley decu
Sujet clos
Aller à