Foros del Web » Creando para Internet » CSS »

Menu vertical y menu horizontal en un solo css no funciona

 Estas en el tema de Menu vertical y menu horizontal en un solo css no funciona en el foro de CSS en Foros del Web. Hola a todos, tengo un problema, tengo 2 menus en mi pagina y uno de ellos no me funciona en IE despues de añadir el ...
  #1 (permalink)  
Antiguo 09/07/2008, 02:47
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 5 meses
Puntos: 2
Menu vertical y menu horizontal en un solo css no funciona
Hola a todos, tengo un problema, tengo 2 menus en mi pagina y uno de ellos no me funciona en IE despues de añadir el segundo; me explico:

Tenía un un menu vertical css:

Código: 
/* Menu Ctegories */

ul.catmenu {

margin: 0;

padding: 0;

list-style: none;

width: 170px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}



ul.catmenu li.catmenu {

position: relative;

}



li.catmenu ul.catmenu {

position: absolute;

left: 169px; /* Set 1px less than menu width */

top: 0;

display: none;

}



/* Styles for Menu Items */

ul.catmenu li.catmenu a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc; /* IE6 Bug */

border-bottom: 0;

}



/* Styles for Menu Items hover */

ul.catmenu li.catmenu a:hover {

display: block;

text-decoration: none;

color: #777;

background: #C7D0A6; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc; /* IE6 Bug */

border-bottom: 0;

}







/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */



li.catmenu:hover ul.catmenu, li.catmenu.over ul.catmenu { display: block; } /* The magic */



body { 

font: normal 11px verdana; behavior:url("/tienda/templates/deafault/csshover.htc");

} 



li.catmenu:hover ul.catmenu ul.catmenu, li.catmenu.over ul.catmenu ul.catmenu {display: none;} /* ‘¯àïâ*âì ¯®€¬¥*î 3-£® ã஢*ï */ 

ul.catmenu ul.catmenu li.catmenu:hover ul.catmenu, ul.catmenu ul.catmenu li.catmenu.over ul.catmenu {display: block;} /* ®ª*§*âì ¯®€¬¥*î 3-£® ã஢*ï */



/* Menu Ctegories */
Y me funcionaba perfectamente en Firefox, opera, ie6, vamos todo;

Pero luego añadi un menu horizontal a mi web:

Código: 
/*menu horizontal*/



.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}

.menu1 li {float:left;}

.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}

.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}

