Foros del Web » Creando para Internet » CSS »

¿qué hago mal?

 Estas en el tema de ¿qué hago mal? en el foro de CSS en Foros del Web. Buenas, tengo la intención de centrar unas imágenes, estos son los códigos, no se donde lo estoy haciendolo mal, si me pueden ayudar. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 17/02/2011, 14:31
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
¿qué hago mal?
Buenas, tengo la intención de centrar unas imágenes, estos son los códigos, no se donde lo estoy haciendolo mal, si me pueden ayudar.
Código HTML: 
Ver original
  1. <body>
  2. <div>
  3.     <ul id="menu_top">
  4.     <li><a href="#" class="farmacias"></a></li>
  5.     <li><a href="#" class="autobuses"></a></li>
  6.     <li><a href="#" class="trenes"></a></li>
  7.     <li><a href="#" class="anunciate"></a></li>
  8.     <li><a href="#" class="contacte"></a></li>
  9.     <li><a href="#" class="webmail"></a></li>
  10.     <li><a href="#" class="gestion_web"></a></li>
  11.     </ul>
  12. </div>
  13. </body>
Código CSS: 
Ver original
  1. #menu_top{
  2.     height:48px;
  3.     background-color:#000;
  4.     margin:0 auto 0 auto;
  5.  
  6. }
  7.  
  8.  
  9.  
  10. #menu_top .farmacias{
  11.     background-image:url(../images/farmacias_top.png);
  12.     background-repeat:no-repeat;
  13.     width:80px;
  14.     
  15. }
  16.  
  17. #menu_top .autobuses{
  18.     background-image:url(../images/autobuses_top.png);
  19.     background-repeat:no-repeat;
  20.     width:86px;
  21. }
  22.  
  23. #menu_top .trenes{
  24.     background-image:url(../images/trenes_top.png);
  25.     background-repeat:no-repeat;
  26.     width:56px;
  27. }
  28.  
  29. #menu_top .anunciate{
  30.     background-image:url(../images/anunciate_top.png);
  31.     background-repeat:no-repeat;
  32.     width:82px;
  33. }
  34.  
  35. #menu_top .contacte{
  36.     background-image:url(../images/contacto_top.png);
  37.     background-repeat:no-repeat;
  38.     width:74px;
  39. }
  40.  
  41. #menu_top .webmail{
  42.     background-image:url(../images/webmail_top.png);
  43.     background-repeat:no-repeat;
  44.     width:71px;
  45.     margin-left:108px;
  46. }
  47.  
  48. #menu_top .gestion_web{
  49.     background-image:url(../images/gestion_web_top.png);
  50.     background-repeat:no-repeat;
  51.     width:98px;
  52.     
  53.     
  54. }

Gracias, un saludo
  #2 (permalink)  
Antiguo 17/02/2011, 14:51
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: ¿qué hago mal?
Prueba a añadir la regla siguiente:
#menu_top a{height:48px;}
El alto del <ul> no obliga al enlace a tener la misma altura si no hay contenido.
Además es recomendable definir los enlaces con la a inicial. En lugar de, por ejemplo, #menu_top .farmacias declarar la regla #menu_top a.farmacias.
  #3 (permalink)  
Antiguo 17/02/2011, 15:00
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: ¿qué hago mal?
<a href="#" class="farmacias"> ¿lo sustituyo por?

<a href="#" class="a.farmacias">
  #4 (permalink)  
Antiguo 17/02/2011, 15:09
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: ¿qué hago mal?
Perdon por no saber explicarme. Me refiero al CSS.
Por ejemplo:
#menu_top a.autobuses{
background-image:url(../images/autobuses_top.png);
background-repeat:no-repeat;
width:86px;
}
A mí me facilita encontrar las propiedades de los enlaces.
  #5 (permalink)  
Antiguo 17/02/2011, 15:16
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: ¿qué hago mal?
amm es una recomendación para percatarme que es un enlace ¿no? te lo agradezco, gracias
  #6 (permalink)  
Antiguo 18/02/2011, 11:07
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: ¿qué hago mal?
¿hola nadie? me parecía que la solución podría ser mucho más facil xD
  #7 (permalink)  
