Retour à Forum de site web

maux menu déroulant

  • Carl
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Juil 20, 2004
  • Messages: 50
  • Status: Offline

Message Mai 13th, 2010, 4:07 pm

Bonjour,

Im ayant quelques problèmes avec certains menus déroulants Im travailler. Son plus facile à un peu montrer une capture d'écran montrant ce que je veux faire et comment il affiche de façon incorrecte dans Internet Explorer et Opera. Fondamentalement, Im essayant de positionner certaines DIV cachés directement sous une barre de navigation principale. Il fonctionne comme souhaité dans Firefox, mais je me retrouve avec une barre de défilement dans Internet Explorer et Opera.

Voici quelques captures d'écran montrant ce que je veux dire. Notez que Ive volontairement laissé les menus visible ici et le style pour les sous-menus n'est pas encore fait (le film Flash géant va être refaite afin que ses petits aussi). La première image montre comment Id comme les menus / sous-menus à être positionné.
Attachments:
Menus_01.jpg

Firefox 3.6.3 (ignore orange bar from Flash movie)


Attachments:
Menus_02.jpg

IE7/8


Attachments:
Menus_03.jpg

Opera 10.53



Évidemment Im faire quelque chose de mal ici, mais Im à une perte totale. Ive regardant ce pendant un certain temps maintenant et Im Im vous manque quelque chose de simple. Mais...Dans l'intervalle, un peu d'aide serait grandement appréciée.

Heres mon CSS pertinentes et la présentation:
Code: [ Select ]
#header, #site {
  background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  overflow: auto;
  width: 850px;
}

#footer {
  background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  width: 850px;
  height: 41px;
}

#navbar {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px;
  background: url(images/bg_header.jpg) no-repeat right top;
  padding-top: 0px; padding-bottom: 0px;
  margin-left: auto; margin-right: auto;
  overflow: auto;
  width: 830px; height: 154px;
  z-index: 30;
}

#menu-navbar {
  border: 1px solid #000000;
  padding: 0px;
  margin-top: 135px; margin-left: 10px;
  text-align: left;
  height: 16px;
  float: left;
}

#menu-navbar div div
{
  position: absolute;
  /*visibility: hidden;*/
  margin: 0;
  padding: 0;
}

.menu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  display: block;
}

.menu ul {
  border: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.menu ul li a {
  font-weight: bold; text-decoration: none; font-variant: small-caps;
  padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  cursor: pointer;
  height: 16px;
  display: block;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  background: url(images/bg_menu.png) repeat-x left top;
  color: #FFFFFF;
}

.menu ul li a:hover, .menu ul li#current a {
  background: url(images/bg_menu_hover.png) repeat-x left top;
  text-decoration: none;
}

.submenu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  display: block;
}

.submenu ul {
  border: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.submenu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.submenu ul li a {
  font-weight: bold; text-decoration: none; font-variant: normal;
  padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  cursor: pointer;
  height: 16px;
  position: relative;
  display: block;
}

.submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  background: url(images/bg_menu.png) repeat-x left top;
  color: #FFFFFF;
}

