XML: COMMENT INSERER IMAGES HORIZONTALEMENT?
Marie
-
faboons Messages postés 291 Date d'inscription Statut Membre Dernière intervention -
faboons Messages postés 291 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!
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!
1 réponse
-
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.-
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 -
-