Antiguo 18/02/2011, 11:55
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: ¿qué hago mal?
sumado a lo que ya te comento el compañero sanxuan
prueba agregando

Código CSS: 
Ver original
  1. #menu_top li a{
  2.     display:block;
  3.     float:left;
  4.     height:48px;
  5.     background-position:center center;
  6. }
  #8 (permalink)  
Antiguo 18/02/2011, 12:41
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 13 años, 11 meses
Puntos: 2
Respuesta: ¿qué hago mal?
quizas no funciona porque no tiene contenido... Probá poner esto en cada li ;
Código HTML: 
Ver original
  1. &nbsp;
  #9 (permalink)  
Antiguo 18/02/2011, 17:28
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: ¿qué hago mal?
Continuo sin solución.

Gracias
  #10 (permalink)  
Antiguo 18/02/2011, 17:32
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: ¿qué hago mal?
no puede ser... haber muéstranos una foto de como se ve y como debería verse ¬¬
  #11 (permalink)  
Antiguo 18/02/2011, 17:51
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: ¿qué hago mal?
Así se ve y me gustaría que el menú se viese en el centro de la pantalla.


htootp://img824.imageshack.us/i/vistamenu.png/

Gracias.

Saludos
  #12 (permalink)  
Antiguo 18/02/2011, 18:05
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: ¿qué hago mal?
Hola:

Cita:
Iniciado por ramondevesa Ver Mensaje
<a href="#" class="farmacias"> ¿lo sustituyo por?

<a href="#" class="a.farmacias">
Mejor tómate una tarde de descanso y échale un vistazo a los manuales CSS de www.librosweb.es

Saludos.
  #13 (permalink)  
Antiguo 18/02/2011, 18:13
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: ¿qué hago mal?
Cita:
Iniciado por ramondevesa Ver Mensaje
Buenas, tengo la intención de centrar unas imágenes, estos son los códigos, no se donde lo estoy haciendolo mal, si me pueden ayudar.
Cita:
Iniciado por ramondevesa Ver Mensaje
Así se ve y me gustaría que el menú se viese en el centro de la pantalla.


htootp://img824.imageshack.us/i/vistamenu.png/

Gracias.

Saludos

no es lo mismo centrar las imagenes que estan dentro del menu a centrar el menu ok

pruébate este código
Código CSS: 
Ver original
  1. #menu_top{
  2.     height:48px;
  3.     background:#000;
  4. }
  5. #menu_top ul{display:block;width:670px;margin:0 auto;padding:0;}
  6. #menu_top ul li,#menu_top ul li a{display:block;float:left;padding:0;height:48px;overflow:hidden;}
  7. #menu_top ul li a{text-indent:-300px;margin:0;}
  8.  
  9. #menu_top .farmacias{
  10.     background-image:url(../images/farmacias_top.png);
  11.     background-repeat:no-repeat;
  12.     width:80px;
  13. }
  14.  
  15. #menu_top .autobuses{
  16.     background-image:url(../images/autobuses_top.png);
  17.     background-repeat:no-repeat;
  18.     width:86px;
  19. }
  20.  
  21. #menu_top .trenes{
  22.     background-image:url(../images/trenes_top.png);
  23.     background-repeat:no-repeat;
  24.     width:56px;
  25. }
  26.  
  27. #menu_top .anunciate{
  28.     background-image:url(../images/anunciate_top.png);
  29.     background-repeat:no-repeat;
  30.     width:82px;
  31. }
  32.  
  33. #menu_top .contacte{
  34.     background-image:url(../images/contacto_top.png);
  35.     background-repeat:no-repeat;
  36.     width:74px;
  37. }
  38.  
  39. #menu_top .webmail{
  40.     background-image:url(../images/webmail_top.png);
  41.     background-repeat:no-repeat;
  42.     width:71px;
  43.     margin-left:108px;
  44. }
  45.  
  46. #menu_top .gestion_web{
  47.     background-image:url(../images/gestion_web_top.png);
  48.     background-repeat:no-repeat;
  49.     width:98px;
  50. }