.submenu ul li a:hover {
  background: url(images/bg_menu_hover.png) repeat-x left top;
  text-decoration: none;
}
  1. #header, #site {
  2.   background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  3.   overflow: auto;
  4.   width: 850px;
  5. }
  7. #footer {
  8.   background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  9.   width: 850px;
  10.   height: 41px;
  11. }
  13. #navbar {
  14.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px;
  15.   background: url(images/bg_header.jpg) no-repeat right top;
  16.   padding-top: 0px; padding-bottom: 0px;
  17.   margin-left: auto; margin-right: auto;
  18.   overflow: auto;
  19.   width: 830px; height: 154px;
  20.   z-index: 30;
  21. }
  23. #menu-navbar {
  24.   border: 1px solid #000000;
  25.   padding: 0px;
  26.   margin-top: 135px; margin-left: 10px;
  27.   text-align: left;
  28.   height: 16px;
  29.   float: left;
  30. }
  32. #menu-navbar div div
  33. {
  34.   position: absolute;
  35.   /*visibility: hidden;*/
  36.   margin: 0;
  37.   padding: 0;
  38. }
  40. .menu {
  41.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  42.   display: block;
  43. }
  45. .menu ul {
  46.   border: none;
  47.   list-style-type: none;
  48.   margin: 0px;
  49.   padding: 0px;
  50. }
  52. .menu li {
  53.   margin: 0px;
  54.   padding: 0px;
  55.   float: left;
  56. }
  58. .menu ul li a {
  59.   font-weight: bold; text-decoration: none; font-variant: small-caps;
  60.   padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  61.   cursor: pointer;
  62.   height: 16px;
  63.   display: block;
  64. }
  66. .menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  67.   background: url(images/bg_menu.png) repeat-x left top;
  68.   color: #FFFFFF;
  69. }
  71. .menu ul li a:hover, .menu ul li#current a {
  72.   background: url(images/bg_menu_hover.png) repeat-x left top;
  73.   text-decoration: none;
  74. }
  76. .submenu {
  77.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  78.   display: block;
  79. }
  81. .submenu ul {
  82.   border: none;
  83.   list-style-type: none;
  84.   margin: 0px;
  85.   padding: 0px;
  86. }
  88. .submenu li {
  89.   margin: 0px;
  90.   padding: 0px;
  91.   float: left;
  92. }
  94. .submenu ul li a {
  95.   font-weight: bold; text-decoration: none; font-variant: normal;
  96.   padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  97.   cursor: pointer;
  98.   height: 16px;
  99.   position: relative;
  100.   display: block;
  101. }
  103. .submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  104.   background: url(images/bg_menu.png) repeat-x left top;
  105.   color: #FFFFFF;
  106. }
  108. .submenu ul li a:hover {
  109.   background: url(images/bg_menu_hover.png) repeat-x left top;
  110.   text-decoration: none;
  111. }

Code: [ Select ]
<div id="header">
  <div id="navbar">
    <div id="menu-navbar">
      <div class="menu">
        <ul>
          <li>
            <a href="#">Menu Item 1</a>
            <div id="submenu_01" class="submenu">
              <ul>
                <li><a href="">Submenu Item 1</li>
                <li><a href="">Submenu Item 2</li>
                <li><a href="">Submenu Item 3</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#">Menu Item 2</a>
            <div id="submenu_02" class="submenu">
              <ul>
                <li><a href="">Submenu Item 1</li>
                <li><a href="">Submenu Item 2</li>
                <li><a href="">Submenu Item 3</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="site">
  Stuff
</div>

<div id="footer">
  More stuff
</div>
  1. <div id="header">
  2.   <div id="navbar">
  3.     <div id="menu-navbar">
  4.       <div class="menu">
  5.         <ul>
  6.           <li>
  7.             <a href="#">Menu Item 1</a>
  8.             <div id="submenu_01" class="submenu">
  9.               <ul>
  10.                 <li><a href="">Submenu Item 1</li>
  11.                 <li><a href="">Submenu Item 2</li>
  12.                 <li><a href="">Submenu Item 3</li>
  13.               </ul>
  14.             </div>
  15.           </li>
  16.           <li>
  17.             <a href="#">Menu Item 2</a>
  18.             <div id="submenu_02" class="submenu">
  19.               <ul>
  20.                 <li><a href="">Submenu Item 1</li>
  21.                 <li><a href="">Submenu Item 2</li>
  22.                 <li><a href="">Submenu Item 3</li>
  23.               </ul>
  24.             </div>
  25.           </li>
  26.         </ul>
  27.       </div>
  28.     </div>
  29.   </div>
  30. </div>
  32. <div id="site">
  33.   Stuff
  34. </div>
  36. <div id="footer">
  37.   More stuff
  38. </div>

Merci d'avance! :)
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 13th, 2010, 4:07 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Mar 12, 2007
  • Messages: 6228
  • Loc: South-Africa
  • Status: Offline

Message Mai 14th, 2010, 6:18 am

Je fais ces tout à fait différemment de vous...Heres comment j'ai l'habitude de lutter contre celle-ci:

