28217 sujets

CSS et mise en forme, CSS3

[RESOLU]Balise a et liste-style-image

salut
je cherche a faire un exploreur pour mon site ou il y ai une indentation
en fait je sais pas comment creer mon affichage
je pense le faire a base de liste du type
<li class="dossier"><a href="">nomdelapage</a></li>
ou <li class="fichier"><a href="">nomdelapage</a></li>

la class fichier et dossier contiennent de liste-style-image specifique selon le status
mon probleme est comment faire l'indentation c'est a dire decaler les sous dossier d'un dossier et ect

je pensai resoudre mon pb avec
<li ><a href=""class="dossier">nomdelapage</a></li>
ou <li ><a href=""class="fichier">nomdelapage</a></li>

mais ceci ne fonctionne pas
alors si vous savez resoudre mon probleme ou si vous avez une approche
n'hesitez pas
merci
Modifié par jeff (29 Jun 2005 - 07:58)
Il va manquer un bout de code si tu parles de gestion des sous dossiers etc Smiley cligne 


<ul>
<li class="fichier">fichier</li>
<li class="dossier">dossier <ul><li class="fichier">fichier</li></ul>
</ul>


Par exemple
Et ensuite, tu gères les marges avec la cascade

ul li.fichier
{
margin: XXpx;
}
ul li.dossier ul li.fichier
{
margin: YYpx;
}


A tester Smiley cligne
merci
je vais voir ca une foi mes fonction fini
et sinon avec 
li>ul

c'est peut etre possible??
avec ta structure
jeff a écrit :
merci
je vais voir ca une foi mes fonction fini
et sinon avec 
li>ul

c'est peut etre possible??
avec ta structure


Oui bien sûr pour marger les <ul> directement enfant, mais je ne le propose généralement pas car c'est non fonctionnel sous IE.

Par ailleurs, la multiple imbrication de listes comme je le présentais crée les marges ad hoc par défaut Smiley cligne

Faudrait que je test direct pour mieux me rendre compte de la marche à suivre.
Salut. Je n'utiliserai pas le code du forum pour cette explication car pas de couleur dans le rendu: tu crées d'abord plusieurs classes d'indentation.
exemple : ind (pour indentation)
.ind10px {margin-left: 10px;}
.ind20px {margin-left: 20px;}
.ind30px {margin-left: 30px;}
Ensuite dans ton html :
<ul>
<li class="ind10px">blabla</li>
<li class="ind20px">blabla</li>
<li class="ind30px">blabla</li>
</ul>
Et ainsi de suite...
Veiller d'abord : li { margin-left: 0;} c'est important pour "tuer" les indentations par défaut de chaque navigateur.
Par contre, maintenant, va savoir si l'on peut mettre une list-style-type ou une list-style-image différente à chaque item ?? J'avais fait un essai non concluant à ce sujet. Il me semble que seuls <ul><ol><dl> (blocs de liste) soient concernés... mais il est bon de vérifier par toi même.
A+
Modifié par Aureance (29 Jun 2005 - 00:52)
Aureance a écrit :
Salut. Je n'utiliserai pas le code du forum pour cette explication car pas de couleur dans le rendu: tu crées d'abord plusieurs classes d'indentation.
exemple : ind (pour indentation)
.ind10px {margin-left: 10px;}
.ind20px {margin-left: 20px;}
.ind30px {margin-left: 30px;}
Ensuite dans ton html :
<ul>
<li class="ind10px">blabla</li>
<li class="ind20px">blabla</li>
<li class="ind30px">blabla</li>
</ul>

Et ainsi de suite...
Veiller d'abord : li { margin-left: 0;} c'est important pour "tuer" les indentations par défaut de chaque navigateur.
Par contre, maintenant, va savoir si l'on peut mettre une list-style-type ou une list-style-image différente à chaque item ?? J'avais fait un essai non concluant à ce sujet. Il me semble que seuls <ul><ol><dl> (blocs de liste) soient concernés... mais il est bon de vérifier par toi même.
A+



Taratata, bien trop compliqué Smiley cligne

Bon, c'est bien ce qu'il me semblait, le tout est géré comme il faut sans rien faire Smiley langue
Suffit de bien faire le code HTML

Le rendu sans style :
http://elmoustikoblog.net/bordel/arbo/index.html
et avec style :
http://elmoustikoblog.net/bordel/arbo/index2.html

Wala wala
j'ai mis en commentaire une version avec contenu généré via CSS
sinon, utilises les images de fond plutôt que list-style-image qui est plus ou moins buggé.
Avec un positionement "top" en "em" pour bien garder la puce en haut en cas de texte trop long.
C'est encore ces imbrications auxquelles je ne suis pas habitué ( il me semblait que c'était interdit et je les ai toujours évitées ) mais si c'est ainsi, je vais m'en donner à cœur joie. (li-bé-ré)
Les imbrications : il faudrait que je pose la question à ce sujet, mais ou ?
En tout cas mon "truc" fonctionne bien et permet aussi d'ajouter d'autres indications ( à part l'indentation ) comme la couleur, la graisse, l'ordre, le style etc… je trouve moins compliqué que direct en html. ( c'est vrai que mon "style" n'apparaîtra pas si on désactive la feuille de style alors que dans ton exemple... oui ça restera bien.)

Je pense aussi que ton exemple "sans style" aurait été encore meilleur avec l'utilisation des balises <dl><dt><dd> qui possèdent intrinsèquement une indentation, plutôt que de "forcer" les balises <ul><li>.
Modifié par Aureance (29 Jun 2005 - 05:29)
Aureance a écrit :

Je pense aussi que ton exemple "sans style" aurait été encore meilleur avec l'utilisation des balises <dl><dt><dd> qui possèdent intrinsèquement une indentation, plutôt que de "forcer" les balises <ul><li>.


J'y ai pensé, mais les listes de définitions n'auraient de sens que pour les dossiers et pas pour les fichiers, ce qui ferait mélanger <ul> et <dl> pour un joyeux bordel final Smiley langue
Sujet clos
Aller à