Foros del Web » Creando para Internet » CSS »

codigo simple..pero no me funciona :(

Estas en el tema de codigo simple..pero no me funciona :( en el foro de CSS en Foros del Web. hola, tengo una duda al realizar un pequeño codigo.... tengo esto men el html: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div id = "Menu" ...
  #1 (permalink)  
Antiguo 03/02/2011, 09:33
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 7 años, 5 meses
Puntos: 6
Pregunta codigo simple..pero no me funciona :(

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

tengo esto men el html:
Código HTML:
Ver original
  1. <div id="Menu">                                
  2.  <a class="inicio"  href="index.html"><span>Inicio</span></a>
  3.  <a class="services" ref="QuienesSomos.html">span>Con&oacute;zcanos</span></a>
  4.   <a class="services" href="servicio.html"><span>Servicios</span></a>
  5.   <a class="Planes" href="servicio.html"><span>Planes</span></a>
  6.   <a class="contact" href="Contacto.html"><span>Contact</span>o</a>                                  
  7.   </div>

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

ahora dejo el css del menu:
Código CSS:
Ver original
  1. #Menu a
  2. {
  3.     width: 120px;
  4.     padding-top: 10px;
  5.     line-height: 40px;
  6.     vertical-align: middle;
  7.     float: left;
  8.     background:url(img/boton.png)  left no-repeat;
  9.     background-position: 0px 10px;
  10.     padding-left: 15px;
  11.     color: #FFF;
  12.     font-family: Candara;
  13.     font-size: 20px;
  14.     text-decoration: none;
  15.     text-align:left;
  16.     margin-left: 10 px;
  17. }
  18.  
  19. #Menu a:hover, #Menu a.active
  20. {
  21.     background:url(img/boton_2.png)  left no-repeat;
  22.     background-position: 0px 10px;
  23.     color: #FFF;
  24. }

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:
Ver original
  1. #Menu a inicio
  2. {
  3.     padding-left: 30px;
  4. }

alguna sugerencia?

de ante mano muchas gracias!!
  #2 (permalink)  
Antiguo 03/02/2011, 10:05
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: codigo simple..pero no me funciona :(

proba con text-aling:center;
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 03/02/2011, 11:42
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 7 años, 5 meses
Puntos: 6
Respuesta: codigo simple..pero no me funciona :(

Cita:
Iniciado por GAST0N Ver Mensaje
proba con text-aling:center;
ya probe y no funciona .....

nose q onda...alguna otra posibilidad?
  #4 (permalink)  
Antiguo 03/02/2011, 12:02
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: codigo simple..pero no me funciona :(

<a class="inicio" href="index.html"><span style=" text-align: center ;">Inicio</span></a>
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 03/02/2011, 12:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: codigo simple..pero no me funciona :(

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:
Ver original
  1. #Menu ul{display:block;margin:0;padding:0;list-style:none;}
  2. #Menu ul li{display:block;float:left;margin:0 2px;}
  3. #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;}
  4. #Menu ul li a:hover,#Menu ul li a:active{background:#ff9900 url(img/boton_2.png) no-repeat 0px 10px;}

Código HTML:
Ver original
  1. <div id="Menu">
  2. <ul>
  3.     <li><a href="#"><span>Inicio</span></a></li>
  4.     <li><a href="#"><span>Conoscanos</span></a></li>
  5.     <li><a href="#"><span>Servicios</span></a></li>
  6.     <li><a href="#"><span>Planes</span></a></li>
  7.     <li><a href="#"><span>Contacto</span></a></li>
  8. </ul>
  9. </div>

Nota: el tipo de letra Candara no es buena idea utilizarla ya que puede llegar a no estar instalada en algunas maquinas
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 03/02/2011, 17:27
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 7 años, 5 meses
Puntos: 6
De acuerdo Respuesta: codigo simple..pero no me funciona :(

Cita:
Iniciado por Ag666 Ver Mensaje
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:
Ver original
  1. #Menu ul{display:block;margin:0;padding:0;list-style:none;}
  2. #Menu ul li{display:block;float:left;margin:0 2px;}
  3. #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;}
  4. #Menu ul li a:hover,#Menu ul li a:active{background:#ff9900 url(img/boton_2.png) no-repeat 0px 10px;}

Código HTML:
Ver original
  1. <div id="Menu">
  2. <ul>
  3.     <li><a href="#"><span>Inicio</span></a></li>
  4.     <li><a href="#"><span>Conoscanos</span></a></li>
  5.     <li><a href="#"><span>Servicios</span></a></li>
  6.     <li><a href="#"><span>Planes</span></a></li>
  7.     <li><a href="#"><span>Contacto</span></a></li>
  8. </ul>
  9. </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!
  #7 (permalink)  
Antiguo 03/02/2011, 20:35
Avatar de carlos_belisario
Colaborador
 
Fecha de Ingreso: abril-2010
Ubicación: Venezuela Maracay Aragua
Mensajes: 3.156
Antigüedad: 7 años, 7 meses
Puntos: 460
Respuesta: codigo simple..pero no me funciona :(

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
__________________
aprende d tus errores e incrementa tu conocimientos
it's not a bug, it's an undocumented feature By @David
php the right way

Etiquetas: Ninguno
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 12:05.