Foros del Web » Creando para Internet » CSS »

Hola, Problema con menu desplegable y contenido (CSS)

Estas en el tema de Hola, Problema con menu desplegable y contenido (CSS) en el foro de CSS en Foros del Web. Hola a todos, me presento. Mi nombre es Armando y soy nuevo en el foro. Me ha intersado mucho el diseño web y aun mas ...
  #1 (permalink)  
Antiguo 19/08/2008, 17:45
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Hola, Problema con menu desplegable y contenido (CSS)

Hola a todos, me presento. Mi nombre es Armando y soy nuevo en el foro. Me ha intersado mucho el diseño web y aun mas del CSS, claro que recien estoy empezando y me he topado con un problema:

Tengo las siguientes secciones:
encabezado (banner principal),
navegacion (para los menus),
propag (al lado izquierdo para los enlaces a otras webs),
areatexto (q vendria a ser el contenido)
y un pie.
Todas estan posicionadas con Div. El problema viene q al desplegarse los menus del #navegacion estos se ven por debajo de una tabla q he colocado en el #areatexto (osea el Contenido) lo que dificulta la selección de los sub menus.
OJO: Pero esto solo ocurre en el I.E. porque lo he probado en Mozila y sale todo bien.

Aqui dejo la imagen de como se aprecia al desplegar los submenus.


Por favor si alguien me puede ayudar.
Gracias ! ! !
  #2 (permalink)  
Antiguo 19/08/2008, 18:33
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Lo olvidaba: Esta es la hoja de estilo de la web:

body{
background-color:#000066;
}

#wrapper{
background-color:#1086B9;
width:800px;
margin-right:auto;
margin-left:auto;
}

#encabezado{
position:relative;
}

#navegacion{
background-color:#1086B9;
width:800;
height:30px;
background-image:url(relleno4.jpg);
background-repeat:no-repeat;
background-position:top left;
}

