Establcer niveles, con una tabla y con un iframe???

j.lerin · 20 Febrero 2012, 16:42 PM

Estoy aquí medio loco escribiendo codigos css y rayadas de mente para nada. XD

La cuestión es que tengo un iframe y una tabla ambas en una página. La tabla siempre me queda superpuesta al iframe y yo quiero el efecto justo contrario. Quiero que el iframe y todo lo que hay dentro quede superpuesto a la tabla. Se trata de un menú desplegable, por lo tanto no es bueno que la tabla se coma la mitad de las opciones.

He utilizado el codigo css z-index: x; y me sigue sin funcionar. Algunas Idea???

Gracias de ante mano!!!

#!drvy · 21 Febrero 2012, 09:02 AM

Hola,

Prueba con position: absolute; y position:relative;
Si mostraras código y/o demo de lo que tienes estaría bien.

Saludos

EFEX · 21 Febrero 2012, 15:13 PM

Con la propiedad z-index:1 usada en tabla deberia de realizar el truco.
Como dijo drvy | BSM expón lo que llevas hasta ahora.

j.lerin · 22 Febrero 2012, 01:07 AM

En la hoja html principal-index. He de aclarar que el menú desplegable esta introducido en un iframe dentro de la página. Esto en una página no tiene sentido pero si pones el mismo menú en muchas páginas diferentes si que lo tiene. Porque si modificas el iframe (entiéndase la página o código que incrusta el iframe) se modifican en todas y te ahorrar horas de trabajo. Mas adelante pongo el código que contiene el iframe.

Código [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>The Gallery</title>

<link rel="StyleSheet" href="general.css" media="all" type="text/css">

</head>

<body>
<br />

<center>

<img src="img/ptl/the_galleri_index.png" alt="imagén encabezado página." width="500" longdesc="Esta es la imágen que enzabeza la página y que contiene el nombre y estilo de nuestra web." />


<div id="div_menu" align="center"><iframe id="menu" src="menu.htm"   frameborder="0" scrolling="no"></iframe></div>
<p><br />
</p>

<div id="div_cont"><table id="table_p" style="z-index:0">
<td>

Bueno, aquí va el contenido en cuestión, lo suprimo para abreviar el código. 

</td>
</table></div>
</center>


</body>
</html>

En la hoja de estilos correspondiente al menú desplegable:

Código [Seleccionar]

@charset "utf-8";
/* CSS Document */

/* Root = Horizontal, Secondary = Vertical */

ul#menu {
  margin: 0;
  border: 0 none;
  padding: 0;

/*  width: 500px;*/ /*For KHTML*/

width:600px;
  list-style: none;
  height: 50px;
  border:0px;
  padding-bottom: 5px;
}

ul#menu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/ 

  display: inline;
  list-style: none;
  position: relative;
  height: 35px;
}
ul#menu li{
	padding-bottom:5px;
}
ul#menu li:hover{
	background: #FFFFFF;
}

ul#menu  ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: relative;
  top: 0px;
  left: 15%;  
  background: #FFFFFF;
  border: none;
}

ul#menu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
  
}

ul#menu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#menu a {
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight:bold;
/*  border-right:1px solid #818181;*/
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #000000;

}

/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
  float: none;
  border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
	background: #CCCCCC;
	color: #000000;
}


/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
  display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
  display: block;
}
ul#menu .selected{
	color: #FFFFFF;
}

En el html del menú desplegable, este esta en el iframe.

Código [Seleccionar]

<title>Documento sin t&iacute;tulo</title>


<link rel="StyleSheet" href="estilos_menu_desplegable.css" media="all" type="text/css">

</head>

<center><
<ul id="menu">
	<li><a class="selected" href="index.html" target="_top">Inicio</a></li>
	<li><a href="#" class="Estilo1">Secciones</a>
		<ul>
			<li><a href="#">Artístas</a></li>
			<li><a href="pags/secciones/obras.html" target="_top">Obras</a></li>
            <li><a href="#">Galería</a></li>
            <li><a href="#">Eventos</a></li>
		</ul>
</li>
<li><a href="#">Enlaces</a>
	<ul>

		<li><a href="#">DreamsLake</a></li>
		<li><a href="http://www.vice.com/es" target="_blank">Vice</a></li>
        <li><a href="http://www.go-mag.com/" target="_blank">Go!</a></li>
	</ul></li>

<li><a href="#">Contacto</a>	

</li>
</ul>
</center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br />
</p>
</body>
</html>

Bueno estan las cosas sin terminar como podreís ver.

y en la hojas de estilos general:

Código [Seleccionar]

@charset "utf-8";
/* CSS Document */

#menu{
	width: 800px;
	height: 300px;
	background-color: transaparent;
	margin-left:0;
	margin-right: 0;
	outline-color:#000000;
	z-index:1;
}

#table_p{
	width:60%;
	text-align:left;
	border:0px;
	position:inherit;
	margin:-200px;
	z-index:0;
}

body {
	background-color:#000000;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:left;


}

#text_p{
	background-color:#FFFFFF;
	color:#000000;
	

}

A:link {
	font-family: Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration: none;
}
A:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
A:active {
	font-family: Arial, Helvetica, sans-serif;
	color:#FF3300;
	font-weight: normal;
	text-decoration: none;
}
A:hover {
	font-family: Arial, Helvetica, sans-serif;
	color:#FF3300;
	font-weight: normal;
	text-decoration: none; 
	}


#img_p_l{
	float:right;
	margin-left:10px;
	border:0px;
	
	}

#img_p_r{
	float:left;
	margin-right:10px;
	border:0px;

Test Foro de elhacker.net SMF 2.1

Establcer niveles, con una tabla y con un iframe???

j.lerin

#!drvy

EFEX

j.lerin