Error de despliegue en menu.

[lobonegro6]

Hola buenas tardes tengo un pequeño error con mi menu css, resulta q una vez q lo meto en la page se queda por debajo de un div table q tengo. aqui dejo imagen



alguien me podria ayudar con esto. salu2

[kseso?]

Al adivino lo quemaron en la hoguera, así que ahora en el foro de css el encargado de buscar el código perdido es

[lobonegro6]

Sorry aqui pongo el code

CSS

Código PHP:

  * {
    padding: 0;
    margin: 0;
} 
 
body {
    background: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 18px;
    color: #333333;
    
/*    background-image: url(images/markwater.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;*/
    /*    font-size: 16px; aliminado para poder usar bien hd de tabla*/
}
 
img { border: none; }
a { color: #22456F; text-decoration: none;}
a:hover { text-decoration: underline; color : #000; }
 
#wrap {
    margin: 10px auto 0 auto;
    width: 1200px;
}
 
#header { 
    border: 5px solid #003366;
    height: 100px;
}
#header h1 {
    font-size: 36px;
    font-weight: 100;
    letter-spacing: -2px;
    padding: 12px 0 5px 20px;
}
#header h1 a {
    color: #000;
    text-decoration: none;
}
#header h1 a:hover {
    color: #02ACF1;
    text-decoration: none;
}
#header h2 {
    color: #02ACF1;
    font-size: 20px;
    font-weight: 100;
    padding: 0 0 0 50px;
    letter-spacing: -1px;
    line-height: 35px;
}
 
 
.left {
    margin-top: 10px;
    width: 1170px;
    float: left;
    text-align: justify;
    border: 5px solid #003366;
    padding: 10px;
}
.left h2 {
    color: #01709E;
    font-size: 24px;
    /*letter-spacing: 1px;*/
    font-weight: 100;
    padding : 10px 0 15px 0;
}
 
hr {
  border: 0;
  width: 100%;
/*  color: #000;*/
  background-color: #01709E;
  height: 5px;
}
 
/* TABLE */ 
div.fixedHeaderTable {
    position: relative;
}
div.fixedHeaderTable table {
    width:100%;
}
div.fixedHeaderTable tbody {
    height: 50px;
    overflow-y: auto;
    overflow-x: hidden;
}
div.fixedHeaderTable table th {
/*    background-color:#425567;*/
background-color: #01709E;
color: #fff;
text-align:center;
font-weight:bold;
padding: 1px;
/*border:1px groove #000;*/
font-size:16px;
line-height: 2em;
white-space: nowrap;
font-family: verdana,arial,helvetica,sans-serif;
}
 
/* HACIENDO LOS ROW AZUL Y GRIS */
div.fixedHeaderTable table td {
background-color:#D3D9F8;
font-weight:bold;
font-size:12px;
text-align:center;
border:0.5px groove #000;
/*line-height: 1.5em;*/
/*line-heigh: 2em;*/
white-space: nowrap;
font-family: verdana,arial,helvetica,sans-serif;
}
 
/**/
div.fixedHeaderTable table td.Gris {
background-color:#f7f7f7;
font-weight:bold;
font-size:12px;
text-align:center;
border:0.5px groove #000;
/*line-height: 1.5em;*/
/*line-heigh: 2em;*/
white-space: nowrap;
font-family: verdana,arial,helvetica,sans-serif;
}
 
 
div.fixedHeaderTable table td.ListadoEditar {
    background:#FFFFFF;
}
div.fixedHeaderTable table td.ListadoEstVerde {
    /*background:#D3D9F8;*/
        background:#67DE58;
}
div.fixedHeaderTable table td.ListadoEstAmarillo {
    /*background:#D3D9F8;*/
        background:#EDFC47;
}
 
div.fixedHeaderTable thead td, div.fixedHeaderTable thead th {
    position:relative;
}
 
/* IE7 hacks */
div.fixedHeaderTable {
    *position: relative;
    *height: 420px;
    *overflow-y: scroll;
    *overflow-x: hidden;
    *padding-right:16px;
}
div.fixedHeaderTable thead tr {
    *position: relative;
    _position: absolute;
    *top: expression(this.offsetParent.scrollTop-2);
    *background:none;
    background-color:#FFFFFF
}
 
div.fixedHeaderTable tbody {
    *height: auto;
    *position:absolute;
    *top:50px;   
}
 
/* IE6 hacks */
div.fixedHeaderTable {
    _width:expression(this.offsetParent.clientWidth-20);
    _overflow: auto;
    _overflow-y: scroll;
    _overflow-x: hidden;
}
div.fixedHeaderTable thead tr {
    _position: relative
}
 
 
/*
.right {
margin-top: 10px;
width: 160px;
float: right;
border: 5px solid #ddd;
font-size: 12px;
padding: 10px;
}
.right ul {
list-style-type: square;
padding: 5px 10px 10px 20px;
color: #59799F;
}
.right h2 {
height: 30px;
font-size: 12px;
color: #666;
line-height: 30px;
}
.right a { text-decoration: none }
*/
 
#footer {
    margin-top: 10px;
    text-align: center;
    color: #444;
/*    color: #2538A4;*/
    font-size: 14px;
/*    border: 5px solid #02ACF1;*/
    border: 5px solid #003366;
    padding: 10px;
}
 
#menu {  text-align: center;
/*font-size: 0.7em;*/
font-size: 1em;
/*width: 820px;*/
width: 1170px;
margin: 20px auto;
position: relative;
 
}
#menu ul { list-style-type: none;}
 
