Mise en page avec Netscape: besoin d'aide !

Mise en page avec Netscape: besoin d'aide ! - Programmation

Marsh Posté le 16-05-2001 à 09:36:11    

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 :
  1. <style type="text/css">
  2.    <!--
  3.    a:link {text-decoration:none; color:#6A2300}
  4.    a:visited {text-decoration:none; color:#6A2300}
  5.    a:hover {text-decoration:underline; color:#6A2300}
  6.    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;}
  7.    ul {margin-left:15px;font-weight:bold;font-size:14px;font-family:verdana;}
  8.    ul.root {margin-left:0px;font-weight:bold;font-size:16px;font-family:arial;}
  9.    -->
  10. </style>


et cette liste:

Code :
  1. <ul class="root"><img src="images/puceRoot.gif">truc
  2.     <li><a href="1.html">section1</a>
  3.     <li><a href="2.html">section2</a>
  4.     <li><a href="3.html">section3</a>
  5.     <li><a href="4.html">section4</a>
  6.     <ul><img src="images/puce.gif">machin
  7.         <li><a href="g1.html">machin1</a>
  8.         <li><a href="g2.html">machin2</a>
  9.     </ul>
  10. </ul>
  11. <ul class="root"><img src="images/puceRoot.gif">bidule
  12.     <li><a href="r1.html">bidule1</a>
  13.     <li><a href="r2.html">bidule2</a>
  14. </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 :
  1. <style type="text/css">');
  2. <!--');
  3. 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;}
  4. span.ul {list-style:none;margin-left:15px;margin-bottom:0px;margin-top:10px;font-weight:bold;font-size:14px;font-family:verdana;}
  5. span.root {list-style:none;margin-left:0px;margin-bottom:5px;margin-top:15px;font-weight:bold;font-size:16px;font-family:arial;}
  6. -->
  7. </style>


puis telle liste :

Code :
  1. <span class="root"><img src="images/puceRoot.gif">truc<br>
  2.     <div class="li"><a href="1.html">section1</a></div>
  3. <div class="li"><a href="2.html">section2</a></div>
  4. <div class="li"><a href="3.html">section3</a></div>
  5. <div class="li"><a href="4.html">section4</a></div>
  6. <span class="ul"><img src="images/puce.gif">machin <br>
  7.     <div class="li"><a href="g1.html">machin1</a></div>
  8.  <div class="li"><a href="g2.html">machin2</a></div>
  9. </span>
  10. </span>
  11. 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 !
  12. Je n'arrive pas a trouver comment les indenter avec NS6!
  13. Merci de votre aide ! :hello:

Reply

Marsh Posté le 16-05-2001 à 09:36:11   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed