Image à l'horizontal
ama
-
Miss_socrates Messages postés 925 Statut Membre -
Miss_socrates Messages postés 925 Statut Membre -
Bonsoir à vous
j ai ce type de code html:
<h4>Galeries</h4>
<div id="galerie1"><ul>
<li><a href="http://.........." > <img src="http:// .png"/></a>
<a href="http://..... " ><img src="http:// .png"/></a>
<a href="http:// " ><img src="http://.png"/></a></li></ul>
</div>
Je souhaite que les images soient les unes après les autres c est à dire à l horizontale sur ma page
j ai tapé ce css;
#galeries1{font-size:0.8em; font-style:italic; border:thin solid red; }
#galeries1 ul li{margin:3% 0 0 15%; width:100%; height:8%; display: block; border:thin solid green;}
#galeries1 ul li img{margin:0 3% 0 0; width:15%; border:thin solid blue;}
mais les images se placent les unes en dessous des autres
comment procéder dans le css
merci de votre attention
j ai ce type de code html:
<h4>Galeries</h4>
<div id="galerie1"><ul>
<li><a href="http://.........." > <img src="http:// .png"/></a>
<a href="http://..... " ><img src="http:// .png"/></a>
<a href="http:// " ><img src="http://.png"/></a></li></ul>
</div>
Je souhaite que les images soient les unes après les autres c est à dire à l horizontale sur ma page
j ai tapé ce css;
#galeries1{font-size:0.8em; font-style:italic; border:thin solid red; }
#galeries1 ul li{margin:3% 0 0 15%; width:100%; height:8%; display: block; border:thin solid green;}
#galeries1 ul li img{margin:0 3% 0 0; width:15%; border:thin solid blue;}
mais les images se placent les unes en dessous des autres
comment procéder dans le css
merci de votre attention
3 réponses
-
tes images sont de type block alors qu'elles devraient être inline, ce qui se vérifie par la présence dans le code de display: block.
Il suffit d'ajouter dans le css:
galerie1 ul li{
display: inline;
}
attention à l'orthographe dans le css, ce n'est pas galeries1 mais l'id est galerie1 !! -
merci pour la faute de frappe
Aussi la methode display: inline ne fonctionne pas non plus
je suis dans wordpress
je continue et si vous avez d autres propositions , je suis preneuse -
Il faut préciser display: inline pour tous les li et rajouter li à toutes les images sinon ce n'est pas une succession: corriger comme ceci:
<div>
<h4>Galeries</h4>
<ul id="galerie1">
<li><a href="http://......." > <img src="http:// .png"/></a> </li>
<li><a href="http://..... " ><img src="http:// .png"/></a> </li>
<li><a href="http://"... " ><img src="http://.png"/></a></li>
</ul>
<ul id="galerie2">
<li>.....</li>
<li>.....</li>
</ul>
etc.
</div>
et en css: ul li{
display: inline;
}
