Foros del Web » Creando para Internet » CSS »

Centrar este menu desplegable.

Estas en el tema de Centrar este menu desplegable. en el foro de CSS en Foros del Web. Buenas tardes a todos, les mando un saludo. Bueno en realidad yo se realmente poco de programación mas alla de lo basico, sin embargo buscando ...
  #1 (permalink)  
Antiguo 13/02/2010, 19:59
 
Fecha de Ingreso: febrero-2010
Mensajes: 1
Antigüedad: 7 años, 10 meses
Puntos: 0
Pregunta Centrar este menu desplegable.

Buenas tardes a todos, les mando un saludo.

Bueno en realidad yo se realmente poco de programación mas alla de lo basico, sin embargo buscando encontre por fin lo que buscaba, un menu desplegable horizontal perfecto para mi, excepto por una cosa, no esta centrado lo cual me es muy necesario.

Quizas alguien por aquí con verdaderos conocimientos sería tan amable de ayudarme diciendome un codigo y donde poner el mismo que pueda hacer que mi menu quede centrado. Dejo aquí el codigo de mi menu.

Archivo .css
Código:
.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}

#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
Archivo .js
Código:
stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
Codigo del Menu
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - Pro dropdown #1</title>
<meta name="Author" content="Stu Nicholls" />

<link rel="stylesheet" type="text/css" href="pro_drop_1/pro_drop_1.css" />

<script src="pro_drop_1/stuHover.js" type="text/javascript"></script>

</head>

<body>
<h1>Prueba Menu</h1>
<h2>Menu desplegable</h2>
<h3>4th November 2007</h3>

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="http://saintseiyayaoi.es.tl/" class="top_link"><span>Bienvenidos</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Recien llegados</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Registro</a>
					<ul>
						<li><a href="#nogo4">Registro</a></li>
						<li><a href="#nogo5">Login</a></li>
						<li><a href="#nogo6">Presentate</a></li>
					</ul>
			</li>
			<li class="mid"><a href="#nogo7" class="fly">Login</a>
					<ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><a href="#nogo11" class="fly">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Presentate</a></li>
						<li><a href="#nogo16" class="fly">Non standard</a>
							<ul>
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Presentate</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Comentarios</span></a>
		<ul class="sub">
			<li><a href="#nogo23">General</a></li>
			<li><a href="#nogo24">Otro 1</a></li>
			<li><a href="#nogo25">Otro 2</a></li>
			<li><a href="#nogo26">Otro 3</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">British</span></a>
		<ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales</a>
				<ul>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo33" class="fly">European</a>
						<ul>
							<li><a href="#nogo34" class="fly">British</a>
								<ul>
									<li><a href="#nogo35">London</a></li>
									<li><a href="#nogo36">Liverpool</a></li>
									<li><a href="#nogo37">Glasgow</a></li>
									<li><a href="#nogo38" class="fly">Bristol</a>
										<ul>
											<li><a href="#nogo39">Redland</a></li>
											<li><a href="#nogo40">Hanham</a></li>
											<li><a href="#nogo41">Eastville</a></li>
										</ul>
									</li>
									<li><a href="#nogo42">Cardiff</a></li>
									<li><a href="#nogo43">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#nogo44">French</a></li>
							<li><a href="#nogo45">German</a></li>
							<li><a href="#nogo46">Spanish</a></li>
						</ul>
					</li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Fanart</span></a>
		<ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span class="down">Otro Fanwork</span></a></li>
                <ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span class="down">Fans SSY</span></a></li>
                <ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
</ul>
<p>&copy; 2007 stunicholls.com</p>
</body>
</html>
Y eso es todo, estaria muy agradecida si pudieran ayudarme, de ante mano gracias para quien se interese...
  #2 (permalink)  
Antiguo 13/02/2010, 20:45
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Centrar este menu desplegable.

Código CSS:
Ver original
  1. #nav {
  2. margin: 0 auto;
  3. }
__________________
Grupo Telegram Docker en Español

Última edición por Carlangueitor; 14/02/2010 a las 20:01
  #3 (permalink)  
Antiguo 14/02/2010, 19:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Centrar este menu desplegable.

Cita:
Iniciado por Carlangueitor Ver Mensaje
Código CSS:
Ver original
  1. nav {
  2. margin: 0 auto;
  3. }
Vas a confundir al pobre chico, para empezar, olvidaste el "#" ...

Bien, ve tu código y para empezar, modifica esta parte agregando lo que está en negrita:

#nav {padding:0; margin:0 auto; list-style:none; [...]

Además, debido al tipo de menú, deberás agregarle un ancho para que esto funcione:

#nav {padding:0; margin:0 auto; width:600px; list-style:none; [...]

Modifica el ancho hasta que se ajuste correctamente a tu menú. Mucha suerte.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 14/02/2010, 20:01
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Centrar este menu desplegable.

Diablos!!, y yo decía que no dormir no afectaba, gracias por la corrección, ya lo arreglo

Saludos
__________________
Grupo Telegram Docker en Español

Etiquetas: desplegable
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 06:34.