J'ai creer un script qui creer automatiquement un menu. Pour cela, je me sert des listes (<ul> ). Enfin, je m'en sert avec IE.
L'idée etait la suivante; je defini un style pour la balise <ul>, avec comme atttribut : margin-left:15px; Ainsi, je peux faire autant de sous section differente, grace a mon style, les sections sont indentées.
Aisni, j'ai ces styles :
Code :
- <style type="text/css">
- <!--
- a:link {text-decoration:none; color:#6A2300}
- a:visited {text-decoration:none; color:#6A2300}
- a:hover {text-decoration:underline; color:#6A2300}
- li {list-style:none;margin-left:10px;margin-bottom:0px;margin-top:0px;vertical-align:middle;font-family:verdana;font-weight:normal;font-size:12px;}
- ul {margin-left:15px;font-weight:bold;font-size:14px;font-family:verdana;}
- ul.root {margin-left:0px;font-weight:bold;font-size:16px;font-family:arial;}
- -->
- </style>
|
et cette liste:
Code :
- <ul class="root"><img src="images/puceRoot.gif">truc
- <li><a href="1.html">section1</a>
- <li><a href="2.html">section2</a>
- <li><a href="3.html">section3</a>
- <li><a href="4.html">section4</a>
- <ul><img src="images/puce.gif">machin
- <li><a href="g1.html">machin1</a>
- <li><a href="g2.html">machin2</a>
- </ul>
- </ul>
- <ul class="root"><img src="images/puceRoot.gif">bidule
- <li><a href="r1.html">bidule1</a>
- <li><a href="r2.html">bidule2</a>
- </ul>
|
Sur IE, le menu a cette apparence ( a peu pres):
TRUC
section1
section2
section3
section4
MACHIN
machin1
machin2
BIDULE
bidule1
bidule2
Voila, vous pouvez le voir, grace aux styles l'indentation lors de la decomposition d'une section est automatique.
Seulement,ça ça ne marche pas sous NS (il a du mal avec les listes et fait des indentations automatiques enormes (et j'ai pas reussi a les desactiver)).
Donc je le fais avec des <span> et des <div>:
Code :
- <style type="text/css">');
- <!--');
- div.li {list-style:none;margin-left:5px;margin-bottom:0px;margin-top:0px;vertical-align:middle;font-family:verdana;font-weight:normal;font-size:12px;}
- span.ul {list-style:none;margin-left:15px;margin-bottom:0px;margin-top:10px;font-weight:bold;font-size:14px;font-family:verdana;}
- span.root {list-style:none;margin-left:0px;margin-bottom:5px;margin-top:15px;font-weight:bold;font-size:16px;font-family:arial;}
- -->
- </style>
|
puis telle liste :
Code :
- <span class="root"><img src="images/puceRoot.gif">truc<br>
- <div class="li"><a href="1.html">section1</a></div>
- <div class="li"><a href="2.html">section2</a></div>
- <div class="li"><a href="3.html">section3</a></div>
- <div class="li"><a href="4.html">section4</a></div>
- <span class="ul"><img src="images/puce.gif">machin <br>
- <div class="li"><a href="g1.html">machin1</a></div>
- <div class="li"><a href="g2.html">machin2</a></div>
- </span>
- </span>
- Qui apparait effectivement comme il faut... enfin sous NS 4.x, parce que avec le 6.0 c la panique; en effet, les <div class="li"> ne sont pas indenté du tout (malgré le style ?), ils sont meme collés sur le bord gauche !
- Je n'arrive pas a trouver comment les indenter avec NS6!
- Merci de votre aide ! :hello:
|