Código HTML: 
Ver original
  1. <div id="menu_top">
  2.     <ul>
  3.         <li><a href="#" class="farmacias">farmacias</a></li>
  4.         <li><a href="#" class="autobuses">autobuses</a></li>
  5.         <li><a href="#" class="trenes">trenes</a></li>
  6.         <li><a href="#" class="anunciate">anunciate</a></li>
  7.         <li><a href="#" class="contacte">contacte</a></li>
  8.         <li><a href="#" class="webmail">webmail</a></li>
  9.         <li><a href="#" class="gestion_web">gestion_web</a></li>
  10.     </ul>
  11. </div>
  #14 (permalink)  
Antiguo 18/02/2011, 18:22
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: ¿qué hago mal?
Cita:
Iniciado por Ag666 Ver Mensaje
no es lo mismo centrar las imagenes que estan dentro del menu a centrar el menu ok

pruébate este código
Código CSS: 
Ver original
  1. #menu_top{
  2.     height:48px;
  3.     background:#000;
  4. }
  5. #menu_top ul{display:block;width:670px;margin:0 auto;padding:0;}
  6. #menu_top ul li,#menu_top ul li a{display:block;float:left;padding:0;height:48px;overflow:hidden;}
  7. #menu_top ul li a{text-indent:-300px;margin:0;}
  8.  
  9. #menu_top .farmacias{
  10.     background-image:url(../images/farmacias_top.png);
  11.     background-repeat:no-repeat;
  12.     width:80px;
  13. }
  14.  
  15. #menu_top .autobuses{
  16.     background-image:url(../images/autobuses_top.png);
  17.     background-repeat:no-repeat;
  18.     width:86px;
  19. }
  20.  
  21. #menu_top .trenes{
  22.     background-image:url(../images/trenes_top.png);
  23.     background-repeat:no-repeat;
  24.     width:56px;
  25. }
  26.  
  27. #menu_top .anunciate{
  28.     background-image:url(../images/anunciate_top.png);
  29.     background-repeat:no-repeat;
  30.     width:82px;
  31. }
  32.  
  33. #menu_top .contacte{
  34.     background-image:url(../images/contacto_top.png);
  35.     background-repeat:no-repeat;
  36.     width:74px;
  37. }
  38.  
  39. #menu_top .webmail{
  40.     background-image:url(../images/webmail_top.png);
  41.     background-repeat:no-repeat;
  42.     width:71px;
  43.     margin-left:108px;
  44. }
  45.  
  46. #menu_top .gestion_web{
  47.     background-image:url(../images/gestion_web_top.png);
  48.     background-repeat:no-repeat;
  49.     width:98px;
  50. }

Código HTML: 
Ver original
  1. <div id="menu_top">
  2.     <ul>
  3.         <li><a href="#" class="farmacias">farmacias</a></li>
  4.         <li><a href="#" class="autobuses">autobuses</a></li>
  5.         <li><a href="#" class="trenes">trenes</a></li>
  6.         <li><a href="#" class="anunciate">anunciate</a></li>
  7.         <li><a href="#" class="contacte">contacte</a></li>
  8.         <li><a href="#" class="webmail">webmail</a></li>
  9.         <li><a href="#" class="gestion_web">gestion_web</a></li>
  10.     </ul>
  11. </div>
Disculpa, me venía a referir a un centrado horizontal del menú, y no con este código que me has dejado aquí no me muestra ni siquiera las imágenes en pantalla :S

gracias
  #15 (permalink)  
Antiguo 18/02/2011, 18:34
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: ¿qué hago mal?
pues sírvase tomar el consejo del compañero jomaruro, tómese un descanso y échele una repasada al HTML y CSS

le dejo link a un ejemplo con el código que le mostré anteriormente, cambie la url de las imágenes para probar lo que usted menciona de que no se visualizan ¬¬ y anda perfectamente
http://bit.ly/i2qcKn

hasta aquí llego adaptelo a sus necesidades... yo hice algunos cambios, no funcionara si hace copy - paste del CSS sin revisar los cambios que se hicieron el codigo

Etiquetas: mal
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:27.