**********LUEGO VIENEN TODO EL CODIGO PARA LOS MENUS************
.preload2 {background: url(imgmenu/button4a.gif);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(imgmenu/fd_menu.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#333; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 10px 0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(imgmenu/button4a.gif);}
.menu2 li a.top_link:hover span { background:url(imgmenu/button4a.gif)}
.menu2 li a.top_link:hover span.down { background:url(imgmenu/button4a.gif)}

.menu2 li:hover > a.top_link {color:#fff; background:url(imgmenu/button4a.gif);}
.menu2 li:hover > a.top_link span {background:url(imgmenu/button4a.gif);}
.menu2 li:hover > a.top_link span.down {background:url(imgmenu/button4a.gif);}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:6px; top:25px; background: #fff; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #005FB9; border-left:1px solid #005FB9; border-right:1px solid #005FB9; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(imgmenu/vineta_menu.gif) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:#E5FAFC; color:#005FB9;}
.menu2 :hover ul.sub li a.fly:hover {background:#E5FAFC url(imgmenu/vineta_menu.gif) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:#E5FAFC}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;}
******************AQUI TERMINAN LOS MENUS******************

#enlaces{
float:left;
width:200px;
height:100%;
background-color:#339999;
}


#areatexto{
padding-top:0px;
padding-right:5px;
padding-bottom:5px;
padding-left:0px;
margin-left:200px;
position:relative;
height:800px;
}

address{
text-align:center;
font-size:90%;
font-style:normal;
letter-spacing:1.5px;
border-top:5px solid #000099;
padding-top:10px;
}
  #3 (permalink)  
Antiguo 21/08/2008, 09:52
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Porfa, alguien q me pueda ayudar.
  #4 (permalink)  
Antiguo 21/08/2008, 09:56
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

probá con esto:

Cita:
#navegacion{
background-color:#1086B9;
width:800;
height:30px;
background-image:url(relleno4.jpg);
background-repeat:no-repeat;
background-position:top left;
z-index:999;
}
  #5 (permalink)  
Antiguo 25/08/2008, 16:30
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Hola, buscando en la web, lei sobre el z-indez, lo probe pero el problema no se solucionó. Incluso probé lo que me dijiste "DragonX", pero tampoco resultó.

Help me ! ! !
  #6 (permalink)  
Antiguo 25/08/2008, 16:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

¿Puedes poner exactamente el trozo de código html y css que comprende el menúa y la tabla que lo tapa?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 25/08/2008, 16:54
 
Fecha de Ingreso: mayo-2007
Mensajes: 49
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Pon algo mas de codigo en especial el html, ya tambien podria ser mal posicionamiento de las etiquetas div, un comentario personal, identa tu codigo CSS para que nos facilites la lectura a algunos, asi te podriamos ayudar con menos esfuerzo ^___^
  #8 (permalink)  
Antiguo 25/08/2008, 16:59
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Cita:
Iniciado por Armand19 Ver Mensaje
Hola, buscando en la web, lei sobre el z-indez..
Help me ! ! !
Mira se que con esto deberia de salir:
Código:
z-index:3;
o un valor que alterne para que salga encima.... sino puedes ponerle al textarea visible:transparent, si mal no recuerdo, y hace que lo demas salga arriba de el.
  #9 (permalink)  
Antiguo 25/08/2008, 18:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Bueno, por las respuestas anteriores te diré que si no pones posición absoluta o relativa, olvídate de que funcione el z-index.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 26/08/2008, 00:26
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Hola nuevamente, wuauu la verdad gracias por sus intenciones de ayudar, realmente estoy sorprendido; como les dije al inicio soy nuevo en el css, pero me ha fascinado y quiero comprenderlo mucho mas.

Bueno he cambiado un poco la estructura de la web y ahora el problema es casi el mismo, al desplegar el menu queda detrás del TextArea cuando lo pruebo en Mozilla FireFox. En el Internet explorer ya sale bien. Me piden el codigo y aqui se los envio, trataré de ser lo mas explicativo posible:

Básicamente la maquetación de mi web es la siguiente:
Código:
<div id="page_margins">
  <div id="page">
<div id="header">Cabecera </div>
<div id="nav>nevagacion (menus)</div>
<div id="main"><!--Areatexto-->
<div id="col1">.....Columna izquierda.....</div> <div id="col2">....columna derecha....... </div> <div id="col3">.....Columna central........</div>
</div>
</div> </div>

Ahora ésta es la codificación de los menus en el <div id="nav">, q la verdad no creo q aqui esté el problema. Pues solo son las UL para armar el menu desplegable.
Código:
          <table width="600px" border="0" align="right">
        <tr>
          <td>
          <!--..............Inicio del menu.........-->
          <ul class="menu2"><img src="imgmenu/menu_izq.png" align="left" /><img src="imgmenu/menu_der.png"  align="right"/>
	<li class="top"><a href="#" id="telmex" class="top_link"><span class="down">Menu</span>
	<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
	</li>
	<li class="top"><a href="#" id="Direcciones" class="top_link"><span class="down">Areas</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">
			<li><a href="#" class="fly">Dirección<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]-->
				  <ul>
						<li><a href="#">Dir 1</a></li>
						<li><a href="#">Dir 2</a></li>
						<li><a href="#">Dir 3</a></li>
				  </ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li class="mid"><a href="#" class="fly">Administración<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]-->
				  <ul>
						<li><a href="#">Adm 1</a></li>
						<li><a href="#">Adm 2</a></li>
						<li><a href="#">Adm 3</a></li>
				  </ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#">Area 3</a></li>
			<li><a href="#">Area 4</a></li>
			<li><a href="#">Area 5</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#" id="Comunicacion" class="top_link"><span class="down">Tramites</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">
			<li><a href="#">Tram 1</a></li>
			<li><a href="#">Tram 2</a></li>
			<li><a href="#">Tram 3</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="noticias.html" id="Noti" class="top_link"><span class="down">Noticias</span>
	<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
        	<!--<ul class="sub">
			<li><a href="#">Noticia 1</a></li>
			<li><a href="#">Noticia 2</a></li>
			<li><a href="#">Noticia 3</a></li>
		</ul>-->
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
    <li class="top"><a href="#" id="contactar" class="top_link"><span class="down">Contactar</span>
	<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
	</li>
