Foros del Web » Creando para Internet » CSS »

problema con menu horizontal

Estas en el tema de problema con menu horizontal en el foro de CSS en Foros del Web. 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? ...
  #1 (permalink)  
Antiguo 27/09/2005, 04:04
 
Fecha de Ingreso: marzo-2003
Mensajes: 5
Antigüedad: 14 años, 8 meses
Puntos: 0
Pregunta problema con menu horizontal

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;
}
  #2 (permalink)  
Antiguo 27/09/2005, 19:17
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
De verdad piensas que alguien va a leer todo eso?
Creo que deberias postear solo el code necesario, de la parte especifica que tiene el problema.
  #3 (permalink)  
Antiguo 28/09/2005, 02:55
 
Fecha de Ingreso: marzo-2003
Mensajes: 5
Antigüedad: 14 años, 8 meses
Puntos: 0
menu descolocado con Firefox y Netscape

Hola a todos,
¿A alguien se le ocurre porqué este menu aparece correctamente en IE pero completamente descolocado en Firefox y Netscape? Muchas gracias

<html>
<head>
<script type="text/javascript">
<!--
function abrirmenu(id){
ul = "ul_" + id;
ulElement = document.getElementById(ul);
if (ulElement){
if (ulElement.className == 'closed'){
ulElement.className = "open";
}else{
ulElement.className = "closed";
}
}
}
//-->
</script>

<style type="text/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;
}


#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;
}

.open {
display: block;
cursor: pointer;
text-align: left;
font-size: 9pt;
color : #000000;
padding: 0px 0px 10px 0px;
}

.open li {
padding: 0px 0px 7px 0px;
}

.closed {
display: none;
}

#menupralist li {
display:inline;
list-style:none;
margin-right: 0px;
}

#menupral{
cursor:pointer;
top:2px;
left:0px;
float:left;
z-index:100;
position: absolute;
margin-left:0px;
}

#menupralist li a {
font-size: 10pt;
color:#000000;
font-weight: bold;
text-decoration: none;
padding: 3px 15px 3px 15px;
margin-right: 3px;
background: #DDE;
border: 1px solid #778;
float:left;
}

#encuentros li {
display:block;
border: 1px solid #778;
margin-top:1px;
}

#ul_encuentros li{
padding: 3px 0px 3px 10px;
width: 266px;
background: #DDE;
}

#ul_encuentros{
float:left;
margin-left:37px;
padding: 3px 0px 5px 0px;
clear:left;
}

</style>
</head>

<body>
<div id="contenedor">
<div id="cabecera"><img src="imagenes/cabecera.jpg" width="750" height="106" border="0">
</div>

<div id="navegadores">

<div id="menupral">
<ul id="menupralist">
<li><a href="#">inicio</a></li>
<li id="encuentros"><a onmouseover="abrirmenu('encuentros');">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>
</body>
</html>
  #4 (permalink)  
Antiguo 28/09/2005, 14:15
Avatar de haron  
Fecha de Ingreso: febrero-2004
Ubicación: Cádiz (refinitivo)
Mensajes: 632
Antigüedad: 13 años, 9 meses
Puntos: 3
puede ser por muchas razones. de todas formas te puedo recomendar una pagina para aprender a hacer menus chulos:

http://css.maxdesign.com.au/index.htm
__________________
Si ocurre algo importante, estamos afuera fumándonos unos cigarritos.
  #5 (permalink)  
Antiguo 28/09/2005, 14:54
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Cita:
Iniciado por ramm
De verdad piensas que alguien va a leer todo eso?
Creo que deberias postear solo el code necesario, de la parte especifica que tiene el problema.
JAjaja, te doy el codigo de un programa q hice?? haber si tu me lo lees todo y me dices el error.
MAs facil explica tu problema y pon un link para q se vea q es lo q pasa, en vez de poner todo ese codigo
  #6 (permalink)  
Antiguo 28/09/2005, 16:10
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Cita:
var dia_de_hoy = Dia_semana(fecha.getDay()) + ", " + fecha.getDate() +
" de " + Dia_mes(fecha.getMonth()) + " de " + fecha.getFullYear();
document.write(dia_de_hoy);
este script no funciona ," Dia_semana" ,"fecha" "Dia_mes", no estan definidas.
  #7 (permalink)  
Antiguo 29/09/2005, 04:06
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
¿programeitor que tiene que ver eso con la pregunta?


jisert:
primero dime de donde te copiaste esos scripts y te dire si son o no compatibles,, el segundo es compatible con ie, unicamente, el problema esta en la inline que no la acepta mozilla y el script que mueve el tamaño del layer y hace que se mueva hacia abajo el bloque 3


lo que no entiendo es para que, has puesto el codigo de una web entera, solo pega el script directo, primero prueba antes de aplicarlo, y si lo pegas aqui da las partes que son necesarias para correrlo no esperes que limpiemos el codigo del resto de la basura que para saber cada cosa esta en chino.
  #8 (permalink)  
Antiguo 29/09/2005, 16:15
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
He probado la pagina en IE, los menus se despliegan, ese script me da error..
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 17:09.