.menu1 li.current a {color:#fff; background:url(images/button3.gif);}

.menu1 li.current a b {background:url(images/button3.gif) no-repeat right top;}

.menu1 li a:hover {color:#fff; background:#000 url(images/button2.gif);}

.menu1 li a:hover b {background:url(images/button2.gif) no-repeat right top;}

.menu1 li.current a:hover {color:#fff; background:#000 url(images/button3.gif); cursor:default;}

.menu1 li.current a:hover b {background:url(images/button3.gif) no-repeat right top;}
.menu1 li.espacio a {float:right;}

.menu1 li.espacio a b {}

.usuario {
	padding: 0px 20px 4px 0px;

	font-size:11px;

	font-weight:bold;

	color:#000;
	float:right; 
	height:35px; 
	line-height:35px; 
	color:#fff; 
	text-decoration:none; 
	font-size:11px;
}

/*menu horizontal*/
Cuando añadi este segundo menu, el primero (vertical), me dejo de funcionar en ie6-7, no se por que, no lo consigo solucionar. Alguna idea...?

Gracias, Salu2.
  #2 (permalink)  
Antiguo 09/07/2008, 02:55
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
Por mi parte, sin ver el html es bastante difícil imaginarlo, porque en principio parece que un menú con el otro no tienen nada que ver.

Mikel.
  #3 (permalink)  
Antiguo 09/07/2008, 03:22
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
Ambos 2 están en la misma wen, aunque son archivos distintos:

1 familias.php
2. top_left.php

la web es:

www.pcrednet.com

Solo falla con ie6-7
El problema viene porque para que el menu funcione en ie6-7 hace falta un archivo: csshovert.htc; ya que en el resto de navegadores funciona sin ese archivo.

Saludos.
  #4 (permalink)  
Antiguo 09/07/2008, 03:57
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
No veo ninguno de esos dos archivos (familias.php top_left.php)

Pero si ambos menús dependen del htc para funcionar, el problema debe de estar ahí.

Mikel.
  #5 (permalink)  
Antiguo 09/07/2008, 04:13
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
He visto en el foro que hay menus mas sencillos y que funcionan con todos los navegadores, creo que utilizare estos para evitar mas problemas

En cuanto haya migrado mi menu horizontal al nuevo lo comunicare para que lo sepais.


Saludos.
Última edición por enjuto_9; 09/07/2008 a las 14:44
  #6 (permalink)  
Antiguo 10/07/2008, 02:07
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
Expongo todo el codigo, html y css para ver se puede solucionar.

Top_left.php < (menu1)
Código: 
function navTop()
	{
		$codigo = '<ul class="menu1">';

		$codigo .= '<li><a class="inv" href="'._WEB_ROOT.'"><b>'.strtolower(_INICIO).'</b></a></li>';
		$codigo .= '<li><a href="'._WEB_ROOT.'general/contactar.php"><b>'.strtolower(_CONTACTAR).'</b></a></li>';	
		$codigo .= '<li><a href="'._WEB_ROOT.'general/cesta.php"><b>'.strtolower(_VER_CESTA).'</b></a>';

//Login-Logout		
		
		if (!isset($_SESSION["codCliente"]))
			$codigo .= '<li><a href="'._WEB_ROOT_SSL.'cuenta/login.php"><b>'.Login.'</b></a></li>';
		
		if (isset($_SESSION["codCliente"]))
			$codigo .= '<li><a href="'._WEB_ROOT.'/cuenta/salir_sesion.php"><b>'.strtolower(_SALIR_SESION).'</b></a></li>';
		if (isset($_SESSION["codCliente"]))
		$codigo .= '<li class="espacio"><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>';
		if (isset($_SESSION["codCliente"]))
		$codigo .= '<li class="espacio"><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>';
		
		if (isset($_SESSION["codCliente"]))
			$codigo .= '<li><a href="'._WEB_ROOT_SSL.'cuenta/login.php" ><b>'.strtolower(_MI_CUENTA).'</b></a></li>';
		if (isset($_SESSION["codCliente"]))
		$codigo .= '<li><a href="'._WEB_ROOT_SSL.'cuenta/favoritos.php"><b>'.strtolower(_FAVORITOS).'</b></a></li>';
	
		if (isset($_SESSION["codCliente"]))
		$codigo .= '<div class="usuario" valign="bottom"><b>'.strtolower(_BIENVENIDO).'&nbsp;&nbsp;'.$this->nombreCliente().'</b></div>';
		
		$codigo .= '</ul>';
			
		echo $codigo;
	}
familias.php < menu

Código: 
$codigoMod .= '<div id="menu">
				<ul>';

$codigoMod .= '<li class="nivel1"><a href="'._WEB_ROOT.'catalogo/articulos.php?fam='.$codFamilia.'" class="nivel1" >'.$descripcion.'</a>';
			$codigoMod .= '<!--[if IE]><a href="'._WEB_ROOT.'catalogo/articulos.php?fam='.$codFamilia.'" class="nivel1ie">'.$descripcion.'<table class="falsa"><tr><td>
				<![endif]-->';
			$codigoMod .= '<ul>';

$codigo .= '<li class="primera"><a href="'._WEB_ROOT.'catalogo/articulos.php?fam='.$row["codfamilia"].'">';
			$codigo .= $descripcion;
			$codigo .= '</a></li>';
			$codigoMod .= '</ul>';
			$codigoMod .= '<!--[if IE]></td></tr></table></a><![endif]-->';
			$codigoMod .= '</li>';
                        $codigoMod .= '</ul></div>';
estilos.css < hoja de estilos

Código: 
/*Menu vertical familias*/


#menu {  text-align: left;
font-size: 0.7em;
width: 130px;
margin: 0px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 { 
width: 120px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
background-color: #6CC;
color: #000;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 121px;top:-1px!important;top: -31px;
}
#menu ul li ul li a {width: 160px;
background-color: #6CC;
color: #000;
}
#menu ul li ul li a:hover {position: relative;
background-color: #399;
color: #FFF;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}



/*menu horizontal*/



.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}

.menu1 li {float:left;}

.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}