HTML
HTML Code: [ Select ]
<div id='menu'>
 <ul>
  <li><a href='#'>News</a>
   <ul>
    <li><a href='#'>Article One</a></li>
    <li><a href='#'>Article Two</a></li>
   </ul>
  </li>
  <li><a href='#'>Something</a></li>
 </ul>
</div>
  1. <div id='menu'>
  2.  <ul>
  3.   <li><a href='#'>News</a>
  4.    <ul>
  5.     <li><a href='#'>Article One</a></li>
  6.     <li><a href='#'>Article Two</a></li>
  7.    </ul>
  8.   </li>
  9.   <li><a href='#'>Something</a></li>
  10.  </ul>
  11. </div>


CSS
CSS Code: [ Select ]
div#menu{
width:980px;
height:20px;
}
div#menu ul li{
list-style-type:none;
height:20px;
float:left;
vertical-align:top;
margin:0px 11px 0px 0px;
position:relative;
background-color:#000000;
}
div#menu ul li a{
display:block;
font-size:9px;
color:#ffffff;
float:left;
text-decoration:none;
width:100%;
height:16px;
margin:2px 5px;
text-align:center;
}
div#menu ul li a:hover{
background-color:#343434;
}
div#menu ul li ul{
display:none;
position:absolute;
top:20px;
left:0px;
}
div#menu ul li:hover ul{
display:block;
width:120px;
background-color:#000000;
}
div#menu ul li:hover ul li{
width:111px;
background-color:#000000;
text-align:left;
}
div#menu ul li:hover ul li a{
background-color:#343434;
padding:2px 0px 0px 0px;
height:14px;
}
  1. div#menu{
  2. width:980px;
  3. height:20px;
  4. }
  5. div#menu ul li{
  6. list-style-type:none;
  7. height:20px;
  8. float:left;
  9. vertical-align:top;
  10. margin:0px 11px 0px 0px;
  11. position:relative;
  12. background-color:#000000;
  13. }
  14. div#menu ul li a{
  15. display:block;
  16. font-size:9px;
  17. color:#ffffff;
  18. float:left;
  19. text-decoration:none;
  20. width:100%;
  21. height:16px;
  22. margin:2px 5px;
  23. text-align:center;
  24. }
  25. div#menu ul li a:hover{
  26. background-color:#343434;
  27. }
  28. div#menu ul li ul{
  29. display:none;
  30. position:absolute;
  31. top:20px;
  32. left:0px;
  33. }
  34. div#menu ul li:hover ul{
  35. display:block;
  36. width:120px;
  37. background-color:#000000;
  38. }
  39. div#menu ul li:hover ul li{
  40. width:111px;
  41. background-color:#000000;
  42. text-align:left;
  43. }
  44. div#menu ul li:hover ul li a{
  45. background-color:#343434;
  46. padding:2px 0px 0px 0px;
  47. height:14px;
  48. }

J'espère vraiment que vous pouvez utiliser cette...Peut-être vous aider.
Let's leave all our *plum* where it is and go live in the jungle ...
  • Carl
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Juil 20, 2004
  • Messages: 50
  • Status: Offline

Message Mai 14th, 2010, 10:49 am

Merci. Ill donner à cette méthode un essai.

La vérité, c'est ma méthode actuelle est un peu alambiquée. Ces menus ont commencé comme quelque chose de complètement différent. Fondamentalement, le menu horizontal en haut du site était à l'origine un menu vertical sur le côté gauche. Ive été dans le processus de sa mise à jour ainsi que plusieurs autres choses pour améliorer l'apparence et la disposition générale du site. Donc, je reconnais que ma méthode ne peut pas être le meilleur. Et thats probablement pourquoi moi Ive eu des problèmes.

Quoi qu'il en soit, Je vais essayer votre suggestion. :D
  • Carl
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Juil 20, 2004
  • Messages: 50
  • Status: Offline

Message Mai 15th, 2010, 3:07 am

Malheureusement, la méthode ci-dessus n'a pas fonctionné. Ou plus exactement, je ne pouvais pas le faire fonctionner pour ma mise en page. ;)

Cela dit, Ive plus ou moins fixes cela. :) Tout fonctionne bien sauf dans IE7. Mais plus sur que dans un sec.

