En este grupo En todos

Foro de CSS



ayuda con un menu desplegable en css

carmen
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 14/10/2010

Hola buenas noches.. Necesito una ayuda con un menu desplegable que realice en css... Pues tengo mi pagina realizada en dreamweaver en mi parte izquiera tengo un tipo de menu pero en html osea una tabla con varios botones en forma vertical el ultimo boton es el desplegable el codigo lo consegui en internet y lo adapte a mi pagina y se ve prefecto pero hay un PROBLEMA que no se ve alineado con los otros botones,... Yo lo meti igual en un <td> como estan los otros, pero ese boton se ve un poquito a la derecha y quiero que se vea a la izquierda osea alineados con los otros botones.. Que puedo hacer? No se donde cambiar algo para que se alinee con los demas...? Por favor ayudenme.... Les paso el codigo para que lo revisen a ver si me pueden ayudar... Alli esta una de mis paginas alli esta incluido el menu... Lo que esta en negrita es el css y la parte de html del menu desplegable.... Si me pueden ayudar.... Gracias....


<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Software educativo: "Tutorial estrategias de
ense&ntilde;anza y aprendizaje basadas en la Web 2. 0"</title>


<script language="JavaScript" type="text/javascript" src=".. /js/jglosario. Js"></script>
<script language="JavaScript" type="text/javascript" src=".. /js/jglosario1. Js"></script>
<script language="JavaScript" type="text/javascript" src=".. /js/jmenus. Js"></script>
<script language="JavaScript" src=".. /js/jfuncionesGenerales. Js"></script>
<script language="JavaScript">
function cambioSRC(ruta)
{document. GetElementById("ifr1"). Src=ruta;}
</script>

<style type="text/css"> // ESTE ES EL CSS DEL MENU
ul#Sorter li ul{display:none; position: absolute; padding:5px; border:1px solid #008080; font-family:HandelGothic BT; font-size:11px; border-top:0;-moz-border-radius: 0 10px 10px 10px; background: #e6efff;}
ul#Sorter li:hover ul {display: block;}
ul#Sorter{
list-style:none;
}
ul#Sorter li ul li{display: block;}
</style>

<style type="text/css">

A:link{COLOR:Blue; TEXT-DECORATION:none;}
A:visited {COLOR:#008080;TEXT-DECORATION:none;}
A:active {COLOR:#008080;TEXT-DECORATION:none;}
A:hover {COLOR:#F60;TEXT-DECORATION:underline;background:transparente;}
</style>


<script language="JavaScript">
function cerrar() {
window. Close()
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers. Arguments;
for (i=0; i<(args. Length-2); i+=3)
with (document) if (getElementById && (obj=getElementById(args[i]))! =null)) { v=args[i+2];
if (obj. Style) { obj=obj. Style; v=(v=='show')? 'visible':(v=='hide')? 'hidden':v; }
obj. Visibility=v; }
}
</script>
</head>


<body onLoad="cargarGlosario()" style="background-color: black;" topmargin="0">

<table style="text-align: left; margin-left: auto; margin-right: auto; width: 925px; height: 669px;" background="principals1. Png">

<tbody>

<tr>

<th style="height: 640px;" scope="col">
<table style="text-align: left; margin-left: auto; margin-right: 0px; width: 915px; height: 156px;" border="0">

<tbody>

<tr>

<td style="width: 413px;"></td>

<td style="width: 72px;"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td style="width: 413px;">&nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;</td>

<th style="width: 72px;" scope="col">&acute;<br>

</th>

<th scope="col"><br>

<br>

<a href="ficha. Html"><img style="border: 0px solid ; width: 86px; height: 54px;" onMouseOut="src='ficha_bot. Png'" onMouseOver="src='ficha_act. Png'" alt="" src="ficha_bot. Png"></a></th>

<th scope="col"><br>

<br>

<a href="imagen_mapa/mapa_fondo. Html"><img onmouseover='src="mapa_act. Png"' style="border: 0px solid ; cursor: pointer; width: 49px; height: 54px;" onmouseout='src="mapa_bot. Png"' alt="p" onClick="" src="mapa_bot. Png" align="top"></a></th>

<th scope="col"><br>

<br>

<a href="mediateca. Html"><img style="border: 0px solid ; width: 50px; height: 52px;" onMouseOut="src='media_bot. Png'" onMouseOver="src='media_act. Png'" alt="" src="media_bot. Png"></a></th>

<th scope="col"><br>

<br>

<a href="glosarios. Html"><img style="border: 0px solid ; width: 49px; height: 52px;" onMouseOut="src='glosa_bot. Png'" onMouseOver="src='glosa_act. Png'" alt="" src="glosa_bot. Png"></a></th>

<th scope="col"><br>

<br>

<a href="referencia. Html"><img style="border: 0px solid ; width: 57px; height: 52px;" onMouseOut="src='refe_bot. Png'" onMouseOver="src='refe_act. Png'" alt="" src="refe_bot. Png"></a></th>

<th scope="col"><br>

<br>

<img src="ayu_bot. Png" alt="o" height="54" width="49"></th>

<th scope="col"><br>

<br>

<img src="credi_bot. Png" alt="o" height="52" width="49"></th>

<th scope="col">&nbsp;</th>

<th scope="col"><br>

<br>

<a href="#javascript:;"><img onmouseover='src="salir_act. Png"' onmouseout='src="salir_bot. Png"' style="border: 0px solid ; width: 49px; height: 52px;" o="" onClick="cerrar()" src="salir_bot. Png" align="top"></a>
</th>

<th scope="col">&nbsp;</th>

</tr>

</tbody>
</table>

<table style="width: 189px; height: 324px;" align="left" border="0">

<tbody>

<tr>

<td>
<center> <img src="intro_acti. Png" alt="" style="width: 144px; height: 42px;" onClick="" onMouseOver="" onMouseOut="" align="middle"></center>

</td>

</tr>

<tr>

<td>
<center> <a href="resenas1. Html"><img style="border: 0px solid ; width: 144px; height: 42px;" onMouseOut="src='rese_boton. Png'" onMouseOver="src='rese_acti. Png'" alt="" src="rese_boton. Png"></a></center>

</td>

</tr>

<tr>

<td>
<center> <a href="concepto. Html"><img src="conce_boton. Png" alt="" style="border: 0px solid ; width: 144px; height: 42px;" onMouseOver="src='conce_acti. Png'" onMouseOut="src='conce_boton. Png'" align="middle"></a></center>

</td>

</tr>

<tr>

<td>
<center> <a href="caracteristicas. Html"><img style="border: 0px solid ; width: 144px;" onMouseOut="src='carac_boton. Png'" onMouseOver="src='carac_acti. Png'" alt="" src="carac_boton. Png"></a></center>

</td>

</tr>

<tr>

<td>
<center> <a href="beneficios. Html"><img style="border: 0px solid ; width: 144px;" onMouseOut="src='bene_boton. Png'" onMouseOver="src='bene_acti. Png'" alt="" src="bene_boton. Png"></a></center>

</td>

</tr>

<tr>

<td>
<center> <a href="aplicaciones. Html"><img style="border: 0px solid ; width: 144px;" onMouseOut="src='aplica_boton. Png'" onMouseOver="src='aplica_acti. Png'" alt="" src="aplica_boton. Png"></a></center>

</td>

</tr>

<tr>

<td>

<ul id="Sorter">
<li><a href=""><img style="border: 0px solid ; width: 144px;" onMouseOut="src='herra_boton1. Png'" onMouseOver="src='herra_acti1. Png'" alt="" src="herra_boton1. Png"></a>
<ul>
<li><a href="listas. Html">Lista de discusión</a>
<li><a href="">Edublog</a>
<li><a href="">Wiki</a>
<li><a href="">Comunidades Virtuales</a>
<li><a href="">Video Blog</a>
<li><a href="">Podcasting</a>
</ul>



</td>

</tr>

</tbody>
</table>

<table style="text-align: left; width: 650px; height: 400px;" border="0" cellpadding="0" cellspacing="2">

<tbody>

<tr>

<td>&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgb(255, 255, 255);"></span><br>

</td>

<td style="height: 400px; width: 612px; vertical-align: top; background-image: url(fondito. Png);"><iframe src="introduccions1. Html" style="height: 393px; width: 602px;" id="ifr1" frameborder="0"></iframe> <br>

</td>

<td>&nbsp;</td>

</tr>

</tbody> <tbody>

<tr>

<td style="height: 23px;">&nbsp;</td>

</tr>

</tbody>
</table>

</th>

</tr>

</tbody><tbody>

</tbody>
</table>

<br>

</body>
</html>

Manuel Guzman
Ing.sistema universidad o&m
Escrito por Manuel Guzman
el 09/11/2010

Buenas,

Primero debes tener en cuenta que una tabla se divide de esta manera
<table>Mi tabla
<tr> fila de la tabla
<td>datos que se van a introducir en la fila
</td>
<tr>
</table>

Te sigo escribiendo