28172 sujets

CSS et mise en forme, CSS3

Encadrer plusieurs images avec du texte

Bonjour

J'ai besoin de vos lumières.

J'ai un site avec une administration ou je peu mettre du texte brut et des images en illimités.

Et je souhaite afficher sur mon site le texte avec les images entourées par celui ci.

Mais je n'y arrive cela met toutes les images sur la meme ligne comme l'exemple sur l'image:

upload/6109-essair1.jpg

et en fait je voudrais avoir comme sur l'image (c'est un montage grossier):
upload/6109-ex-cssfgdiv.jpg
En fait je veus que les images soit soit a droite ou gauche (determiner dans l'admin) et ce possitionne en dessous de l'autre mlais avec le texte qui l'entoure.

Ce serait a faire en html pur pas de probleme mais en dynamique sachant qu'il peut y avoir 0 images ou 5 oublien 5 lignes de texte ou 150 je ne vois pas.

Voila le code que j'ai mis : 

<div id="main_page_texte">

<? 
$query_2 = "select *  from swb_photo where page = '".$row_page["id"]."' "; 
$result_2 = mysql_query($query_2,$mysqlconnectid);
while($row_2=mysql_fetch_array($result_2))
{
?>

<div class="divimg" style=" <? if($row_2["alignement"]=="0"){echo "float:right;";}else{echo "float:left;";} ?>">
   <img src="<? echo $row_2["image"];?>"/></div>

<?
}
echo $row_page["texte"];
?>

</div>



#main_page_texte {
	width: 800px;
	display: block;
	float: left;
	margin-top: 25px;
}

.divimg {
	width:auto;
	display:block;
	align:center;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}


Voila j'ai essayeé de détailler au max.

Merci de votre aide

@++
Modifié par Neoh56 (17 Jan 2011 - 01:31)
Re-Bonjour Neoh56,

Il y a un bug dans ta question Smiley cligne , les deux images sont les mêmes, celle de ce qui est, et celle de ce que tu voudrais qui soit.

Mais si je devine bien ta question (à toi de confirmer), tu peux obtenir quelque chose qui s’en approche.

Deux exemples :

http://www.les-ziboux.rasama.org/
La zone centrale avec les extraits des tables des matières des thèmes, qui s’empilent de part d’autres, alors qu’elles sont à la suite dans le flux.

Ou encore, avec des images cette fois.
http://www.les-ziboux.rasama.org/images-prenoms-en-arabe-def.html
Idem, les images sont à la suite dans le flux.

Dans les deux cas, la technique utilisée n’est pas la même. La première fonctionne même avec IE6 (le «design» de cette page date d’une époque ou IE6 était le roi), la seconde ne fonctionne qu’avec les navigateur conforme (à partir d’IE7, mais j’ai appliqué une astuce pour IE6 tout de même) et est donne un meilleur résultat, car plus universel.

Est-ce à quelque chose de ce genre que tu pensais ?

Éventuellement, tu peux étudier le CSS pour retrouver les déclarations correspondantes. Le CSS est correctement mis en forme, donc lisible, mais le HTML n’est pas mis en forme, car généré par XSLT (désolé, il faudra que tu le re-formate toi-même si tu veux le lire pour l’étudier).
Modifié par hibou57 (15 Jan 2011 - 19:35)
Bonsoir hiboux

En fait c'est pas tout a fait cela je joint la bonne image qui correspond a ce que j'ai actuellement. L'image en double est ce que je souhaite avoir.

upload/6109-essair1.jpg

Voila le code html que cela genere :


<div class="divimg" style=" float:left;">
        <a  rel="shadowbox" title="Commentaire de la photo" href="administration/pages/images/uthdkjwt-B29.jpg" target="_blank"><img src="administration/pages/images/thb_uthdkjwt-B29.jpg" border="0" /></a>
</div>
<div class="divimg" style=" float:right;">
        <a  rel="shadowbox" title="test alt" href="administration/pages/images/xddsftvw-B29.jpg" target="_blank"><img src="administration/pages/images/thb_xddsftvw-B29.jpg" border="0" /></a>
</div>
<div class="divimg" style=" float:right;">
        <a  rel="shadowbox" title="Commentaire de la photo" href="administration/pages/images/qjqfxsbe-annexe-orange.jpg" target="_blank"><img src="administration/pages/images/thb_qjqfxsbe-annexe-orange.jpg" border="0" /></a>
</div>
          <p style="text-align: justify;">Quidem praeter oppida Quidem praeter oppidaQuidem praeter oppidaQuidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida.</p>
<p style="text-align: justify;">&nbsp;&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida&nbsp;Quidem praeter oppida</p>
<p style="text-align: justify;">&nbsp;</p>
<h2 style="text-align: justify;">Test</h2>
<p style="text-align: left;">&nbsp;Quidem praeter oppida&nbsp;oppida z z z z z z z</p>


J'ai suprime du texte pour que ce soit plus lisible Smiley smile

Et ce que je souhaite c'est juste en modifiant le css avoir le montage que j'ai fait.

Merci

@++
A ta place je vérifierais en PHP le nombre d'images qu'il y a et je les "insérerais" dans les <p> selon grâce à un preg_replace() ou quelque chose dans ce goût-là.

Sinon utilise carrément un éditeur de texte genre http://www.wymeditor.org/
Sujet clos
Aller à