Foros del Web » Creando para Internet » CSS »

Ayuda en UL, LI y A

Estas en el tema de Ayuda en UL, LI y A en el foro de CSS en Foros del Web. hola en mi web tengo las etiquetas de esta menera: Código HTML: <div id= "menu" > <ul id= "nav" > <li> <a href= "ejemplo" > ...
  #1 (permalink)  
Antiguo 31/12/2009, 15:04
Avatar de ColdFusion  
Fecha de Ingreso: octubre-2008
Ubicación: Tocoa, Colon Honduras C.A.
Mensajes: 419
Antigüedad: 9 años, 1 mes
Puntos: 9
Ayuda en UL, LI y A

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
  #2 (permalink)  
Antiguo 31/12/2009, 15:28
Avatar de Willy_N  
Fecha de Ingreso: diciembre-2009
Ubicación: Cádiz
Mensajes: 334
Antigüedad: 8 años
Puntos: 18
Respuesta: Ayuda en UL, LI y A

Añádele
Código CSS:
Ver original
  1. text-align:center;
al #nav li

A ver qué tal.
  #3 (permalink)  
Antiguo 31/12/2009, 18:11
Avatar de ColdFusion  
Fecha de Ingreso: octubre-2008
Ubicación: Tocoa, Colon Honduras C.A.
Mensajes: 419
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Ayuda en UL, LI y A

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
  #4 (permalink)  
Antiguo 31/12/2009, 19:59
Avatar de SDEK  
Fecha de Ingreso: diciembre-2009
Ubicación: MX
Mensajes: 156
Antigüedad: 8 años
Puntos: 8
Respuesta: Ayuda en UL, LI y A

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,

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

Última edición por tunait; 03/01/2010 a las 13:39
  #5 (permalink)  
Antiguo 31/12/2009, 20:15
Avatar de Esck21  
Fecha de Ingreso: septiembre-2009
Mensajes: 50
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Ayuda en UL, LI y A

No entiendo... yo veo la pagina bien. me estoy perdiendo de algo¿?
  #6 (permalink)  
Antiguo 31/12/2009, 21:08
Avatar de SDEK  
Fecha de Ingreso: diciembre-2009
Ubicación: MX
Mensajes: 156
Antigüedad: 8 años
Puntos: 8
Respuesta: Ayuda en UL, LI y A

Cita:
Iniciado por Esck21 Ver Mensaje
No entiendo... yo veo la pagina bien. me estoy perdiendo de algo¿?
Probablemente ya lo solucionó.

Saludos,

Última edición por tunait; 03/01/2010 a las 13:39
  #7 (permalink)  
Antiguo 02/01/2010, 13:10
Avatar de ColdFusion  
Fecha de Ingreso: octubre-2008
Ubicación: Tocoa, Colon Honduras C.A.
Mensajes: 419
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Ayuda en UL, LI y A

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
  #8 (permalink)  
Antiguo 02/01/2010, 17:28
Avatar de SDEK  
Fecha de Ingreso: diciembre-2009
Ubicación: MX
Mensajes: 156
Antigüedad: 8 años
Puntos: 8
Respuesta: Ayuda en UL, LI y A

Cita:
Iniciado por ColdFusion Ver Mensaje
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;

}
  #9 (permalink)  
Antiguo 03/01/2010, 10:15
Avatar de ColdFusion  
Fecha de Ingreso: octubre-2008
Ubicación: Tocoa, Colon Honduras C.A.
Mensajes: 419
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Ayuda en UL, LI y A

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
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 05:16.