Ayuda en UL, LI y A

[ColdFusion]

hola en mi web tengo las etiquetas de esta menera:

Código HTML:

 <div id="menu">
        <ul id="nav">
            <li><a href="ejemplo">inicio</a></li>
               <li><a href="ejemplo">otras paginas del wp</a></li>
        </ul>
    </div> 

y este es el CSS:

Código:

#menu {
  background: url(images/menu.png) no-repeat;
  width: 900px;
  height: 40px;
  margin: 15px 0 15px 0;
  padding: 1px 3px 2px 0;
}

#nav {
  list-style-type: none;
  margin:0 3px 0 0;
  padding: 0;
	height:30px;
	
}

#nav li {
  margin: 0 3px 0 0;
  display: inline;
  
  font-family: Arial;
  font-size: 12px;
  font-weight: lighter;
  text-transform: capitalize;
  padding: 0 10px 0 10px;
  
}

#nav li a {
  	display: block;
	width: auto;
	float: left;
  color: #DFDFDF;
  text-decoration: none;
  padding: 1px 6px 6px 1px;
  border-left: 1px #404040 solid;
}

#nav li a:hover {

  background-color:#000000;
}

Nesecito que el texto de cada enlace este centrado y dejar espacio entre cada border-left "Divisores" y que tenga un margen al inicio porque esta pegado..
y no se ve como deseo vean ustedes en el menu de arriba de mi web
http://edwinmunguia.co.nr/
Ayuda pliz

[Willy_N]

Añádele

Código CSS:

text-align:center;
 

al #nav li

A ver qué tal.

[ColdFusion]

pues eso seria una buena idea pero quiero centrar lo con los paddings y ademas nesecito separar los enlaces del inicio es como un margin pero no agarra por eso puse el codigo para ver si me lo reparan

[SDEK]

Hola,

Creo que el siguiente código cumple con lo que necesitas:

CSS:

Código:

@charset "utf-8";
/* CSS Document */

#menu {
  background: url(images/menu.png) no-repeat;
  width: 900px;
  height: 40px;
  margin: 15px 0 15px 0;
  padding: 1px 3px 2px 0;
}

#nav {
  list-style-type: none;
  margin:0 3px 0 0;
  padding: 0;
  height:30px;
	
}

#nav li {
	 
  font-family: Arial;
  font-size: 12px;
  font-weight: lighter;
  text-transform: capitalize;
  vertical-align:middle;
  margin: 0 0 0 10px;
  float:left;
  
  
}

#nav li a {
  	display: block;
	width: auto;
	float: left;
  color: #DFDFDF;
  text-decoration: none;
  border-left: 1px #404040 solid;
  text-align:center;
  margin:0 auto 0 0px;
  padding-left:10px;
}

#nav li a:hover {

  background-color:#000000;
}

Saludos,

--------------------

[Esck21]

No entiendo... yo veo la pagina bien. me estoy perdiendo de algo¿?

[SDEK]

Iniciado por Esck21

No entiendo... yo veo la pagina bien. me estoy perdiendo de algo¿?

Probablemente ya lo solucionó.

Saludos,

[ColdFusion]

Ok, use el codigo q me dio SDEK
pero aun asi no se ve como quiero vean
http://edwinmunguia.zobyhost.com/

el fondo sigue siendo el problema

[SDEK]

Iniciado por ColdFusion

Ok, use el codigo q me dio SDEK
pero aun asi no se ve como quiero vean
[url]http://edwinmunguia.zobyhost.com/[/url]

el fondo sigue siendo el problema

OK. ya entendi lo que necesitas. Aquí lo tienes:

Código:

@charset "utf-8";
/* CSS Document */

#menu {
  background: url(images/menu.png) no-repeat;
  width: 900px;
  height: 40px;
  margin: 15px 0 15px 0;
  padding: 1px 3px 2px 0;
}

#nav {
  list-style-type: none;
  margin:0 3px 0 0;
  padding: 0;
  height:30px;
	
}

#nav li {
	 
  font-family: Arial;
  font-size: 12px;
  font-weight: lighter;
  text-transform: capitalize;
  vertical-align:middle;
  margin: 0 0 0 10px;
  float:left;
 padding-left:0px;
padding-right:10px;

  
  
}

#nav li a {
  	display: block;
	width: 100%;
	float: left;
  color: #DFDFDF;
  text-decoration: none;
  border-left: 1px #404040 solid;
  text-align:center;
  margin:0 auto 0 0px;
  padding-left:10px;
padding-right:10px;
  margin: 0 0 0 10px;

}

#nav li a:hover {

  background-color:#000000;
width:100%;
  margin: 0 0 0 10px;

}

[ColdFusion]

SDEK ya agregue el codigo pero aun asi hay un problema, lo podes ver
en mi web;

los separadores stan muy alejados de los enlaces, bueno de los li