Foros del Web » Creando para Internet » CSS »

Visualizar menu encima de otras capas

Estas en el tema de Visualizar menu encima de otras capas en el foro de CSS en Foros del Web. Buenas! No salgo de una y entro en otra. He probado jugando con los z-index pero ya no se me ocurre nada más. Al final ...
  #1 (permalink)  
Antiguo 04/11/2008, 14:53
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Visualizar menu encima de otras capas

Buenas!

No salgo de una y entro en otra. He probado jugando con los z-index pero ya no se me ocurre nada más. Al final los he quitado. He probado darle z-index con valores bajos a los wrappers y valor alto al div menu, pero nada...

Tengo dos hojas de estilo. En una, la estructura base y otra el menu web (de otro post).

Resulta que cuando el menu se desplega, sus opciones quedan por debajo de las capas siguientes.

base.css
Código:
/* CSS Document */
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body {margin:0.5em;}

body {
	background:#9343B9;
	text-align:center;
	padding:0;
	font:normal 0.8em/1.2em verdana,aria,sans-serif;
	color:#666;
	}
a {
	color:#FFF;
	text-decoration:none;
	border-bottom:1px dotted;
	}
a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#wrapper1 {
	position:relative;
	text-align:left;
	width:100%;
	background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
	}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;
	background:url("../images/leftcolor_bg.gif") repeat-y top left;
	}
#header {
	background:#BB62AB;
	padding:10px;
	margin:0;
	text-align:center;
	color:#FFF;
	height:60px;
	}
#header h1 {
	font-size:200%;
	}
#header a:hover {
	color:#7A2875;
	}
#maincol {
	position:relative;
	margin:0;
	padding:10px;
	}
#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
#centercol a {
	color:#666;
	}
#centercol a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#footer {
	position:relative;
	top:1px;
	background:#7A2875;
	width:100%;
	clear:both;
	margin:0;
	padding:1% 0;
	text-align:center;
	color:#CCC;
	}
menu.css
Código:
#menu {
font-size: 0.7em;
width:100%;
float:left;
background:#69CFDB;
text-align:left;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 { float: left;
margin-right: 1px;
}
#menu ul li a {display: block;
text-decoration: none;
white-space:nowrap;
margin:0;
font-size:12px;
color:#FFF;
font-weight:bold;
padding: 6px 8px;
}
#menu ul li a.nivel2 {
border-left:3px solid #353535;
color:#000;
background:#a2e3e7 url(../../imagenes/header/arrow_right_black.gif) no-repeat right 8px;
}
#menu ul li a.nivel2:hover {
border-left:3px solid #353535;
color:#000;
background:#69CFDB url(../../imagenes/header/arrow_right_black.gif) no-repeat right 8px;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {/*background-color: #6CC;*/
color: #000;
position: relative;
background:#69CFDB;
}
/* flecha desplegable */
#menu ul li a.nivel1{
background:#69CFDB url(../../imagenes/header/arrow_down_white.gif) no-repeat right 10px;
padding-right:15px;
}
#menu ul li:hover a.nivel1{
background:#69CFDB url(../../imagenes/header/arrow_down_white.gif) no-repeat right 10px;
padding-right:15px;
}
/* fin flecha desplegable */

#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;background-color: #a2e3e7;border: solid 1px #69cfdb;
}
#menu ul li a:hover ul li ul, #menu ul li:hover ul li ul{display: none;
}
#menu ul li ul li a:hover ul, #menu ul li ul li:hover ul {display: block;
position: absolute;left: 164px;top:-1px!important;top: -31px;
}
#menu ul li ul li a {width: 145px;
border-top-color: transparent;
padding: 6px 8px;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #fff;}

table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
pagina.php

Código PHP:
<!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>
<
title>3 columnas</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
link rel="stylesheet" href="menu.css" type="text/css" />
<
link rel="stylesheet" href="base.css" type="text/css" />
<!--[if 
IE]><style>#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;} #menu ul.nivel2{margin-top: -1px;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}</style><![endif]-->
</head>

<
body>
<
div id="header"><!-- begin header -->
    <
div id="menu">
    <
ul>
      <
