Foros del Web » Creando para Internet » CSS »

Error de despliegue en menu.

Estas en el tema de Error de despliegue en menu. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/04/2012, 12:25
Avatar de lobonegro6  
Fecha de Ingreso: enero-2005
Ubicación: Monterrey, México.
Mensajes: 145
Antigüedad: 17 años, 5 meses
Puntos: 1
Error de despliegue en menu.

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
  #2 (permalink)  
Antiguo 17/04/2012, 12:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Respuesta: Error de despliegue en menu.

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

__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 17/04/2012, 14:39
Avatar de lobonegro6  
Fecha de Ingreso: enero-2005
Ubicación: Monterrey, México.
Mensajes: 145
Antigüedad: 17 años, 5 meses
Puntos: 1
Respuesta: Error de despliegue en menu.

Sorry aqui pongo el code

CSS
Código PHP:
* {
    
padding0;
    
margin0;


body {
    
background#fff;
    
font-familyVerdanaArialHelveticasans-serif;
    
line-height18px;
    
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 bordernone; }
color#22456F; text-decoration: none;}
a:hover text-decorationunderlinecolor #000; }

#wrap {
    
margin10px auto 0 auto;
    
width1200px;
}

#header { 
    
border5px solid #003366;
    
height100px;
}
#header h1 {
    
font-size36px;
    
font-weight100;
    
letter-spacing: -2px;
    
padding12px 0 5px 20px;
}
#header h1 a {
    
color#000;
    
text-decorationnone;
}
#header h1 a:hover {
    
color#02ACF1;
    
text-decorationnone;
}
#header h2 {
    
color#02ACF1;
    
font-size20px;
    
font-weight100;
    
padding0 0 0 50px;
    
letter-spacing: -1px;
    
line-height35px;
}


.
left {
    
margin-top10px;
    
width1170px;
    
floatleft;
    
text-alignjustify;
    
border5px solid #003366;
    
padding10px;
}
.
left h2 {
    
color#01709E;
    
font-size24px;
    
/*letter-spacing: 1px;*/
    
font-weight100;
    
padding 10px 0 15px 0;
}

hr {
  
border0;
  
width100%;
/*  color: #000;*/
  
background-color#01709E;
  
height5px;
}

/* TABLE */ 
div.fixedHeaderTable {
    
positionrelative;
}
div.fixedHeaderTable table {
    
width:100%;
}
div.fixedHeaderTable tbody {
    
height50px;
    
overflow-yauto;
    
overflow-xhidden;
}
div.fixedHeaderTable table th {
/*    background-color:#425567;*/
background-color#01709E;
color#fff;
text-align:center;
font-weight:bold;
padding1px;
/*border:1px groove #000;*/
font-size:16px;
line-height2em;
white-spacenowrap;
font-familyverdana,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-spacenowrap;
font-familyverdana,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-spacenowrap;
font-familyverdana,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 tddiv.fixedHeaderTable thead th {
    
position:relative;
}

/* IE7 hacks */
div.fixedHeaderTable {
    *
positionrelative;
    *
height420px;
    *
overflow-yscroll;
    *
overflow-xhidden;
    *
padding-right:16px;
}
div.fixedHeaderTable thead tr {
    *
positionrelative;
    
_positionabsolute;
    *
topexpression(this.offsetParent.scrollTop-2);
    *
background:none;
    
background-color:#FFFFFF
}

div.fixedHeaderTable tbody {
    *
heightauto;
    *
position:absolute;
    *
top:50px;   
}

/* IE6 hacks */
div.fixedHeaderTable {
    
_width:expression(this.offsetParent.clientWidth-20);
    
_overflowauto;
    
_overflow-yscroll;
    
_overflow-xhidden;
}
div.fixedHeaderTable thead tr {
    
_positionrelative
}


/*
.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-top10px;
    
text-aligncenter;
    
color#444;
/*    color: #2538A4;*/
    
font-size14px;
/*    border: 5px solid #02ACF1;*/
    
border5px solid #003366;
    
padding10px;
}

#menu {  text-align: center;
/*font-size: 0.7em;*/
font-size1em;
/*width: 820px;*/
width1170px;
margin20px auto;
positionrelative;

}
#menu ul { list-style-type: none;}

#menu ul li.nivel1 { float: left;
/*width: 162px;*/
margin-right2px;
positionrelative;
}
#menu ul li { float: left;}

#menu ul li a {display: block;
text-decorationnone;
color#fff;
background-color#02ACF1;
bordersolid 1px #fff;
padding8px;
positionrelative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #02ACF1;
color#000;
positionrelative;
border-bottomsolid 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;
positionabsolute;
/*width: 816px;*/
width100px;
bordersolid 1px #fff;
border-topnone;
background-color#02ACF1;
}
#menu ul li ul li a {width: 160px;
padding6px 0px 8px 0px;
bordernone;
background-color#02ACF1;
}
#menu ul li ul li a:hover {
positionrelative;
text-decorationunderline;
border-bottomnone;
}
table.falsa {border-collapse:collapse;
border:0px;
floatleft;
positionrelative;
}
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<BitacoraEspecialistalistaEspecialista 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
  #4 (permalink)  
Antiguo 17/04/2012, 14:40
Avatar de lobonegro6  
Fecha de Ingreso: enero-2005
Ubicación: Monterrey, México.
Mensajes: 145
Antigüedad: 17 años, 5 meses
Puntos: 1
Respuesta: Error de despliegue en menu.

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
  #5 (permalink)  
Antiguo 17/04/2012, 15:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Respuesta: Error de despliegue en menu.

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

Bonus:
Una página bicéfala no puede ser nada buena:
Cita:
<!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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 17/04/2012, 15:42
Avatar de lobonegro6  
Fecha de Ingreso: enero-2005
Ubicación: Monterrey, México.
Mensajes: 145
Antigüedad: 17 años, 5 meses
Puntos: 1
Respuesta: Error de despliegue en menu.

Cita:
Iniciado por kseso? Ver Mensaje
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?
  #7 (permalink)  
Antiguo 17/04/2012, 16:00
Avatar de lobonegro6  
Fecha de Ingreso: enero-2005
Ubicación: Monterrey, México.
Mensajes: 145
Antigüedad: 17 años, 5 meses
Puntos: 1
Respuesta: Error de despliegue en menu.

kseso?. gracias la solucion era poner z-index:1; gustazo saludarte.
  #8 (permalink)  
Antiguo 17/04/2012, 16:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años
Puntos: 539
Respuesta: Error de despliegue en menu.

EDITO: tras su última respuesta:

Me alegra ver que encontró el punto.

Todo lo de abajo ya no aplica xD


Cita:
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: despliegue
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 08:41.