Ma solution a été de prendre le droit de navbar #en-tête et le mettre dans son propre conteneur dessous. Je suis ensuite la position de #en-tête, #site, et ce conteneur navbar nouveau rapport. Enfin j'ai mis margin-top à une valeur négative pour le faire asseoir sur le dessus de #en-tête.

Ma nouvelle mise en page:
Code: [ Select ]
<div id="header" class="center">
Header info
</div>

<div id="navbar" class="center">
  <div id="menu">
    <div class="menu">
      <ul>
        <li>
          <a href="#">Menu Item 1</a>
          <div id="submenu_01" class="submenu">
            <ul>
              <li><a href="">Submenu Item 1</li>
              <li><a href="">Submenu Item 2</li>
              <li><a href="">Submenu Item 3</li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">Menu Item 2</a>
          <div id="submenu_02" class="submenu">
              <ul>
              <li><a href="">Submenu Item 1</li>
              <li><a href="">Submenu Item 2</li>
              <li><a href="">Submenu Item 3</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="site" class="center">
 Stuff
</div>

<div id="footer" class="center">
 More stuff
</div>

<div id="site-info" class="center">

</div>
  1. <div id="header" class="center">
  2. Header info
  3. </div>
  5. <div id="navbar" class="center">
  6.   <div id="menu">
  7.     <div class="menu">
  8.       <ul>
  9.         <li>
  10.           <a href="#">Menu Item 1</a>
  11.           <div id="submenu_01" class="submenu">
  12.             <ul>
  13.               <li><a href="">Submenu Item 1</li>
  14.               <li><a href="">Submenu Item 2</li>
  15.               <li><a href="">Submenu Item 3</li>
  16.             </ul>
  17.           </div>
  18.         </li>
  19.         <li>
  20.           <a href="#">Menu Item 2</a>
  21.           <div id="submenu_02" class="submenu">
  22.               <ul>
  23.               <li><a href="">Submenu Item 1</li>
  24.               <li><a href="">Submenu Item 2</li>
  25.               <li><a href="">Submenu Item 3</li>
  26.             </ul>
  27.           </div>
  28.         </li>
  29.       </ul>
  30.     </div>
  31.   </div>
  32. </div>
  34. <div id="site" class="center">
  35.  Stuff
  36. </div>
  38. <div id="footer" class="center">
  39.  More stuff
  40. </div>
  42. <div id="site-info" class="center">
  44. </div>


Et le CSS nouvelle correspondante:
Code: [ Select ]
div#header, div#site {
  background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  overflow: auto;
}

div#header, div#site, div#footer, div#site-info {
  width: 850px;
  position: relative;
  z-index: 1;
}

div#navbar {
  position: relative;
  z-index: 2;
}

div#footer {
  background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  height: 41px;
}

div#navbar, div#site-info {
  width: 830px;
}

div#menu {
  border-left: 1px solid #000000; border-right: 1px solid #000000;
  padding: 0px;
  margin-top: -18px; margin-left: 172px;
  text-align: left;
  height: 16px;
  float: left;
}

div#menu div div
{
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  z-index: 30;
}

.menu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  display: block;
}

.menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.menu ul li a {
  font-weight: bold; text-decoration: none; font-variant: small-caps;
  padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  cursor: pointer;
  height: 16px;
  display: block;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  background: url(images/bg_menu.png) repeat-x left top;
  color: #FFFFFF;
}

.menu ul li a:hover, .menu ul li#current a {
  background: url(images/bg_menu_hover.png) repeat-x left top;
  text-decoration: none;
}

.submenu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  border: 1px solid #000000;
  display: block;
}

.submenu ul {
  border: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.submenu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.submenu ul li a {
  font-weight: bold; text-decoration: none; font-variant: normal;
  padding-left: 1.5em; padding-right: 1em; padding-top: 3px; padding-bottom: 3px;
  cursor: pointer;
  height: 16px;;
  display: block;
}

.submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  background: url(images/bg_submenu.png) repeat-x left top;
  color: #222222;
}

.submenu ul li a:hover {
  background: url(images/bg_submenu_hover.png) repeat-x left top;
  color: #e2e7eb;
  text-decoration: none;
}

