Foros del Web » Creando para Internet » CSS »

Problema con css y xhtml

Estas en el tema de Problema con css y xhtml en el foro de CSS en Foros del Web. Hola! Estoy diseñando un panel de control en css y XHTML , tengo un menú hecho en CSS que es desplegable pero tengo el siguiente ...
  #1 (permalink)  
Antiguo 05/02/2012, 09:12
 
Fecha de Ingreso: julio-2006
Mensajes: 96
Antigüedad: 17 años, 9 meses
Puntos: 2
Problema con css y xhtml

Hola! Estoy diseñando un panel de control en css y XHTML , tengo un menú hecho en CSS que es desplegable pero tengo el siguiente problema de la imagen.



Es decir el menu se me oculta por debajo del texto , intente con las propiedades z-index pero no me dio resultado , el codigo de mi css y xhtml es el siguiente:

Código:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ainux Servicios Informáticos</title>

<script type="text/javascript">

function popup(pagina,titulo,ancho,alto){

window.open(pagina,'','status=no,toolbar=no,scrollbars=no,menubar=no,fullscreen=no,resizable=no,width=504,height=232px,resize=no');

}

</script>

<style type="text/css">

.transparente {

        filter:alpha(opacity=50);

        -moz-opacity:0.5;

        -khtml-opacity: 0.5;

        opacity: 0.5;

}

a,link,visited,href{

text-decoration:none;

}

body{

background:#F5f5f5;

margin:0;

padding:0;

}

#menu_superior{

width:100%;

height:1.65em;

background-color:#333333;

float:left;

}

#menu{

margin:0;

display:block;

float:left;

}

#menu ul{

margin:0;

padding:0;

}

#menu li{

display:inline;

float:left;

width:6em;

height:auto;

text-decoration:none;

list-style:none;

font-size:0.8em;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

padding:5px;

display:block;

}

#menu li a{

color:#F9f9f9;

}

#menu li:hover{

background:#424242;

}

ul#menu ul {

background:#333333;

display:none;

z-index:2;

  filter:alpha(opacity=80);

        -moz-opacity:0.8;

        -khtml-opacity: 0.8;

        opacity: 0.8;



margin:0;



text-align:center;

}

ul#menu li ul li{

margin-top:1px;

width:91%;



}

ul#menu  li:hover ul{

display:block;



}



#menu_cuenta{

float:right;

height:1.65em;

width:auto;

margin-right:3%;

padding-top:5px;

font-family:Arial, Helvetica, sans-serif;

color:#FFFFFF;

font-size:0.8em;

margin-left:1em;

}

.link{

color:#FCFCFC;

text-decoration:none;

margin-left:0.8em;

}

#contenido{

margin:0;

padding:0;

margin-left:6%;

margin-right:6%;

Z-INDEX:1;

BACKGROUND:#FFFFFF;

width:88%;

height:auto;

min-height:7em;

border-left:1px solid #E6E6E6;

border-right:1px solid #E6E6E6;

}

h1{

font-family:Arial, Helvetica, sans-serif;

color:#CBCBCB;

padding:0;

margin:0;

}

hr{

margin:0;

padding:0;

border:2px solid #CBCBCB;



}

.html_contenido{

padding-top:3%;

margin-top:0%;

margin-left:2%;

margin-right:2%;



}

.pie{

padding-top:0.4em;

border-bottom:0.4em solid #FFFFFF;

text-align:center;

font-size:0.8em;

color:#666666;

}

.titulo_seccion{

margin-top:1%;

font-family:Arial, Helvetica, sans-serif;

font-size:2em;

color:#CBCBCB;

}

.tabla_contenido{

width:100%;

height:auto;

margin-top:0.4em;

margin-bottom:0.4em;

}

.tabla_contenido th{

background:#4A4A4A;

border:1px solid #FCFCFC;

font-size:0.8em;

color:#F5F5F5;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

}

.tabla_contenido  td{

border:1px solid #FCFCFC;

background:#F5F5F5;

font-family:Arial, Helvetica, sans-serif;

font-size:0.8em;

text-align:center;

}

.tabla_contenido  td hover{

background:#F6F6F6;

}

#acciones_seccion{

margin-top:1%;

float:right;

font-family:Arial, Helvetica, sans-serif;

font-size:0.49em;

color:#666666;



}

#acciones_seccion a{

background:#F5F5F5;

margin-left:0.4em;

color:#5E5E5E;

-moz-border-radius: 5px; /* Firefox */

-webkit-border-radius: 5px; /* Safari */

}

#acciones_seccion a:hover{

background:#444444;

color:#FCFCFC;

}

.acciones{

color:#CBCBCB;

font-weight:BOLD;

}

