Foros del Web » Creando para Internet » CSS »

menu desplegable (descoloca todo y IE no se ve)

Estas en el tema de menu desplegable (descoloca todo y IE no se ve) en el foro de CSS en Foros del Web. Buenas, pues primero contaros que estoy empezando y la teoria la tengo pienso que bastante bien, pero a la hora de la practica es cuando ...
  #1 (permalink)  
Antiguo 22/11/2010, 07:55
 
Fecha de Ingreso: noviembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
menu desplegable (descoloca todo y IE no se ve)

Buenas, pues primero contaros que estoy empezando y la teoria la tengo pienso que bastante bien, pero a la hora de la practica es cuando fallo... bueno al lio.

Estoy haciendo una pagina HTML+CSS y tengo el problema al introducir en la 'cabecera' un menu desplegable (vertical).

El primer fallo es que en IE no hace ni el 'amago' de mostrar el desplegable....

El segundo fallo y el que mas me jode es que si desplazo el 'menu' donde tiene que ir (es decir a la parte baja de la cabecera) mueve todas las div del contenedor... llevo horas y horas pegandome....

El tercer pero menos importante es como narices lo cuadro si el menu lo coloco en el centro de la pag en Chrome, Firefox, Opera todo OK, pero en IE nunca que igual (suele aparecer mas a la izq).

Os paso el 'codigo' a ver si podeis abrirme los ojos que ya nose que hacer.
Tambien os paso la 'cabecera.gif' para que veais donde me gustaria poner el menu que no lo consigo.

Imagen
[URL="http://img813.imageshack.us/img813/1117/cabecera.gif"]http://img813.imageshack.us/img813/1117/cabecera.gif[/URL]

HTML
Código HTML:
<HTML>

	<HEAD>	
		
		<TITLE> puto IE y medidas </TITLE>
	
		<link rel="stylesheet" type="text/css" href="css/menu.css" title="style" />
		<script type="text/javascript" src="js/codigo.js"></script>
	
	</HEAD>


	<BODY>	
	
	<div id="contenedor">
	
		<div id="cabecera">
			<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="/menu/includes/ie6.css" media="screen"/> <![endif]-->
			<div class="wrapper1">
				<div class="wrapper"  style="width:600px;">
					<div class="nav-wrapper">
						<div class="nav-left"></div>
						<div class="nav">
							<ul id="navigation" style="width:538px";>
			 
								<li class="#">
									<a href="index.html" target="_self">
										<span class="menu-left"></span>
										<span class="menu-mid">INICIO</span>
										<span class="menu-right"></span>
									</a>
								</li>
			 
								<li class="#">
									<a href="productos.html" target="_self">
										<span class="menu-left"></span>
										<span class="menu-mid">PRODUCTOS</span>
										<span class="menu-right"></span>
									</a>
									<div class="sub">
										<ul>
													<li>
												<a href="pescado.html" target="_self">PESCADO</a>
											</li>
													<li>
												<a href="marisco.html" target="_self">MARISCO</a>
											</li>
													<li>
												<a href="ahumados.html" target="_self">AHUMADOS</a>
											</li>
													<li>
												<a href="precocinado.html" target="_self">PRECOCINADO</a>
											</li>
													<li>
												<a href="postres.html" target="_self">POSTRES</a>
											</li>
										</ul>
								</li>
			 
								<li class="#">
									<a href="ofertas.html" target="_self">
										<span class="menu-left"></span>
										<span class="menu-mid">OFERTAS</span>
										<span class="menu-right"></span>
									</a>
								</li>
			 
								<li class="#">
									<a href="informacion.html" target="_self">
										<span class="menu-left"></span>
										<span class="menu-mid">INFORMACIÓN</span>
										<span class="menu-right"></span>
									</a>
								</li>

							</ul>
						</div>
						<div class="nav-right"></div>
					<br><br>
				 </div>
				</div>
		</div>

			
			<div id="dosIzq">	
		<p>sdfsdfsdf dfsdfsdfdfsdfsdfdfsdfsdf dfsdfsdfdfsdfsdf dfsdfsdfdfsdfsdf  dfsdfsdf
		</p>
			</div>
		
			
			<div id="dosIzqIzq">
			
				centro
			
			</div>
			
			
			<div id="dosIzqDer">
			
				derecha
			 
			</div>
			
			
		<div id="pie">
			
			<ul id="pieOpciones">
				<li><a href="enlaces.html">Enlaces</a> </li>
				<li><a href="formulario.html">Contacto</a> </li>			
			</ul>
			
		</div> <!-- Pie pagina -->

	</div> <!-- contenedor -->	
					
		
		<!-- CLICKY analisis web visita
		<a title="Real Time Web Analytics" href="http://getclicky.com/66355352"><img alt="Real Time Web Analytics" src="http://static.getclicky.com/media/links/badge.gif" border="0" /></a>
		<script src="http://static.getclicky.com/js" type="text/javascript"></script>
		<script type="text/javascript">clicky.init(66355352);</script>
		<noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66355352ns.gif" /></p></noscript>
		-->
				
					 
		<div class="losHs">
			<h1>tienda congelados, tienda congelados online, tienda congelados Madrid, productos congelados online, productos congelados Madrid,
				marisco congelado, verdura congelada, precocinado congelado, pescado congelado, Madrid, congelados vicky,
			</h1>
			<h2>tienda congelados, tienda congelados online, tienda congelados Madrid, productos congelados online, productos congelados Madrid,
				marisco congelado, verdura congelada, precocinado congelado, pescado congelado, Madrid, congelados vicky,
			</h2>
		</div>
		
	
				
	</BODY>




</HTML> 
CSS
Código CSS:
Ver original
  1. body{margin:0 auto; text-align:center; font-size:15px; font-family:Verdana; background-color:#fff; color:#fff;}
  2.  
  3. a{color:#f00; text-decoration:none;}
  4. ul {text-decoration:none; list-style:none}
  5. li {text-decoration:none; list-style:none }
  6.  
  7. #contenedor{width:1024px; height:1500px;    border:none; text-align:left; margin:0 auto; background-color:#fff;}
  8.  
  9. #cabecera{width:1024px; height:180px; background:url(../images/cabecera.gif) no-repeat center top; float:left;}
  10.  
  11. #dosIzq{width:400px; height:1300px; background-color:#b55; float:left;}
  12.  
  13. #dosIzqIzq{width:400px; height:1300px;  background-color:#5b5; float:left;}
  14.  
  15. #dosIzqDer{ width:224px; height:1300px; background-color:#55b; float:left;}
  16.  
  17. .losHs {    float:left; margin:0; padding:0; text-indent:-999999px;}
  18.  
  19.  
  20. /* ---------------------------    pie   ---------------------------   */
  21.  
  22. #pie{width:1024px; height:50px; float:left; background:url(../images/footCongelados1024.gif) no-repeat center top; color:#fff;}
  23. #pieOpciones {color:#fff; margin-top:17px; margin-left:850px; }
  24. #pieOpciones li {font-family: Arial, sans-serif;    font-weight:bold; font-size:11px; margin-right:1em; padding:0.4em; display: inline; /*display: inline; <---Solution for bug IE6 */ }
  25. #pieOpciones li span {margin-left:20px; font-size:11px; }
  26. #pieOpciones li a {color:#fff;}
  27. #pieOpciones li a:hover {color:#0B0B61;}
  28.  
  29.  
  30.  
  31. /*#menuProductos li a{visibility: hidden; list-style:none;}*/
  32.  
  33. /* ---------------------------    Menu desplegable 'PRODUCTOS'   ---------------------------   */
  34.  
  35.  
  36. /******************************************/
  37.  
  38.  
  39. /* ------------------- MENU EXTENSIBLE ---------------------- */
  40.  
  41. .wrapper1{color: transparent;}
  42.    
  43.     .wrapper1 a{    color: #fff; text-decoration: none;}
  44.     .wrapper1 a:hover {color: #f00;}
  45.     /*.wrapper1 p {margin: 0 0 17px; padding: 0;line-height: 18px;  } */
  46.    
  47. .wrapper {/*width: 710px;*/margin: 0px auto;}
  48. .nav {background:transparent; float: left;}
  49. .nev-wrapper {clear: both; float: left;}
  50.  
  51.  
  52. .nav ul {   /*width: 648px;*/height: 150px;float: left;margin: 0;padding-top: 3px;list-style: none;font-size: 15px; font-weight:bold;}
  53. .nav li {   float: left;padding: 0 7px; background:transparent; position: relative; z-index: 1;}
  54. .nav li.last {background:none;}
  55. .nav li:hover {z-index:2;}
  56. .nav li a {display: block;  line-height: 38px; overflow: hidden;float: left;}
  57.  
  58. /* tamanio de tecla del 'menu' */
  59. a .menu-mid {background:transparent;height: 32px;line-height: 35px;display: block;float: left;}
  60. /* separacion lateral 'menu' */
  61. a .menu-right { background: transparent;width: 20px;height: 32px;line-height: 35px; display: block; float: left;}
  62.  
  63. .nav li a:hover .menu-left,
  64. .nav li.active a .menu-left,
  65. .nav li:hover a .menu-left,
  66. .nav li a:hover .menu-mid,
  67. .nav li.active a .menu-mid,
  68. .nav li:hover a .menu-mid,
  69. .nav li a:hover .menu-right,
  70. .nav li.active a .menu-right,
  71. .nav li:hover a .menu-right {background-position: 0 -37px;line-height: 35px;}
  72.  
  73. .nav li a:hover,.nav li.active a,
  74. .nav li.hover a,
  75. .nav li:hover a {color: #0B0B61;} /* letra menu :hover */
  76.  
  77. .nav li:hover .sub,.nav li.hover .sub {display:block;}
  78. .nav li .sub {  display: none;  position: absolute; top: 30px; left: 2px; background: #00a; width: 150px; padding-top: 9px;} /* menu desplegable */
  79. .nav li ul { background:#00a; width: 130px; height: auto;margin: 0; padding: 0 12px 10px; list-style: none; font-size: 14px;}
  80. .nav li:hover li,
  81. .nav li.active li { width: 100%; padding: 1px 0 2px; background: none !important;}
  82. .nav li:hover li a,
  83. .nav li.active li a {color: #fff;background: none !important;line-height: normal;width: 130px;padding: 8px 3px 3px;text-indent: 1px;}/* letra menu desplegable */
  84. .nav li:hover li a:hover, .nav li.active li a:hover {color: #FF8000;background: #00a !important;text-decoration: none;line-height: normal;}
  85.  
  86. /*Internet Explorer*/
  87. .nav li li a:hover, .nav li li a:hover {    color: #FF8000; background: #00a !important;text-decoration: none;  line-height: normal;}
  88.  
  89. /**/
  90. .nav .btm-bg {background: #f00; no-repeat; width: 205px;height: 9px;overflow: hidden;clear: both;} /* NOSE QUE HACE*/




Muchisimas gracias
  #2 (permalink)  
Antiguo 22/11/2010, 12:32
 
Fecha de Ingreso: noviembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Respuesta: menu desplegable (descoloca todo y IE no se ve)

Bueno llevo toda la tarde probando otros Menus desplegables porque ya no sabia que hacer con este y no encuentro ningune que funcione bien en IE, ¿me podeis recomendar alguno?

Gracias
  #3 (permalink)  
Antiguo 22/11/2010, 15:33
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: menu desplegable (descoloca todo y IE no se ve)

Hola:

En las FAQ's de CSS hay varios ejemplos de menús desplegables que funcionan en todos los navegadores.

Saludos.

  #4 (permalink)  
Antiguo 24/11/2010, 06:56
 
Fecha de Ingreso: noviembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Respuesta: menu desplegable (descoloca todo y IE no se ve)

Gracias Jomaruro, alfinal con esos del FAQ CSS no conseguí que funcionaran bien en IE6 , asique e optado por hacer uno con scroll de javascript, aunq sea mas complicado no da tanto fallo. ;)

Etiquetas: desplegable, todo
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 09:11.