Volver al Foro de Diseño de páginas Web

males el menu de abajo

  • Carl
  • Beginner
  • Beginner
  • Avatar de Usuario
  • Registrado: Jul 20, 2004
  • Mensajes: 50
  • Status: Offline

Nota Mayo 13th, 2010, 4:07 pm

Hola,

Im teniendo algunos problemas con algunos menús desplegables estoy trabajando. Su forma más fácil de mostrar a través del tapón de pantalla demostrar lo que quiero hacer y cómo se muestra incorrectamente en Internet Explorer y Opera. Básicamente, estoy tratando de posicionar un DIV oculto justo debajo de una barra de navegación principal. Todo funcione correctamente en Firefox, pero termino con una barra de desplazamiento en IE y Opera.

Éstos son algunos de capturas de pantalla que muestra lo que quiero decir. Tenga en cuenta que Ive ha dejado intencionadamente en los menús visibles aquí y el estilo de los submenús no se hace todavía (la película Flash gigante va a ser rehecha para que sus pequeños también). La primera imagen muestra cómo Id como los menús / submenús de su colocación.
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



Obviamente estoy haciendo algo mal aquí, pero estoy en una pérdida total. He estado mirando en esto por un tiempo y ahora estoy seguro Im que falta algo simple. Pero...mientras tanto, un poco de ayuda sería muy apreciada.

Heres mi CSS pertinentes y el diseño:
Código: [ 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. }

Código: [ 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>

Gracias por adelantado! :)
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Mayo 13th, 2010, 4:07 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Mayo 14th, 2010, 6:18 am

Hago estas muy diferente a la vuestra...Heres cómo me suelen hacer frente a este:

HTML
HTML Código: [ 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 Código: [ 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. }

Realmente espero que usted puede utilizar este...quizá te ayude.
Let's leave all our *plum* where it is and go live in the jungle ...
  • Carl
  • Beginner
  • Beginner
  • Avatar de Usuario
  • Registrado: Jul 20, 2004
  • Mensajes: 50
  • Status: Offline

Nota Mayo 14th, 2010, 10:49 am

Gracias. Elasticidad enferma que el método de la prueba.

La verdad es que mi método actual es un poco complicado. Estos menús que había empezado como algo completamente diferente. Básicamente, el menú horizontal en la parte superior del sitio fue originalmente un menú vertical por el lado izquierdo. He estado en el proceso de actualización que junto con varias otras cosas para mejorar la apariencia y el diseño general del sitio. Así que admitir que mi método puede no ser la mejor. Y esa es probablemente la razón por mí Ive metido en problemas.

De todos modos, la enfermedad probar tu sugerencia. :D
  • Carl
  • Beginner
  • Beginner
  • Avatar de Usuario
  • Registrado: Jul 20, 2004
  • Mensajes: 50
  • Status: Offline

Nota Mayo 15th, 2010, 3:07 am

Por desgracia, el método anterior no funcionó. O más exactamente, no pude hacerlo funcionar para mi diseño. ;)

Dicho esto, Ive más o menos fijos esto. :) Todo funciona muy bien salvo en IE7. Pero más en que en un segundo.

Mi solución era tomar la barra de navegación de la derecha #encabezado y la puso en su propio contenedor debajo de ella. Luego fijar la posición de #encabezado, #sitio, y este recipiente navbar nueva relación. Finalmente me puse margin-top a un valor negativo de tener que sentarse encima de #cabecera.

Mi nuevo diseño:
Código: [ 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>


Y el CSS correspondiente nuevo:
Código: [ 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, así que sí. Funciona a la perfección. PERO, pequeñito problema pequeño en IE7. Su pantalla ignorar: en el bloque. Ul li un submenú:
Attachments:
IE7.jpg

IE7



Cuando se debe mostrar como esto:
Attachments:
Firefox.jpg

Firefox



Ive intentó declarar display: block; a ser importante, puesto Ive pantalla redundantes: los bloques en todos y cada uno. Declaración submenú, y nada parece tener. ¿Alguna idea?

ETA: Ok, me fijo mi problema con IE7. Appare notly Sólo necesitaba para forzar las conexiones a realizar un ancho establecido. De lo contrario, sólo se aplica el atributo de bloque alrededor de la relación y no de auto-expansión para cubrir todo el elemento. Yo debería haber sabido eso. :oops:
  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Mayo 18th, 2010, 2:03 am

Me alegro de que tengo ordenados, IE siempre es una perra.
Let's leave all our *plum* where it is and go live in the jungle ...

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 5 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 170 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC