Tema: Problema en centrar menu en CSS
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 24/08/2011, 12:06
Avatar de theizrael
theizrael
 
Fecha de Ingreso: agosto-2011
Ubicación: Cabo San Lucas, Baja California Sur, Mexico
Mensajes: 9
Antigüedad: 12 años, 8 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;}