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

Zapatec CSS menú desplegable

  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Agosto 5th, 2009, 11:03 am

Saludos,

Estoy tratando de agregar un menú desplegable para mi sitio web. Parece estar funcionando correctamente en Firefox.

Sin embargo, Internet Explorer parece estar dando el menú de algunos problemas.

Me han roto el código en un simple ejemplo de lo que está haciendo:

http://www.green-watch.org/test4.cfm

Quiero que el menú de flotar por encima de la barra de búsqueda como lo hace en Firefox.

Aquí está el código para el menú:

HTML Código: [ Select ]
 
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1. 0 Transitional / / EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<script type="text/javascript" src="http://www.green-watch.org/zapatec/utils/zapatec.js"> </ script>
<script type = "text / javascript" src = "http://www.green-watch.org/zapatec/zpmenu/src/zpmenu. js "> </ script>
 
<style>
 
cuerpo
(
Antecedentes: #Url (img/jpg/bg1_2. jpg) repeat-x 0 0;
)
 
#envolver
(
margin: auto;
text-align: left;
width: 100%;
position: relative;
)
 
#encabezado, #búsqueda, #cabecera de baja, #menú, #cuerpo, #Pie de página
(
float: none;
margin: auto;
)
 
#cabecera
(
background: url (img / gif / bg_header. gif) repeat-x 0 0;
height: 121px; width: 100%;
position: relative;
background-color: #064A04;
)
 
#cabecera. contenido
(
width: 795px;
margin: auto;
)
 
#cabecera. myHeaderBanner
(
width: 590px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 80px;
)
 
#barra de búsqueda
(
Antecedentes: #E7E2CE;
width: 100%;
float: none;
margin: auto;
height: 40px;
)
 
#búsqueda
(
background: url (img / gif / bg_search. gif) no-repeat abajo a la derecha;
height: 35px; width: 795px;
position: relative;
border: 1px solid #e7e2ce;
)
 
. flotador
(
float: left;
)
 
</ style>
 
</ head>
 
<body>
 
<div id="wrap">
 
<div id="header" class="float">
 
<div class="content">
 
class="myHeaderBanner"> <div </ div>
 
<ul id="menu-items">
 
<li> <a href = " #"> empresas </ a>
 
<ul>
 
<li> Menú 1. 0
 
<ul>
 
<li> Submenu 1.0 </ li>
<li> Submenu 2.0 </ li>
<li> Submenú 3. 0 </ li>
 
</ ul>
 
</ li>
 
<li> Menu 2.0 </ li>
<li> Menu 3.0 </ li>
<li> Menú 4. 0 </ li>
 
</ ul>
 
</ li>
 
</ ul>
 
<script type="text/javascript">
MyMenu var = Zapatec nuevo. Menú
((
tema: "barblue",
Fuente: "artículos de menú"
));
</ script>
 
</ div>
 
</ div>
 
<div id="searchBar" class="float">
 
<div id="search" class="float">
 
 
 
</ div>
 
</ div>
 
</ div>
 
</ body>
 