.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}

.menu1 li.current a {color:#fff; background:url(images/button3.gif);}

.menu1 li.current a b {background:url(images/button3.gif) no-repeat right top;}

.menu1 li a:hover {color:#fff; background:#000 url(images/button2.gif);}

.menu1 li a:hover b {background:url(images/button2.gif) no-repeat right top;}

.menu1 li.current a:hover {color:#fff; background:#000 url(images/button3.gif); cursor:default;}

.menu1 li.current a:hover b {background:url(images/button3.gif) no-repeat right top;}
.menu1 li.espacio a {float:right;}

.menu1 li.espacio a b {}

.usuario {
	padding: 0px 20px 4px 0px;

	font-size:11px;

	font-weight:bold;

	color:#000;
	float:right; 
	height:35px; 
	line-height:35px; 
	color:#fff; 
	text-decoration:none; 
	font-size:11px;
}

/*menu horizontal*/
Y en el HEAD:

Código: 
		<link rel="stylesheet" href="'._WEB_ROOT.'templates/'._TEMPLATE.'/estilos.css" type="text/css">
		<!--[if IE 6]><style>#menu ul li.nivel1 {margin-bottom:-1px}</style><![endif]-->
		<!--[if IE 7]><style>#menu ul li.nivel1 {margin-bottom:-2px}</style><![endif]-->
La página es:

http://demo.pcrednet.com/tienda


Con esta configuración me funciona el menu horizontal pero el vertical no, el vertical solo funciona si quito del css la parte de menu horizontal.

Me tiene desesperado...
No se que mas

Ayuda!!!
Salu2.
  #7 (permalink)  
Antiguo 10/07/2008, 05:09
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 2 meses
Puntos: 280
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
En un primer vistazo del código de tu página, te puedo decir un par de cosas:

1.- El menú primero (horizontal) lo has encajado en la tabla después de un tr sin td:

Cita:
<table class="cuerpo" cellspacing=0 cellpadding=0 width="100%" height="100%"><tr><ul class="menu1">
lo cual no debe hacerse, ya que todo contenido de una tabla debe estar dentro de algún td.

2.- En el segundo menú, veo que has usado uno de los de las FAQ, pero donde yo ponía <!--[if lte IE 6] en los comentarios condicionales de cada subgrupo (igual o menor que el 6, porque en el 7 funciona sin problema), tu has puesto <!--[if IE], y creo que esto te dará problemas.

Corrige lo que te digo, si te parece, y vemos qué ocurre entonces.

Mikel.
  #8 (permalink)  
Antiguo 10/07/2008, 09:42
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
Ya esta cambiado, y sigue igual

A mi no me va ni con ie7

Voy a soñar con php...

Gracias, de todos modos!!!
  #9 (permalink)  
Antiguo 10/07/2008, 10:54
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 5 meses
Puntos: 2
Respuesta: Menu vertical y menu horizontal en un solo css no funciona
Cita:
Iniciado por Mikmoro Ver Mensaje
En un primer vistazo del código de tu página, te puedo decir un par de cosas:

1.- El menú primero (horizontal) lo has encajado en la tabla después de un tr sin td:



lo cual no debe hacerse, ya que todo contenido de una tabla debe estar dentro de algún td.

2.- En el segundo menú, veo que has usado uno de los de las FAQ, pero donde yo ponía <!--[if lte IE 6] en los comentarios condicionales de cada subgrupo (igual o menor que el 6, porque en el 7 funciona sin problema), tu has puesto <!--[if IE], y creo que esto te dará problemas.

Corrige lo que te digo, si te parece, y vemos qué ocurre entonces.

Mikel.
solucionado:

En cuanto he puesto el menu1 bien, es decir <tr><td><ul><li></li></ul></td></tr>
Se ha solucionado.

Muchas gracias a todos!!!

Esta corregido en http://www.pcrednet.com


SAlu2.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:11.