Hola nuevamente, wuauu la verdad gracias por sus intenciones de ayudar, realmente estoy sorprendido; como les dije al inicio soy nuevo en el css, pero me ha fascinado y quiero comprenderlo mucho mas.
Bueno he cambiado un poco la estructura de la web y ahora el problema es casi el mismo,
al desplegar el menu queda detrás del TextArea cuando lo pruebo en Mozilla FireFox. En el Internet explorer ya sale bien. Me piden el codigo y aqui se los envio, trataré de ser lo mas explicativo posible:
Básicamente la maquetación de mi web es la siguiente:
Código:
<div id="page_margins">
<div id="page"><div id="header">Cabecera </div>
<div id="nav>nevagacion (menus)</div>
<div id="main"><!--Areatexto-->
<div id="col1">.....Columna izquierda.....</div>
<div id="col2">....columna derecha....... </div>
<div id="col3">.....Columna central........</div>
</div>
</div>
</div>
Ahora ésta es la codificación de los menus en el <div id="nav">, q la verdad no creo q aqui esté el problema. Pues solo son las UL para armar el menu desplegable.
Código:
<table width="600px" border="0" align="right">
<tr>
<td>
<!--..............Inicio del menu.........-->
<ul class="menu2"><img src="imgmenu/menu_izq.png" align="left" /><img src="imgmenu/menu_der.png" align="right"/>
<li class="top"><a href="#" id="telmex" class="top_link"><span class="down">Menu</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
<li class="top"><a href="#" id="Direcciones" class="top_link"><span class="down">Areas</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#" class="fly">Dirección<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Dir 1</a></li>
<li><a href="#">Dir 2</a></li>
<li><a href="#">Dir 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="#" class="fly">Administración<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Adm 1</a></li>
<li><a href="#">Adm 2</a></li>
<li><a href="#">Adm 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Area 3</a></li>
<li><a href="#">Area 4</a></li>
<li><a href="#">Area 5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#" id="Comunicacion" class="top_link"><span class="down">Tramites</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Tram 1</a></li>
<li><a href="#">Tram 2</a></li>
<li><a href="#">Tram 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="noticias.html" id="Noti" class="top_link"><span class="down">Noticias</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--<ul class="sub">
<li><a href="#">Noticia 1</a></li>
<li><a href="#">Noticia 2</a></li>
<li><a href="#">Noticia 3</a></li>
</ul>-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#" id="contactar" class="top_link"><span class="down">Contactar</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
</ul>
<!--Fin del menu--> </td>
</tr>
</table>
AHORA vienen la hoja de estilos:
Código:
******* para el color fondo y margen*********
body {
background: #000066;
margin-top:1px;
}
****margenes, ancho y color al page_margins*************
#page_margins {
margin: 0 auto;
}
#page_margins {
width: 800px;
background-color:#1086B9;
}
********El encabezado q solo llevará un banner**********
#header {
padding: 0x;
color: #000;
width:800px;
height:340px;
}
***********AQUI para el area de NAVEGACION <div id ="nav">**********
#nav { overflow:hidden;
width:800px;
height:27px;
background-color:#1086B9;
background-image:url(../imgmenu/imgrelleno.jpg);
background-repeat:no-repeat;
}
**********mi TextArea********
#main { margin: 0px 0; background: #fff; }
**********Pie***************
#footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }
**********LAS COLUMAS DEL MI TextArea <div id="main"***********
#col1 { float: left; width: 200px; margin:0; background-color:#339999;}
#col2 { float: right; width: 200px; margin:0; background-color:#999900;}
#col3 { width: auto; margin: 0 200px 0 200px; background-color:#1086B9;}
#col1_content { padding: 0; }
#col2_content { padding: 0; }
#col3_content { padding: 0; }
Bueno eso es todo por el momento, Creo q la solución va a estar verificando el main (q es el textarea donde incluyo las 3 columnas), y el nav (area de navegacion).
OJO, ahora el problema es que al desplegar el menu queda detrás del textarea (el cual lo he llamado "main"). PERO solo sucede en el
MOZILLA FIREFOX.
Muy agradecido a todos los que han respondido hasta el momento.