</ html>
 
 
  1.  
  2. <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1. 0 Transitional / / EN "
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.  
  6. <head>
  7.  
  8. <script type="text/javascript" src="http://www.green-watch.org/zapatec/utils/zapatec.js"> </ script>
  9. <script type = "text / javascript" src = "http://www.green-watch.org/zapatec/zpmenu/src/zpmenu. js "> </ script>
  10.  
  11. <style>
  12.  
  13. cuerpo
  14. (
  15. Antecedentes: #Url (img/jpg/bg1_2. jpg) repeat-x 0 0;
  16. )
  17.  
  18. #envolver
  19. (
  20. margin: auto;
  21. text-align: left;
  22. width: 100%;
  23. position: relative;
  24. )
  25.  
  26. #encabezado, #búsqueda, #cabecera de baja, #menú, #cuerpo, #Pie de página
  27. (
  28. float: none;
  29. margin: auto;
  30. )
  31.  
  32. #cabecera
  33. (
  34. background: url (img / gif / bg_header. gif) repeat-x 0 0;
  35. height: 121px; width: 100%;
  36. position: relative;
  37. background-color: #064A04;
  38. )
  39.  
  40. #cabecera. contenido
  41. (
  42. width: 795px;
  43. margin: auto;
  44. )
  45.  
  46. #cabecera. myHeaderBanner
  47. (
  48. width: 590px;
  49. margin: 0px 0px 0px 0px;
  50. padding: 0px 0px 0px 0px;
  51. height: 80px;
  52. )
  53.  
  54. #barra de búsqueda
  55. (
  56. Antecedentes: #E7E2CE;
  57. width: 100%;
  58. float: none;
  59. margin: auto;
  60. height: 40px;
  61. )
  62.  
  63. #búsqueda
  64. (
  65. background: url (img / gif / bg_search. gif) no-repeat abajo a la derecha;
  66. height: 35px; width: 795px;
  67. position: relative;
  68. border: 1px solid #e7e2ce;
  69. )
  70.  
  71. . flotador
  72. (
  73. float: left;
  74. )
  75.  
  76. </ style>
  77.  
  78. </ head>
  79.  
  80. <body>
  81.  
  82. <div id="wrap">
  83.  
  84. <div id="header" class="float">
  85.  
  86. <div class="content">
  87.  
  88. class="myHeaderBanner"> <div </ div>
  89.  
  90. <ul id="menu-items">
  91.  
  92. <li> <a href = " #"> empresas </ a>
  93.  
  94. <ul>
  95.  
  96. <li> Menú 1. 0
  97.  
  98. <ul>
  99.  
  100. <li> Submenu 1.0 </ li>
  101. <li> Submenu 2.0 </ li>
  102. <li> Submenú 3. 0 </ li>
  103.  
  104. </ ul>
  105.  
  106. </ li>
  107.  
  108. <li> Menu 2.0 </ li>
  109. <li> Menu 3.0 </ li>
  110. <li> Menú 4. 0 </ li>
  111.  
  112. </ ul>
  113.  
  114. </ li>
  115.  
  116. </ ul>
  117.  
  118. <script type="text/javascript">
  119. MyMenu var = Zapatec nuevo. Menú
  120. ((
  121. tema: "barblue",
  122. Fuente: "artículos de menú"
  123. ));
  124. </ script>
  125.  
  126. </ div>
  127.  
  128. </ div>
  129.  
  130. <div id="searchBar" class="float">
  131.  
  132. <div id="search" class="float">
  133.  
  134.  
  135.  
  136. </ div>
  137.  
  138. </ div>
  139.  
  140. </ div>
  141.  
  142. </ body>
  143.  
  144. </ html>
  145.  
  146.  


Gracias de antemano por cualquier sugerencia sobre cómo solucionar este problema.

Atentamente,
Travis Walters
twalters84 @ hotmail & #46, COM
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 5th, 2009, 11:03 am

  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8212
  • Loc: USA
  • Status: Offline

Nota Agosto 5th, 2009, 4:51 pm

¿Realmente necesitamos un multi-nivel menú desplegable?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Agosto 5th, 2009, 6:19 pm

Sí, hago una necesidad.

Este sitio web del medio ambiente tiene un montón de características y mucho más se va a aplicar antes del inicio del próximo año.
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8212
  • Loc: USA
  • Status: Offline

Nota Agosto 5th, 2009, 6:45 pm

Echa un vistazo a esto ...que tiene múltiples niveles CSS menús desplegables.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 5th, 2009, 11:49 pm

sólo un par de días me hace esta pregunta y escribió un pedazo de código css.

http://www.ozzu.com/website-design-forum/vertical-navigation-flyout-deep-css-t99314.html
Use your words like arrows to shoot toward your goal.

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 67 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