.nombre_usuario{

-moz-border-radius: 5px; /* Firefox */

    -webkit-border-radius: 5px; /* Safari */

	background:#5e5e5e;

	}



</style>

</head>

<body>

<div id="menu_superior">

  

<ul id="menu">

<li><a href="http://localhost/ainux/index.php/usuarios">Usuarios</a>     

<ul>

   <li><a href="http://localhost/ainux/index.php/usuarios_adm/listar">Listar Usuarios</a></li>

   <li><a href="http://localhost/ainux/index.php/usuarios_adm/nuevo">Nuevo Usuario</a></li>

</ul>

<li><a href="http://localhost/ainux/index.php/mensajes">Mensajes</a>     

<ul>

   <li><a href="http://localhost/ainux/index.php/ver">ver</a></li>

</ul>

</ul>



<div id="menu_cuenta"><b><span class='nombre_usuario'>@demo</span></b>

&nbsp;

<a href="#" class='link' onclick="javascript:popup('http://localhost/ainux/index.php/cuenta/datosCuenta','Cuenta','','')">Cuenta</a>

<a href="http://localhost/ainux/index.php/login/salir" class='link'>Cerrar Sesión</a></div>

</div>

<div id="contenido">

<div class="html_contenido">

<div class='titulo_seccion'>Usuarios<div id='acciones_seccion'><span class='acciones'>acciones:</span><a href="#" onclick="javascript:popup('http://localhost/ainux/index.php/usuarios_adm/nuevo','Nuevo','')">Crear</a><a href="#">Buscar</a></div></div>

<hr>

<table class='tabla_contenido'>
<thead>
<tr>
<th>ID</th><th>Nombre</th><th>Contraseña</th><th>Nivel</th><th>Estado</th><th>Clave Recuperación</th><th>Acciones</th></tr>
</thead>
<tbody>
<tr>
<td>7</td><td>jonatanlc</td><td>a681723522</td><td>1</td><td>1</td><td></td></tr>
<tr>
<td>8</td><td>demo</td><td>demodemo</td><td>8</td><td>0</td><td></td></tr>
</tbody>
</table><hr>

<div class='pie'>Ainux Servicios Informáticos | www.ainux.com.ar | [email protected]</div>

</div>



</div>



</body>

</html>
Espero que me puedan dar una mano ya que estoy desconcertado.

Muchas gracias! Saludos
  #2 (permalink)  
Antiguo 05/02/2012, 11:41
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Problema con css y xhtml

Primero, tu menu esta mal anidado, debería ser

Código HTML:
Ver original
  1. <ul id="menu">
  2. <li>
  3. <a href="http://localhost/ainux/index.php/usuarios">Usuarios</a>    
  4. <ul>
  5. <li><a href="http://localhost/ainux/index.php/usuarios_adm/listar">Listar Usuarios</a></li>
  6. <li><a href="http://localhost/ainux/index.php/usuarios_adm/nuevo">Nuevo Usuario</a></li>
  7. </ul>
  8. </li>
  9. <li>
  10. <a href="http://localhost/ainux/index.php/mensajes">Mensajes</a>    
  11. <ul>
  12. <li><a href="http://localhost/ainux/index.php/ver">ver</a></li>
  13. </ul>
  14. </li>
  15. </ul>


Segundo, en tu css, remové los z-index que tenes y a tu menu_superior

#menu_superior{
width:100%;
height:1.65em;
background-color:#333333;
float:left;
position: absolute;
z-index:999;

}

Te recuerdo que z-index sólo funciona sobre un elemento posicionado

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 05/02/2012, 11:52
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Problema con css y xhtml

Para que funcione:
  • dale a #menu_superior un valor de z-index mayor que a #contenido
  • Además a ambos dale un valor de position distinto de static.
ver: http://es.html.net/tutorials/css/lesson15.php
googlear: "posicionamiento css librosweb.es"

Para que además no sea chapuza:
  • O limpias el float left de #menu_superior (googlear: "limpiar los float librosweb.es") o trabajas con position.
  • Uno de los principios de xhtml es anidar correctamente los tags, controla de cerrar los <li> del menú

PD:// para aclarar:
Cita:
intente con las propiedades z-index pero no me dio resultado
porque z-index funciona sobre elementos posicionados en relativo, absoluto o fijo.
  #4 (permalink)  
Antiguo 05/02/2012, 13:03
 
Fecha de Ingreso: julio-2006
Mensajes: 96
Antigüedad: 17 años, 9 meses
Puntos: 2
Respuesta: Problema con css y xhtml

Gracias a ambos :) y leeré la documentación sugerida :. Saludos!

Etiquetas: xhtml
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 00:16.