Foros del Web » Creando para Internet » HTML »

Problemas con las imagenes

Estas en el tema de Problemas con las imagenes en el foro de HTML en Foros del Web. Hola a todos, estoy intentando hacer un menu horizontal con imagenes, pero el problema viene cuando yo voy les agrego la imagen a cada boton, ...
  #1 (permalink)  
Antiguo 12/02/2010, 14:39
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Problemas con las imagenes

Hola a todos, estoy intentando hacer un menu horizontal con imagenes, pero el problema viene cuando yo voy les agrego la imagen a cada boton, quedan bien pero al final, osea a la derecha me sobra un espacio y es raro por que en la cabezera que tiene un ancho de 1024 me queda bien y en el menu horizontal si son 4 botones y cada uno con medida de 256 supuestamente tambien tendria que quedar toda rellena la fila, aca les dejo el codigo

HTML:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xml:lang="es">
  3. <title>Actives Gaming - Pagina creada por</title>
  4. <!-- Hojas de estilos -->
  5. <link rel="stylesheet" href="Estilos.css" type="text/css">
  6. <meta name="description" content="Juegos, counter strike, mu online, informatica, musica">
  7. </head>
  8. <body bgcolor="#000000">
  9. <!-- Comienza encabezado -->
  10. <div id="cabezera">
  11. <img src="Imagenes/Cabezera.jpg" alt="cabezera" width="1024" height="64"/>
  12. </div>
  13. <div id="zonam">
  14. <marquee>Bienvenidos a la pagina web de alan</marquee>
  15. </div>
  16. <ul id="menuhorizontal">
  17. <li><a class="boton-1" href="#">Nada</a></li>
  18. <li><a class="boton-1" href="#">Nada</a></li>
  19. <li><a class="boton-1" href="#">Nada</a></li>
  20. <li><a class="boton-1" href="#">Nada</a></li>
  21. </ul>
  22. <div id="frontal">
  23. <h1 style="text-align:center;color:#0000FF">Bienvenidos a la pagina</h1>
  24. <p>&nbsp;</p>
  25. <center>
  26. <span class="textoinfo">Esta pagina esta creada por Alan :)<br/>
  27. sepan agradecer es mi primer pagina jeje</span>
  28. </center>
  29. </div>
  30. </body>
  31. </html>

CSS:

Código CSS:
Ver original
  1. *
  2. {
  3. margin:0px;
  4. padding:0px;
  5. }
  6.  
  7. #cabezera
  8. {
  9. width:100&#37;;
  10. height:60px;
  11. background-color:#0000FF;
  12. color:#FFFF00;
  13. font-size:30px;
  14. text-align:center;
  15. }
  16.  
  17. #zonam
  18. {
  19. width:100%;
  20. background-color:#FF0000;
  21. color:#FFFF00;
  22. }
  23.  
  24. .marq
  25. {
  26. color:#FFFF00;
  27. font-weight:bold;
  28. font-family:"Times New Roman", Times, serif;
  29. }
  30.  
  31. #menuhorizontal
  32. {
  33. font-family:Arial;
  34. width:100%;
  35. list-style-type:none;
  36. margin:0px;
  37. padding:0px;
  38. float:left;
  39. }
  40.  
  41. #menuhorizontal a:visited, #menuhorizontal a:link
  42. {
  43. float:left;
  44. position:relative;
  45. top:1px;
  46. width:15em;
  47. text-decoration:none;
  48. text-align:center;
  49. color:#FFFFFF;
  50. padding:2px 5px;
  51. }
  52.  
  53. #menuhorizontal a:hover
  54. {
  55. background-color:#000000;
  56. }
  57.  
  58. #menuhorizontal li
  59. {
  60. display:inline
  61. }
  62.  
  63. #frontal
  64. {
  65. position:relative;
  66. top:1.9em;
  67. margin-right:8em;
  68. margin-left:8em;
  69. border-style:solid;
  70. border-color:#0000CC;
  71. border-color:#FFCC00;
  72. height:30em;
  73. background-color:#FFFF00;
  74. }
  75.  
  76. .textoinfo
  77. {
  78. text-align:center;
  79. font-family:Geneva, Arial, Helvetica, sans-serif
  80. }
  81.  
  82. .boton-1
  83. {
  84. background-image:url(Imagenes/Boton-1.jpg);
  85. }

Última edición por elkpo15; 12/02/2010 a las 21:52
  #2 (permalink)  
Antiguo 12/02/2010, 18:15
Avatar de Ryo
Ryo
 
Fecha de Ingreso: marzo-2008
Ubicación: Bilbao
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: Problemas con las imagenes

No sé si termino de entender tu problema, pero si es lo que creo que es, ten en cuenta que #menuhorizontal a:visited y #menuhorizontal a:link tienen padding, lo que hará que se agrande el bloque y quede un hueco.

Por otro lado, sigo diciendo que un ancho fijo de 1024px es demasiado grande.
  #3 (permalink)  
Antiguo 12/02/2010, 18:19
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Problemas con las imagenes

elkpo15
Por fa.. usa el resaltador de codigo cuando escribas,, tienes desde la etiqueta CODE, hasta los Highlight, para hacer eso.. es mas facil leer todo asi.. por lo general lo tienes en la parte superior del formulario para escribir mensajes rapidos, o con el boton responder

Un saludo para ti
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #4 (permalink)  
Antiguo 12/02/2010, 22:05
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Problemas con las imagenes

Bueno miren, por si no me entendieron bien aca les dejo una imagen xD http://img514.imageshack.us/img514/6521/problemaa.jpg si se dan cuenta el menu horizontal en la parte final de la derecha tiene un espacio y yo lo que necesito es rellenarlo y que ocupe todo el ancho los 4 botones, pero el problema esta que yo nose de que forma solucionarlo, si hay alguna forma de hacer mas ancho cada boton obviamente teniendo en cuenta que cada uno va a tener la misma medida y que llege a quedar bien; Con respecto a la cabezera Ryo no se me ocurrio otra forma de arreglarlo, fui probando hasta que me quedo esa medida el ancho igualmente recien le acabo de poner dentro de la etiqueta img, remplaze el width="1024" por width="100%".

Etiquetas: imagenes
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:51.