.center {
  margin-left: auto; margin-right: auto;
}
  1. div#header, div#site {
  2.   background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  3.   overflow: auto;
  4. }
  6. div#header, div#site, div#footer, div#site-info {
  7.   width: 850px;
  8.   position: relative;
  9.   z-index: 1;
  10. }
  12. div#navbar {
  13.   position: relative;
  14.   z-index: 2;
  15. }
  17. div#footer {
  18.   background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  19.   height: 41px;
  20. }
  22. div#navbar, div#site-info {
  23.   width: 830px;
  24. }
  26. div#menu {
  27.   border-left: 1px solid #000000; border-right: 1px solid #000000;
  28.   padding: 0px;
  29.   margin-top: -18px; margin-left: 172px;
  30.   text-align: left;
  31.   height: 16px;
  32.   float: left;
  33. }
  35. div#menu div div
  36. {
  37.   position: absolute;
  38.   visibility: hidden;
  39.   margin: 0;
  40.   padding: 0;
  41.   z-index: 30;
  42. }
  44. .menu {
  45.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  46.   display: block;
  47. }
  49. .menu ul {
  50.   list-style-type: none;
  51.   margin: 0px;
  52.   padding: 0px;
  53. }
  55. .menu li {
  56.   margin: 0px;
  57.   padding: 0px;
  58.   float: left;
  59. }
  61. .menu ul li a {
  62.   font-weight: bold; text-decoration: none; font-variant: small-caps;
  63.   padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  64.   cursor: pointer;
  65.   height: 16px;
  66.   display: block;
  67. }
  69. .menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  70.   background: url(images/bg_menu.png) repeat-x left top;
  71.   color: #FFFFFF;
  72. }
  74. .menu ul li a:hover, .menu ul li#current a {
  75.   background: url(images/bg_menu_hover.png) repeat-x left top;
  76.   text-decoration: none;
  77. }
  79. .submenu {
  80.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  81.   border: 1px solid #000000;
  82.   display: block;
  83. }
  85. .submenu ul {
  86.   border: none;
  87.   list-style-type: none;
  88.   margin: 0px;
  89.   padding: 0px;
  90. }
  92. .submenu li {
  93.   margin: 0px;
  94.   padding: 0px;
  95.   float: left;
  96. }
  98. .submenu ul li a {
  99.   font-weight: bold; text-decoration: none; font-variant: normal;
  100.   padding-left: 1.5em; padding-right: 1em; padding-top: 3px; padding-bottom: 3px;
  101.   cursor: pointer;
  102.   height: 16px;;
  103.   display: block;
  104. }
  106. .submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  107.   background: url(images/bg_submenu.png) repeat-x left top;
  108.   color: #222222;
  109. }
  111. .submenu ul li a:hover {
  112.   background: url(images/bg_submenu_hover.png) repeat-x left top;
  113.   color: #e2e7eb;
  114.   text-decoration: none;
  115. }
  117. .center {
  118.   margin-left: auto; margin-right: auto;
  119. }


Ok, alors oui. Fonctionne très bien. MAIS, le problème mignons dans IE7. Son écran ignorant: bloc. Menu ul li a:
Attachments:
IE7.jpg

IE7



Quand il devrait afficher comme ceci:
Attachments:
Firefox.jpg

Firefox



Ive a essayé déclarant display: block; d'être important, Ive placé affichage redondants: les blocs dans chaque intérieur. Déclaration sous-menu, et rien ne semble prendre. Des idées?

ETA: Ok, je fixe mon problème avec IE7. Appare notly J'avais juste besoin de forcer les liens à une largeur définie. Sinon, elle ne s'applique qu'à l'attribut bloc autour du lien et de ne pas auto-expansion pour combler tout l'élément. J'aurais dû le savoir. :oops:
  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Mar 12, 2007
  • Messages: 6228
  • Loc: South-Africa
  • Status: Offline

Message Mai 18th, 2010, 2:03 am

Glad You Got It triés, IE est toujours une chienne.
Let's leave all our *plum* where it is and go live in the jungle ...

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 69 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC