Hola a todos,
¿Alguien podría decirme porqué el submenu del menu horizontal "encuentros" no se despliega en la posición correcta al ejecutar la funcion javascript? Ya no sé que probar y me estoy volviendo loco. Muchas gracias
Codigo HTML
<html>
<head>
<title>Música Activa</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function abrirmenu(id){
ul = "ul_" + id;
img = "img_" + id;
ulElement = document.getElementById(ul);
if (ulElement){
if (ulElement.className == 'closed'){
ulElement.className = "open";
}else{
ulElement.className = "closed";
}
}
}
//-->
</script>
</head>
<body>
<div id="contenedor">
<div id="cabecera"><img src="imagenes/cabecera.jpg" width="750" height="106" alt="Música Activa" border="0">
</div>
<div id="navegadores">
<div id="menupral">
<ul id="menupralist">
<li><a href="#">inicio</a></li>
<li id="encuentros"><a onclick="abrirmenu('encuentros');" href="#">encuentros musicales y festivales</a>
<ul id="ul_encuentros" class="closed">
<li id="pirenaicos">encuentros pirenaicos</li>
<li id="canarias">festival de Canarias</li>
</ul>
</li>
<li><a href="#">viajes musicales</a></li>
</ul>
</div>
<div id="navegador2">
<a href="#" class="enlacenav">foro</a> |
<a href="#" class="enlacenav">buscar</a> |
<a href="#" class="enlacenav">contactar</a>
</div>
</div>
<div id="infonav">
<div id="bread">
<a href="#" class="enlacebread">encuentros</a> >
<a href="#" class="enlacebread">pirenaicos</a> >
<a href="#" class="enlacebread">pirieos classic</a> >
<a href="#" class="enlacebread">cursos</a> >
<a href="#" class="enlacebread"><strong>junior</strong></a>
</div>
<div id="fecha">
<script language="JavaScript">
<!--
var dia_de_hoy = Dia_semana(fecha.getDay()) + ", " + fecha.getDate() +
" de " + Dia_mes(fecha.getMonth()) + " de " + fecha.getFullYear();
document.write(dia_de_hoy);
//-->
</script>
</div>
</div>
<div id="cuerpo">
<div id="barratit">
<div class="titcapizq">encuentros ...</div>
<div class="titcapder">+ info</div>
<div class="titcapcen">pirineos classic junior</div>
</div>
<div id="contenido">
<div id="izquierdo">
<div id="menusec">
<ul class="open">
<li id="pirineos"><a onclick="abrirmenu('pirineos');" href="#">Pirineos Classic</a>
<ul id="ul_pirineos" class="closed">
<li id="cursos"><a onclick="abrirmenu('cursos');" href="#">> cursos</a>
<ul id="ul_cursos" class="closed">
<li id="junior"><a href="#">classic junior</a></li>
<li id="senior"><a href="#">classic senior</a></li>
<li id="jazz"><a href="#">classic jazz</a></li>
</ul>
</li>
<li id="festival"><a href="#">> festival</a></li>
<li id="festival"><a href="#">> historia</a></li>
</ul>
</li>
<li id="piano"><a href="#">Pianno aux Pyrènées</a></li>
<li id="otrasactiv"><a href="#">Otras actividades</a></li>
</ul>
</div>
<div class="logo">
En este artículo vamos a conocer la maquetación de paginas utilizan
</div>
</div>
<div id="derecho">
En este artículo vamos a conl todavocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.
</div>
<div id="centro">
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas eaa inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.
<p>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir...
</p>
</div>
</div>
<div id="navabajo">
<a href="#">inicio</a> |
<a href="#">encuentros</a> |
<a href="#">viajes</a> |
<a href="#">foro</a> |
<a href="#">contactar</a> |
<a href="#">mapa del sitio</a>
</div>
<div id="pie">
Pruebas de maquetación CSS © 2005 DesarrolloWeb.com
</div>
</div>
</div>
</body>
</html>
Estilos CSS
BODY {
background : #C0D9D9 url(imagenes/paper002.jpg) repeat;
font : 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
#contenedor{
text-align: left;
width: 750px;
margin: auto;
}
#borde{
border: 2px solid #cccccc;
text-aling:left;
width: 700px;
margin:auto;
}
#cabecera{
height : 106px;
width: 750px;
}
#navegadores{
position:relative;
padding : 0px 0px 35px 0px;
}
#navegador2{
color:#333366;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
padding : 4px 10px 0px 0px;
float:right;
}
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #0033CC;
text-decoration: none;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}
A.enlacebread, A.enlacebread:VISITED, A.enlacebread:ACTIVE, A.enlacebread:FOCUS, A.enlacebread:LINK{
color: #000000;
text-decoration: none;
}
A.enlacebread:HOVER{
color: #990033;
}
#menu {
top:3px;
left:0px;
float:left;
z-index:100;
position: absolute;
padding: 0px 0px 0px 0px;
margin-left:0px;
}
#infonav{
height : 25;
z-index:1;
clear:both;
}
#bread{
width:400px;
padding: 0px 0px 0px 10px;
float:left;
color: #000000;
font : 7pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-bottom: 8px;
clear:left;
}
#fecha{
margin-right: 0px;
padding : 0px 10px 0px 0px;
float:right;
color: #000000;
font : 7pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-bottom: 8px;
clear:right;
}
#cuerpo{
width:750px;
padding: 0px 0px 10px 0px;
background-color : #ffffff;
clear: left;
}
#pie{
clear : both;
font : 7pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #000000;
text-align : center;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}
#navabajo{
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
clear : both;
color : #cccccc;
text-align : center;
margin : 30px 10px 15px 10px;
}
#barratit{
font-size: 12pt;
font-weight:bold;
clear: both;
}
.titcapizq{
width: 150px;
color : #000000;
background-color : #ffffff;
padding: 15px 0px 2px 10px;
float: left;
}
.titcapder{
width: 150px;
color : #000000;
background-color : #ffffff;
padding: 15px 0px 2px 10px;
float: right;
}
.titcapcen{
width: auto;
margin-left:160px;
color : #ffffff;
background-color : #003366;
padding: 15px 0px 2px 10px;
border-color: #000000;
}
#contenido{
width: 750px;
background-color : #ffffff;
padding: 0px 0px 0px 0px;
}
#izquierdo{
width: 140px;
background-color: #FFFFFF;
padding: 0px 0px 0px 0px;
float: left;
}
#derecho{
width: 140px;
color : #ffffff;
background-color : #003366;
padding: 10px 10px 30px 10px;
float: right;
}
#centro{
margin-left:160px;
background-color: #ffffff;
width: 404px;
padding: 10px 10px 0px 10px;
}
.logo{
width: 140px;
background-color: #999900;
padding: 10px 10px 10px 10px;
color: #FFFFFF;
}
#menusec{
width: 140px;
background-color : #003366;
padding: 10px 10px 10px 10px;
}
#menusec li {
text-align: left;
color : #ffffff;
}
#menusec li a {
color:#FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menusec li a:hover {
background-color:#FFCC66;
color:#CC0033;
}
#submenus {
text-align: left;
font-size: 9pt;
color : #ffffff;
padding: 0px 0px 3px 0px;
}
#submenus2 {
text-align: left;
font-size: 8pt;
color : #ffffff;
padding: 5px 0px 5px 0px;
}
.open {
display: block;
cursor: pointer;
text-align: left;
font-size: 9pt;
color : #ffffff;
font-weight: bold;
padding: 0px 0px 10px 0px;
}
.open li {
padding: 0px 0px 7px 0px;
}
.closed {
display: none;
}
#cursos li {
font-size: 8pt;
padding: 2px 0px 2px 0px;
}
#pirineos li {
padding: 5px 0px 0px 14px;
}
#menupralist li {
display:inline;
list-style:none;
margin-right: 10px;
}
#menupral{
top:2px;
left:0px;
float:left;
z-index:100;
position: absolute;
margin-left:0px;
height: 1px;
}
#menupralist li a {
color:#000000;
text-decoration: none;
padding: 1px 10px 1px 10px;
margin-right: 5px;
background: #DDE;
border: 1px solid #778;
float:left;
}