li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
    <!--[if 
lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
        <
ul class="nivel2">
            <
li><a href="#">Opción 1.1</a></li>
            <
li><a href="#">Opción 1.2</a></li>
        </
ul>

    <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
      </
li>
      <
li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
    <!--[if 
lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
        <
ul class="nivel2">
            <
li><a href="#">Opción 2.1</a></li>
            <
li><a href="#">Opción 2.2</a></li>
            <
li class="nivel2"><class="nivel2" href="#">Opción 2.3 »</a>

                <!--[if 
lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
                <
ul class="nivel3">
                    <
li><class="primera" href="#">Opción 2.3.1</a></li>
                    <
li><a href="#">Opción 2.3.2</a></li>
                    <
li><a href="#">Opción 2.3.3</a></li>
                </
ul>
                <!--[if 
lte IE 6]></td></tr></table></a><![endif]--></li>

            <
li><a href="#">Opción 2.4</a></li>
            <
li><a href="#">Opción 2.5</a></li>
        </
ul>
    <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
    </
li>
      <
li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
    <!--[if 
lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
        <
ul class="nivel2">
            <
li><a href="#">Opción 3.1</a></li>

            <
li><a href="#">Opción 3.2</a></li>
            <
li><a href="#">Opción 3.3</a></li>
        </
ul>
    <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
    </
li>
      <
li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
    <!--[if 
lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
        <
ul class="nivel2">
            <
li><a href="#">Opción 4.1</a></li>

            <
li><a href="#">Opción 4.2</a></li>
            <
li><a href="#">Opción 4.3</a></li>
            <
li><a href="#">Opción 4.4</a></li>
        </
ul>
    <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
    </
li>
      <
li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
    <!--[if 
lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->

        <
ul class="nivel2">
            <
li><a href="#">Opción 5.1</a></li>
            <
li><a href="#">Opción 5.2</a></li>
            <
li><a href="#">Opción 5.3</a></li>
        </
ul>
    <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
    </
li>
    </
ul>
    </
div>

</
div><!-- end header -->

<
div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
    
    <
div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
    
        <
div id="maincol"><!-- begin main content area -->
                
            <
div id="leftcol"><!-- begin leftcol -->
                <
p>This is the left column</p>
            </
div><!-- end leftcol -->
                
            <
div id="rightcol"><!-- begin rightcol -->
                <
p>This is the right column</p>
            </
div><!-- end righttcol -->
            
            <
div id="centercol"><!-- begin centercol -->
                <
p>This is the center column </p>
            </
div><!-- end centercol -->
                
        </
div><!-- end main content area -->
                
        <
div id="footer"><!-- begin footer -->
            <
p>This is the footer</p>
        </
div><!-- end footer -->
    
    </
div><!-- end wrapper1 -->

</
div><!-- end wrapper2 -->
    
</
body>
</
html
Una imagen de lo que me sucede


Gracias de antemano.
  #2 (permalink)  
Antiguo 04/11/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: Visualizar menu encima de otras capas

Todo elemento que tenga posición relativa o absoluta podrá aceptar el z-index para su posición en Z, y los elementos según van apareciendo en el html se van colocando encima de sus antecesores.

De maera que comprueba que:

- todos los elementos implicados tienen posición absoluta o relativa
- a todos les es asignado un z-index.

En tu caso concreto:
- asigna un z-index:1; al selector #wrapper1
- añade z-index: 2; position: relative; al selector #menu
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 05/11/2008, 01:19
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Visualizar menu encima de otras capas

Cita:
Iniciado por Mikmoro Ver Mensaje
Todo elemento que tenga posición relativa o absoluta podrá aceptar el z-index para su posición en Z, y los elementos según van apareciendo en el html se van colocando encima de sus antecesores.

De maera que comprueba que:

- todos los elementos implicados tienen posición absoluta o relativa
- a todos les es asignado un z-index.

En tu caso concreto:
- asigna un z-index:1; al selector #wrapper1
- añade z-index: 2; position: relative; al selector #menu
Lo hacia bien, lástimam que me faltaba saber que todos deben tener posición absoluta o relativa.

Me lo apunto. Gracias Mikmoro
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:22.