Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1490 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Problèmes pour formatter un menu sous IE (suckerfish)

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Problèmes pour formatter un menu sous IE (suckerfish)

n°1073306
Jubijub
Parce que je le VD bien
Posté le 05-05-2005 à 20:40:14  profilanswer
 

http://www.jubijub.com/perso/julien/
 
sous FF il marche nickel, sous IE g un déclage (le menu CV est celui avec le dropdown)...
 
Je me suis basé sur le tuto Suckerfish modifié par HTMLDog ...
 
si vous avez une idée de ce qui déconne...
 
je voudrais éviter le décallage, meme si il est pas dramatique


Message édité par Jubijub le 06-05-2005 à 14:02:51

---------------
Jubi Photos : Flickr - 500px
mood
Publicité
Posté le 05-05-2005 à 20:40:14  profilanswer
 

n°1073314
masklinn
í dag viðrar vel til loftárása
Posté le 05-05-2005 à 20:52:18  profilanswer
 

Essaie un position: relative sur tes "li"


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1073867
Jubijub
Parce que je le VD bien
Posté le 06-05-2005 à 13:53:30  profilanswer
 

==> marche pas
 
j'ai cherché un peu : c le text-align : center qui le fout dedans...
 
je suis reparti du code brut du tuto, en modifiant par étapes et en vérifiant sous IE 6.0 ...
tout va bien jusqu'au text align...pourtant dans mon essai j'ai mis tt les LI de premier niveau (les titres des menus quoi) avec une class first, et j'applique ce truc qu'à la classe...et meme en mettant pour les styles "en dessous" un text-align: left; ca change rien...


Message édité par Jubijub le 06-05-2005 à 14:01:52

---------------
Jubi Photos : Flickr - 500px
n°1073868
Jubijub
Parce que je le VD bien
Posté le 06-05-2005 à 13:54:16  profilanswer
 

edit :  
 
j'ai trouvé : il suffit de mettre le style sur le <a> ... ct plutot évident en plus :/
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html>
  5. <head>
  6. <title>Suckerfish Dropdowns - One Level Bones</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <style type="text/css">
  10. body {
  11. font-family: arial, helvetica, serif;
  12. }
  14. #nav, #nav ul { /* all lists */
  15. padding: 0;
  16. margin: 0;
  17. list-style: none;
  18. line-height: 1;
  19. }
  21. #nav a {
  22. display: block;
  23. width: 250px;
  24.    
  25. }
  27. .first {
  28.     background-color: #80E3F3;
  29. }
  30. a.first {
  31.     text-align: center;
  32. }
  34. #nav li { /* all list items */
  35. float: left;
  36. width: 250px; /* width needed or else Opera goes nuts */
  37. }
  39. #nav li ul { /* second-level lists */
  40. position: absolute;
  41. background: orange;
  42. width: 250px;
  43. left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  44. }
  46. #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
  47. left: auto;
  48. }
  50. #content {
  51. clear: left;
  52. color: #589BA6;
  53. }
  55. #conteneur {
  56.     position: absolute;
  57.     width: 750px;
  58.     left: 50%;
  59.     margin-left: -375px;
  60.     background-color: #F2F2F2;
  61.     }
  62.    
  64. </style>
  66. <script type="text/javascript"><!--//--><![CDATA[//><!--
  68. sfHover = function() {
  69. var sfEls = document.getElementById("nav" ).getElementsByTagName("LI" );
  70. for (var i=0; i<sfEls.length; i++) {
  71.  sfEls[i].onmouseover=function() {
  72.   this.className+=" sfhover";
  73.  }
  74.  sfEls[i].onmouseout=function() {
  75.   this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
  76.  }
  77. }
  78. }
  79. if (window.attachEvent) window.attachEvent("onload", sfHover);
  81. //--><!]]></script>
  84. </head>
  86. <body>
  87. <div id="conteneur">
  88. <h1>PERCIFORMES! (1)</h1>
  89. <p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>
  91. <ul id="nav">
  93. <li class="first"><a class="first" href="#">Percoidei</a>
  94.  <ul>
  95.   <li><a href="#">Remoras</a></li>
  97.   <li><a href="#">Tilefishes</a></li>
  98.   <li><a href="#">Bluefishes</a></li>
  99.   <li><a href="#">Tigerfishes</a></li>
  101.  </ul>
  102. </li>
  104. <li class="first"><a class="first" href="#">Anabantoidei</a>
  106.  <ul>
  107.   <li><a href="#">Climbing perches</a></li>
  108.   <li><a href="#">Labyrinthfishes</a></li>
  109.   <li><a href="#">Kissing gouramis</a></li>
  110.   <li><a href="#">Pike-heads</a></li>
  111.   <li><a href="#">Giant gouramis</a></li>
  113.  </ul>
  114. </li>
  116. <li class="first"><a class="first" href="#">Gobioidei</a>
  117.  <ul>
  118.   <li><a href="#">Burrowing gobies</a></li>
  119.   <li><a href="#">Dartfishes</a></li>
  121.   <li><a href="#">Eellike gobies</a></li>
  122.   <li><a href="#">Gobies</a></li>
  123.   <li><a href="#">Loach gobies</a></li>
  124.   <li><a href="#">Odontobutidae</a></li>
  125.   <li><a href="#">Sandfishes</a></li>
  126.   <li><a href="#">Schindleriidae</a></li>
  128.   <li><a href="#">Sleepers</a></li>
  129.   <li><a href="#">Xenisthmidae</a></li>
  130.  </ul>
  131. </li>
  133. </ul>
  135. <div id="content">
  136. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
  138. <p><a href="/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net">Dan Webb</a>.</p>
  139. </div>
  140. </div>
  142. </body>
  144. </html>


Message édité par Jubijub le 06-05-2005 à 14:17:01

---------------
Jubi Photos : Flickr - 500px

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Problèmes pour formatter un menu sous IE (suckerfish)

 

Sujets relatifs
[CSS / XHTML] Bug sous Firefox - OpéraProblèmes de variables
menu déroulant et ouverture de popupDevis pour code CSS et PHP .
Intégrer un tableau dans un CSSmise en page CSS sous IE
[WiP PHP/CSS] 3 Mars: Problème de marge CSS[CSS - Javascript] Post-It qui s'affiche onMouseOver....
[Résolu] Correction Feuille de Style CSS Firefox > IE[CSS] 'overflow' et firefox 1.0.3 = problème
Plus de sujets relatifs à : [CSS] Problèmes pour formatter un menu sous IE (suckerfish)

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.084 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR