Foros del Web » Creando para Internet » CSS »

Problema en centrar menu en CSS

Estas en el tema de Problema en centrar menu en CSS en el foro de CSS en Foros del Web. Buenas a todos, antes que nada quiero presentarme este es mi primer post, ahora bien mi priblema es el siguiente, tengo una pagina estructurada y ...
  #1 (permalink)  
Antiguo 24/08/2011, 13:06
Avatar de theizrael  
Fecha de Ingreso: agosto-2011
Ubicación: Cabo San Lucas, Baja California Sur, Mexico
Mensajes: 9
Antigüedad: 5 años, 3 meses
Puntos: 0
Exclamación Problema en centrar menu en CSS

Buenas a todos, antes que nada quiero presentarme este es mi primer post, ahora bien mi priblema es el siguiente, tengo una pagina estructurada y pasa que el menu que tengo en el sitio no lo eh podido centrar ni con CSS ni con HTML, ahora mismo les pego el html y el css

Código:
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Call-Mia.com</title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
	<link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <link rel="stylesheet" type="text/javascript" href="jquery.js" />
    
    <script>var _wau = _wau || []; _wau.push(["tab", "7fjypc9ux4kc", "0n9", "left-middle"]);(function() { var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/tab.js";document.getElementsByTagName("head")[0].appendChild(s);})();</script>
    
</head>
<body>
<div id="wrapper"><!-- #wrapper -->

	<header><!-- header -->
	  
  </header><!-- end of header -->
	
  <nav><!-- top nav in reverse order -->
		<div class="menu">
			<ul class="aligncenter" id="css3menu">

	<li class="topfirst"><a href="index.html" title="Inicio">Inicio</a></li>

	<li class="topitem"><a href="Contenidos.html" title="Contenidos"><span>Contenidos</span></a>

	<ul>

		<li class="subfirst"><a href="items.html" title="Items">Items</a></li>

		<li><a href="guias.html" title="Guias">Guias</a></li>	

	</ul>



	</li>

	<li class="topitem"><a href="Videos.html" title="Videos">Videos</a></li>

	<li class="topitem"><a href="imagenes.html" title="Imagenes">Imagenes</a></li>

	<li class="toplast"><a href="contacto.html" title="Contacto">Contacto</a></li>

</ul>

		</div>
	</nav><!-- end of top nav -->
	
	<section id="main"><!-- #main content and sidebar area -->
			<section id="content"><!-- #content -->
			
        		<article>
							<h2><a href="#">Bienvenido a Call-Mia.com</a></h2>
							<img src="images/Teemo-Render.png" alt="" width="109" height="122" class="alignright" />
							<p>Un lugar en el que aprenderas muchas cosas, desde los skills de los Champions inclullendo sus pasivos y ULTIMATES visitando las secciones correspondientes, Tambien puedes solicitar unirte al clan de <a href="http://www.call-mia.com">Call-Mia.com</a> para organizar partidas con amigos y tener buena comunicacion, nuevamente Bienvenido.</p>
							<p>&nbsp;</p>
			  </article>
						
        		<article>
							<h2><a href="#">Unirse al Grupo de jugadores Call-Mia</a></h2>
							<img src="images/Tryndamere-Render.png" alt="" width="265" height="245" class="alignleft" />
<p>Si quieres ser parte de este gran grupo de jugadores de &quot;League of legends&quot; tendras que entrar al area de chat general para organizar partidas (skype necesario)</p>
                            <ul>
                              <li>Nombre de Jugador:</li>
                              <li>Champion principal:</li>
                              <li>Nivel de Summoner:</li>
                              <li>ID de Skype:</li>
                            </ul>
<p>(solo jugadores de habla hispana)	</p>
</article>
						
			</section><!-- end of #content -->		<aside id="sidebar"><!-- sidebar -->
	

				<h3>Social</h3>
					<ul>
						<li><a href="http://twitter.com/theizrael" class="twitter-follow-button" data-show-count="false">Seguir @theizrael</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></li>
                        <li><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=209474082442249&amp;xfbml=1"></script><fb:like href="https://www.facebook.com/pages/Call-Miacom/182372985167323" send="true" layout="box_count" width="450" show_faces="false" action="like" colorscheme="dark" font=""></fb:like></li>
                        
					</ul>
                    
                    <h3>Chats</h3>
					<ul>
						<li><a href="chat_general.html">Chat General</a><a href="#"></a></li>
					</ul>

		</aside><!-- end of sidebar -->

	</section><!-- end of #main content and sidebar-->
	
		<footer>
		<section id="footer-area">

			<section id="footer-outer-block">
					<center>
                    
                    <aside class="footer-segment">
					  <h4></h4>
								<ul>
								</ul>
					</aside><!-- end of #second footer segment -->
                    
                    <aside class="footer-segment">
							<h4></h4>
								<ul>
								</ul>
					</aside><!-- end of #second footer segment -->
                    
                    <aside class="footer-segment">
							<h4>Mapa de sitio</h4>
								<ul>
									<li><a href="#">Mapa de sitio</a></li>
								</ul>
					</aside><!-- end of #third footer segment -->
					
					
                    
                    <aside class="footer-segment">
							<h4>Call - Mia</h4>
								<p>&copy; 2011 <a href="#">Call-mia.com</a> Derechos Reservados.</p>
								<p>webmaster: <a href="mailto:[email protected]">[email protected]</a></p>
					</aside><!-- end of #fourth footer segment -->

					
                    </center>

			</section><!-- end of footer-outer-block -->

		</section><!-- end of footer-area -->
  </footer>
	
</div><!-- #wrapper -->
</body>
</html>
El CSS lo pego en comment ya que no me deja tantas letras.

si alguien pudiera decirme m error (o errores) le agradeceria mucho, Gracias.
  #2 (permalink)  
Antiguo 24/08/2011, 13:06
Avatar de theizrael  
Fecha de Ingreso: agosto-2011
Ubicación: Cabo San Lucas, Baja California Sur, Mexico
Mensajes: 9
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Problema en centrar menu en CSS

y este es el CSS

Código:
/* reset */
* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}

body {
line-height: 1;
background-image:url(images/DominionBG.jpg); background-position:center; background-position:top; background-color:#030303;
background-repeat:no-repeat;
font-family: Garamond, Georgia, Times, 'Times New Roman', serif;
color: #666;
font-size: 16px;
line-height: 18px;
}
	
/* layout */

#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 367px;
margin-bottom: 10px;
}

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background-image:url(images/menu_bg.png);
}

header {
position: relative;
width: 940px;
height: 200px;
margin: 0 auto;
background-image:url(images/main_bg_lol.png);
}

#main {
width: 940px;
margin: 0 auto;
padding-top: 30px;
background: #292929;
overflow: hidden;
}

#content {
float: right;
width: 640px;
margin: 0 30px 10px 0;
border-left: 1px #520000 solid;
padding-left: 25px;
}

#sidebar {
float: left;
padding-left: 20px;
width: 220px;
}

footer {
width: 940px;
margin: 0 auto;
clear: both;
}

/* basics */

@font-face {
	font-family: 'CloisterBlackLight';
	src: url('CloisterBlack-webfont.eot');
	src: local('CloisterBlackLight'), url('CloisterBlack-webfont.woff') format('woff'), url('CloisterBlack-webfont.ttf') format('truetype'), url('CloisterBlack-webfont.svg#webfontURGgOlCQ') format('svg');
	font-weight: normal;
	font-style: normal;
}


h1,h2,h3,h4,h5,h6 {
font-weight: bold;
clear: both;
color: #bbb;
}

a:link, a:visited {
color:#FFAF51;
text-decoration: none;
}

a:hover, a:active {
color: #FFAF51;
text-decoration: underline;
}

p {
margin-bottom: 18px;
}

li {
padding-left: 5px;
}

/* nav */

nav .menu {
font-size: 16px;
font-weight: bold;
}

nav .menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}

nav .menu li {
display: block;
float: right;
}

nav .menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0px 15px;
text-decoration: none;
color:#FFAF51;
}

nav .menu a:hover {
text-decoration: underline;
}

/** HEADER */

header h1, header h2 {
margin: 0;
line-height: normal;
float: right;
width: 650px;
padding-right: 20px;
}

header h1 { 	
padding-top: 20px; 
font-family: 'CloisterBlackLight', Verdana, Arial, Helvetica, sans-serif;
font-size: 60px;
}

header h1 a:link, header h1 a:visited {
text-decoration: none;
text-shadow: 3px 3px 3px #B80D00;
}

header h1 a:hover { 
text-shadow: none; 
}

header h2 {
margin-top: 10px;
font-style: italic;
font-size: 14px;
}

#headerlogo {
	position: absolute;
	top: -18px;
	left: -36px;
	width: 262px;
	height: 262px;
}

/** ARTICLES **/
article img {
border: none;
}

#content p, ul, ol, hr {
margin-bottom: 24px;
}

#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}

#content h1, h2, h3, h4, h5, h6 {
margin: 0 0 20px 0;
line-height: 1.5em;
}

article h2 {
text-shadow: 2px 2px 2px #B80D00;
text-decoration: none;
}

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 10px;
margin-top: 4px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 10px;
margin-top: 4px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}

/* sidebar and footer widget blocks */

aside h3 {
font-size: 18px;
}

aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
}

aside li a {
display: block;
text-decoration: none;
}

aside li a:hover {
text-decoration: underline;
}

#footer-area {
	background-color: #494949;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#585858), to(#494949));
	background: -moz-linear-gradient(top, #585858 0%, #494949 100%);
	font-size: 90%;
	padding: 18px 0;
	overflow: hidden;
	text-align: center;
}

.footer-segment {
float: left;
margin-right: 20px;
margin-left: 20px;
width: 190px;
}

footer aside h4 {
font-size: 16px;
line-height: 1.5em;
}

footer a:link, footer a:visited {
color:#FFAF51;
}

footer p {
margin-top: -13px;
}



ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#000;background-image:url("menubk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#162436;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;-moz-box-shadow:0.7px 1px 1px #3E3E3E;-webkit-box-shadow:0.7px 1px 1px #3E3E3E;box-shadow:0.7px 1px 1px #3E3E3E;padding:0 9px 9px;background-color:#253A56;background-image:none;border-width:1px;border-style:solid;border-color:#162436;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:1px 1px 1px 0;
	display:block;
	font-size:0;
	float:left;
	text-align: center;
}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 1px;}
ul#css3menu ul>li{
	margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial,sans-serif;color:#cccccc;cursor:default;padding:10px;background-color:#17294b;background-image:url("menubk.png");background-position:0 50%;border-width:0px;border-style:none;border-color:#6655FF;}
ul#css3menu ul li{
	float:none;margin:9px 0 0;}
ul#css3menu ul a{
	text-align:left;padding:8px 0 0 0;background-color:#253A56;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#293344;font:13px Arial,sans-serif;color:#cccccc;text-decoration:none;}
ul#css3menu li:hover>a{
	background-color:#5484c3;border-color:#665500;border-style:none;font:bold 12px Arial,sans-serif;color:#ffffff;text-decoration:none;background-image:url("menubk.png");background-position:0 100%;}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:20px;width:24px;height:24px;}
ul#css3menu ul img{
	width:6px;height:12px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
	background-color:#253A56;background-image:none;border-style:solid;border-color:#293344;font:13px Arial,sans-serif;color:#ffffff;text-decoration:none;}
ul#css3menu li.topfirst>a{
	height:16px;line-height:16px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topfirst:hover>a{
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.topitem>a{
	height:16px;line-height:16px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topitem:hover>a{
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu._>li>a{
	padding:0;}
ul#css3menu li.subfirst>a{
	background-color:#253A56;background-image:none;border-width:0;border-style:none;padding:0;font:13px Arial,sans-serif;color:#cccccc;text-decoration:none;}
ul#css3menu li.subfirst:hover>a{
	background-color:#253A56;background-image:none;border-style:none;font:13px Arial,sans-serif;color:#ffffff;text-decoration:none;}
ul#css3menu li.toplast>a{
	height:16px;line-height:16px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.toplast:hover>a{
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
  #3 (permalink)  
Antiguo 24/08/2011, 13:18
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: Problema en centrar menu en CSS

Prueba colocando margin: 0 auto; en nav .menu ul

Saludos
  #4 (permalink)  
Antiguo 24/08/2011, 13:51
Avatar de theizrael  
Fecha de Ingreso: agosto-2011
Ubicación: Cabo San Lucas, Baja California Sur, Mexico
Mensajes: 9
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Problema en centrar menu en CSS

Cita:
Iniciado por Batan Ver Mensaje
Prueba colocando margin: 0 auto; en nav .menu ul

Saludos
Gracias Batan, me sirvió de mucho este código, cordiales saludos.

Etiquetas: nav
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 21:43.