codigo simple..pero no me funciona :(

[ras_chalo]

hola, tengo una duda al realizar un pequeño codigo....

tengo esto men el html:

Código HTML:

<div id="Menu">                                
 <a class="inicio"  href="index.html"><span>Inicio</span></a>
 <a class="services" ref="QuienesSomos.html">span>Con&oacute;zcanos</span></a>
  <a class="services" href="servicio.html"><span>Servicios</span></a>
  <a class="Planes" href="servicio.html"><span>Planes</span></a>
  <a class="contact" href="Contacto.html"><span>Contact</span>o</a>                                  
  </div>
 

bueno si se fijan es un menu bastante simple....

ahora dejo el css del menu:

Código CSS:

#Menu a
{
    width: 120px;
    padding-top: 10px;
    line-height: 40px;
    vertical-align: middle;
    float: left;
    background:url(img/boton.png)  left no-repeat;
    background-position: 0px 10px;
    padding-left: 15px;
    color: #FFF;
    font-family: Candara;
    font-size: 20px;
    text-decoration: none;
    text-align:left;
    margin-left: 10 px;
}
 
#Menu a:hover, #Menu a.active
{
    background:url(img/boton_2.png)  left no-repeat;
    background-position: 0px 10px;
    color: #FFF;
}
 

ok...hasta ahy todo perfecto y claro...

en donde tengo problemas es que necesito darle a "INICIO" un espacio para que quede centrado en su cuadro:



si se fijan es solo "INICIO" donde esta el problema..y necesito centrarlo en su cuadro... puse esto pero no me funciona:

Código CSS:

#Menu a inicio
{
    padding-left: 30px;
}
 

alguna sugerencia?

de ante mano muchas gracias!!

[GAST0N]

proba con text-aling:center;

[ras_chalo]

Iniciado por GAST0N

proba con text-aling:center;

ya probe y no funciona .....

nose q onda...alguna otra posibilidad?

[gVenom]

<a class="inicio" href="index.html"><span style=" text-align: center ;">Inicio</span></a>

[ArturoGallegos]

1.- para que usas el span?
2.- los menus se hacen con listas

prueba este codigo y ajustalo a tus necesidades por si algo se me fue

Código CSS:

#Menu ul{display:block;margin:0;padding:0;list-style:none;}
#Menu ul li{display:block;float:left;margin:0 2px;}
#Menu ul li a{display:block;width:120px;height:40px;background:#333 url(img/boton.png) no-repeat 0px 10px;font:20px Candara;color:#fff;text-align:center!important;text-decoration:none;line-height:40px;}
#Menu ul li a:hover,#Menu ul li a:active{background:#ff9900 url(img/boton_2.png) no-repeat 0px 10px;}
 

Código HTML:

<div id="Menu">
<ul>
    <li><a href="#"><span>Inicio</span></a></li>
    <li><a href="#"><span>Conoscanos</span></a></li>
    <li><a href="#"><span>Servicios</span></a></li>
    <li><a href="#"><span>Planes</span></a></li>
    <li><a href="#"><span>Contacto</span></a></li>
</ul>
</div>
 

Nota: el tipo de letra Candara no es buena idea utilizarla ya que puede llegar a no estar instalada en algunas maquinas

[ras_chalo]

Iniciado por Ag666

1.- para que usas el span?
2.- los menus se hacen con listas

prueba este codigo y ajustalo a tus necesidades por si algo se me fue

Código CSS:

#Menu ul{display:block;margin:0;padding:0;list-style:none;}
#Menu ul li{display:block;float:left;margin:0 2px;}
#Menu ul li a{display:block;width:120px;height:40px;background:#333 url(img/boton.png) no-repeat 0px 10px;font:20px Candara;color:#fff;text-align:center!important;text-decoration:none;line-height:40px;}
#Menu ul li a:hover,#Menu ul li a:active{background:#ff9900 url(img/boton_2.png) no-repeat 0px 10px;}
 

Código HTML:

<div id="Menu">
<ul>
    <li><a href="#"><span>Inicio</span></a></li>
    <li><a href="#"><span>Conoscanos</span></a></li>
    <li><a href="#"><span>Servicios</span></a></li>
    <li><a href="#"><span>Planes</span></a></li>
    <li><a href="#"><span>Contacto</span></a></li>
</ul>
</div>
 

Nota: el tipo de letra Candara no es buena idea utilizarla ya que puede llegar a no estar instalada en algunas maquinas

Hola!
copie tu código y le hice las modificaciones correspondientes y me resulto de maravilla!!
muchas gracias!!!

y gracias a los demás por su aporte :)

saludos!!
y nuevamente muchas gracias!

[carlos_belisario]

me alegro que lograras lo que deseabas, los menus mas que todo se trabajan con listas desordenadas por la funcionalidad que tienen, pero creo que lo que te falto fue agregarle un display:block en donde definiste #Menu a, ya que los link son elementos lineales y de esta manera te funciona mejor el float:left, claro esto es a modo informativo ya que de la manera que trabajaste con <ul> es lo que normalmente se usa, segun he leido, saludos