#menu ul li.nivel1 { float: left;
/*width: 162px;*/
margin-right: 2px;
position: relative;
}
#menu ul li { float: left;}
 
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #02ACF1;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #02ACF1;
color: #000;
position: relative;
border-bottom: solid 1px #02ACF1;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;
/*width: 816px;*/
width: 100px;
border: solid 1px #fff;
border-top: none;
background-color: #02ACF1;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #02ACF1;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -0px;}
ul.dos {left: -164px;}
ul.tres {left: -328px;}
/*ul.cuatro {left: -492px;}*/
ul.cinco {left: -656px;} 
   

Front HTML+CSS

Código PHP:

  <%@taglib prefix="t" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
 
<t:if test="${sessionScope['sessionEmail']==null}">
    <% response.sendRedirect("login.jsp"); %>
</t:if>
 
<%@ page language="java" %>
<%@page import = "java.util.LinkedList"%>
<%@page import = "com.alestra.Bitacora.ConsultasBitacora"%>
<%@page import = "com.alestra.Bitacora.Bean.BitacoraEspecialista"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
    <head>
        <title>Busqueda de Registros en Bitacora</title>
        <meta http-equiv="Content-Language" content="English" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <h1><a href="index.jsp">Operacion y Control TI</a></h1>
                <h2>Bitacora de Eventos</h2>
            </div>
 
            <%@ include file="includeMenu.jsp" %>
                
            <div class="left">
                <div class="articles">
                    <h2>JSP Consulta MySQL - Busqueda Bitacora por Especialista</h2>
                    <form method="get" action="bitacoraBusquedaEncontradaEspecialista.jsp">
                    <div class="fixedHeaderTable">                        
                        <table>
                            <thead>
                                <tr><th width="20%" hidden></th><th width="56%" hidden></th><th width="24%" hidden></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td class="Gris"><div align="right">Especialista: </div></td>
                                    <td class="Gris"><div align="left">&nbsp;
                                        <select name="especialista_">
                                            <%
                                             String tablaEspecialidad = "bde_especialista";
 
                                             LinkedList<BitacoraEspecialista> listaEspecialista = ConsultasBitacora.getBitacoraEspecialista(tablaEspecialidad);
 
                                             {
                                             for (int i=0;i<listaEspecialista.size();i++)
                                             { %>
                                                    <option value="<%=listaEspecialista.get(i).getId_especialista()%>"><%=listaEspecialista.get(i).getEspecialista()%>
                                             <%
                                                 } }
                                             %>
                                             </select></td>
                                    <td class="Gris">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>                                    
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <center>
                        <input type="submit" value="Buscar Rep. x Esp.">
                    </center>
                    </form>
                </div><!-- articles -->    
                <br><hr><br>
                <center><b><a href="index.jsp">Volver a Index</a></b></center>
                <br>
            </div><!-- left -->
            <div style="clear: both;"> </div>
 
            <div id="footer">
            <a href="http:///"></a> - 
            <a href="http://#/">Operacion y Control TI. </a>
            </div>                            
        </div>
    </body>
</html> 
   

[lobonegro6]

Aqui el menu:

Código PHP:

                  <div id="menu">
                <ul>
                <li class="nivel1"><a href="index.jsp" class="nivel1">Inicio</a>
                </li>
                <li class="nivel1"><a href="bitacoraNuevoRegistro.jsp" class="nivel1">Insertar</a>
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
 
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="nivel1"><a href="bitacoraListado.jsp" class="nivel1">Listado</a>
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
 
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="nivel1"><a href="#" class="nivel1">Busqueda</a>
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
                        <ul class="cuatro">
                                <li><a href="bitacoraBusqueda.jsp">Reporte</a></li>
                                <li><a href="bitacoraBusquedaXEspecialista.jsp">Especialista</a></li>
                                <li><a href="bitacoraBusquedaXGrupo.jsp">Grupo</a></li>
                                <li><a href="bitacoraBusquedaXFecha.jsp">Dia</a></li>
                                <li><a href="bitacoraBusquedaXFechas.jsp">Fechas</a></li>        
                        </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="nivel1"><a href="bitacoraModificacion.jsp" class="nivel1">Modificar</a>
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="nivel1"><a href="bitacoraBaja.jsp" class="nivel1">Borrar</a>
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                </ul>
                </div> 
   

[kseso?]

Añada a su #menu la propiedad z-index

Bonus:
Una página bicéfala no puede ser nada buena:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
<title>Busqueda de Registros en Bitacora</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

Lo siguiente con reservas:
Tampoco conviene poner nada (ni un comentario) antes del doctype.


Por cierto, bonitas tablas.

[lobonegro6]

Iniciado por kseso?

Añada a su #menu la propiedad z-index

Bonus:
Una página bicéfala no puede ser nada buena:


Lo siguiente con reservas:
Tampoco conviene poner nada (ni un comentario) antes del doctype.


Por cierto, bonitas tablas.

Hola gracias amigo, por ese error no lo habia visto, creo q se me paso. bueno acabo de introducirle al css el z-index, se lo puse de -1 y cuando regreso a la pagina ahora no me despliega nada. a q se debera?

[lobonegro6]

kseso?. gracias la solucion era poner z-index:1; gustazo saludarte.

[kseso?]

EDITO: tras su última respuesta:

Me alegra ver que encontró el punto.
Todo lo de abajo ya no aplica xD

se lo puse de -1 ...a q se debera?

La lógica, esa gran desconocida:
.- si antes se le veía (por debajo de otros elementos, pero se veía)
.- si modificó algo y sabe qué ha sido
.- si ahora ya no se ve
: : : :
ergo:................................. a q se debera?

http://www.sidar.org/recur/desdi/mcs...os/zindex.html
http://www.librosweb.es/referencia/css/z-index.html
http://www.w3.org/wiki/CSS/Properties/z-index