[Résolu] Réaliser un effet esclaier

Bonjour,

Pour la mise en page de l'un de mes menu j'aimerais lui donner l'allure d'un escalier, cad que chaques éléments soit décalé sur la droite par rapport à l'élément qui est au dessus de lui.

Le menu en question est dynamique, donc impossible de connaitre à l'avance le nombre d'élément qui le compose.
Je souhaite éviter d'insérer du style en brut dans le HTML (via l'attribut "style" des éléments).

Actuellement pour se faire j'utilise des espaces incassables... un peu "bourrin" :

<ul>
<li>item 1&nbsp;</li>
<li>item 2&nbsp;&nbsp;</li>
<li>item 3&nbsp;&nbsp;&nbsp;</li>
</ul>

Je cherche une combinaison CSS à intégrer dans ma feuille de style pour le faire de façon plus propre.

Merci d'avance pour vos contributions!
Modifié par Just (22 Sep 2008 - 17:37)

Salut,

Justement en php une simple boucle ou tu incrémentes une variable $margin_left (par exemple) avec un

<li style="margin-left: <?php echo $margin_left .'px';?>"

Bonjour,

Merci pour ta réponse ghost.

Mais comme indiqué dans mon post je souhaite éviter d'insérer des styles dans le code HTML.

Donc le sujet cours toujours.

à moins de générer en PHP une feuille de style supplémentaire qui contiendrait les styles pour lien1, lien2, ..., lienN.
et d'attribuer les noms de classe qui vont bien dans ta liste.

Je ne pense pas qu'il y ait d'autre solution.

Mais j'utiliserais la première qui est plus simple à mettre en œuvre, reste valide et accessible.

a écrit :
Mais comme indiqué dans mon post je souhaite éviter d'insérer des styles dans le code HTML.

C'est bien les souhaits mais pour quelle raison ne pas vouloir avoir recours à l'attribut style alors que c'est la seule solution (menu dynamique oblige) ?

L'attribut style n'est pas une tare quand il est utilisé à bon escient !
Et reste "plus propre" (si on peut parler de propreté) que ta solution actuelle ...

<edit>Et comme dit précédemment son utilisation n'est pas néfaste ...</edit>
Modifié par yodaswii (26 Aug 2008 - 20:46)

Hum la seule choses que je reproche à la balise style intégré est de ne pas pouvoir facilement harmoniser comme on peux le faire avec une feuille de style. Donc la maintenance sur le site est plus complexe. Mais bon.

Je vais donc utiliser la balise style et une boucle PHP ^^.

Merci à vous!
Modifié par Just (22 Sep 2008 - 17:38)

Et sinon, juste en passant:

#machin li {width: 150px;}
#machin li+li {width: 165px;}
#machin li+li+li {width: 180px;}
#machin li+li+li+li {width: 195px;}
#machin li+li+li+li+li {width: 210px;}
#machin li+li+li+li+li+li {width: 225px;}

Salut,

Exact : je n'avais pas pensé au pseudo classe.
Mais, comme à l'habitude, ce n'est pas IE friendly malheureusement .
Et j'ajouterais que cela implique de connaitre le nombre maximum d'éléments de notre escalier (ce à quoi l'on peut s'adapter).

Merci pour l'info !