XML: COMMENT INSERER IMAGES HORIZONTALEMENT?

Marie -  
faboons Messages postés 290 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je voudrai ajouter des images a une pages de textes a l'aide de XML.

J;ai inserer le code: <img alt="1" src="img/d1.jpg"/> <img alt="1" src="img/d2.jpg"/> ]]>

Mais les images se pisitionnent verticalement, hors je les voudrai horizontales, cad 5 petites images par lignes.

Quelqu'un pourrait il me donner le bon code?

Merci d'avance!

A voir également:

1 réponse

faboons Messages postés 290 Date d'inscription   Statut Membre Dernière intervention   50
 
Créer un fichier css que tu appelles img_hrz.css avec ces lignes dedans :


		ul#hrz
		{
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
		}
		
		ul#hrz li
		{
			float: left ;
			text-align:center;
			margin-left: 10px;
		}


Tu peux l'importer dans ton xml comme ça si tu le places à la racine de ton site :

<?xml-stylesheet href="img_hrz.css" type="text/css"?>


Il faut mettre cette balise de préférence juste après ta première ligne qui déclare ton fichier xml.

Ensuite tu écris :

<ul id="hrz">

<li><img alt="1" src="img/d1.jpg"/></li>
<li> <img alt="2" src="img/d2.jpg"/></li>....

</ul>


ça devrait marcher sans rien de plus.

@ pluche.
Fab.
0
briiiiix Messages postés 624 Statut Membre 18
 
Excellente reflexion, sauf que la tu viens d'oublier un truc.
Il faut spécifier la largeur de chaque element, je m'explique.
Si ton <li> a une largeur de 50px par exemple, le <ul> doit avoir la largeur de 500px + 50 pour les marges afin de retourner à ma ligne toutes les 5 images.
Le code devient:

#hrz
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
width:550px;
}

#hrz li
{
float: left ;
text-align:center;
width:50px;
margin-left: 10px;
}

Voila
0
faboons Messages postés 290 Date d'inscription   Statut Membre Dernière intervention   50
 
Bien vu et autant pour moi !
0