</ul>
       
          
          
          <!--Fin del menu-->          </td>
        </tr>
      </table>
AHORA vienen la hoja de estilos:


Código:
******* para el color fondo y margen*********
 body { 
    background: #000066; 
    margin-top:1px;
 }


****margenes, ancho y color al page_margins*************
  #page_margins {
    margin: 0 auto; 
  }

 
  #page_margins {
    width: 800px;
   background-color:#1086B9;
  }

********El encabezado q solo llevará un banner**********
  #header {
   padding: 0x; 
   color: #000;
   width:800px; 
   height:340px;
  }

***********AQUI para el area de NAVEGACION <div id ="nav">**********
  #nav { overflow:hidden;
   width:800px;
   height:27px;
   background-color:#1086B9;
   background-image:url(../imgmenu/imgrelleno.jpg);
   background-repeat:no-repeat;
   }


**********mi TextArea********
  #main { margin: 0px 0; background: #fff; }



**********Pie***************
  #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }



**********LAS COLUMAS DEL MI TextArea <div id="main"***********
  #col1 { float: left; width: 200px;  margin:0; background-color:#339999;}
  #col2 { float: right; width: 200px;  margin:0; background-color:#999900;}
  #col3 { width: auto; margin: 0 200px 0 200px; background-color:#1086B9;}
  #col1_content { padding: 0;  }


  #col2_content { padding: 0;  }
  #col3_content { padding: 0; }

Bueno eso es todo por el momento, Creo q la solución va a estar verificando el main (q es el textarea donde incluyo las 3 columnas), y el nav (area de navegacion).

OJO, ahora el problema es que al desplegar el menu queda detrás del textarea (el cual lo he llamado "main"). PERO solo sucede en el MOZILLA FIREFOX.

Muy agradecido a todos los que han respondido hasta el momento.
  #11 (permalink)  
Antiguo 26/08/2008, 12:32
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

  #12 (permalink)  
Antiguo 26/08/2008, 16:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

De momento prueba a añadir position: relative a #nav, si no, es inevitable que salga por debajo, porque está antes en el flujo del documento, y el z-index no te serviría de nada.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 26/08/2008, 17:37
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Bien, le puse position:relative al #nav, pero al visualizarlo ahora en el I.E. tambien lo visualiza bajo el textarea (#main). No resultó

Puede q no haya solución en este caso? ? ?.

Si fuera asi, tendria q cambiar la idea que tenia de la Pagina, pues no me quedaria mas que cambiar el menu desplegable por un menu sencillo, (con lo que me costó entender ese desplegable q tengo actualmente, ).

No quiero regresar a usar tablas en el textarea para armar columnas
  #14 (permalink)  
Antiguo 26/08/2008, 18:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Tranquilo, no desesperes tan pronto; segurísimo que se puede hacer, pero es que con los trozos de código que te empeñas en poner es imposible ver el comportamiento.

Lo lógico al hacer un desplegable es poner la parte que despliega en posición absoluta, para que no desplace lo que tiene debajo sino que la cubra, pero no sé si es tu caso.

¿No tienes un enlace dónde verlo? Si no, pon todo el código que estás usando, para intentar hacernos una idea.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 26/08/2008, 19:01
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)

Aqui estan los archivos:

http://www.4shared.com/file/60594426/9976800c/web.html
  #16 (permalink)  
Antiguo 27/08/2008, 19:21
Avatar de Armand19  
Fecha de Ingreso: agosto-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hola, Problema con menu desplegable y contenido (CSS)


Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:26.