Problemas con las imagenes

elkpo15 · #1 (**permalink**) 12/02/2010, 14:39

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="es">
<head>
<title>Actives Gaming - Pagina creada por</title>
<!-- Hojas de estilos -->
<link rel="stylesheet" href="Estilos.css" type="text/css">
<meta name="description" content="Juegos, counter strike, mu online, informatica, musica">
</head>
<body bgcolor="#000000">
<!-- Comienza encabezado -->
<div id="cabezera">
<img src="Imagenes/Cabezera.jpg" alt="cabezera" width="1024" height="64"/>
</div>
<div id="zonam">
<marquee>Bienvenidos a la pagina web de alan</marquee>
</div>
<ul id="menuhorizontal">
<li><a class="boton-1" href="#">Nada</a></li>
<li><a class="boton-1" href="#">Nada</a></li>
<li><a class="boton-1" href="#">Nada</a></li>
<li><a class="boton-1" href="#">Nada</a></li>
</ul>
<div id="frontal">
<h1 style="text-align:center;color:#0000FF">Bienvenidos a la pagina</h1>
<p>&nbsp;</p>
<center>
<span class="textoinfo">Esta pagina esta creada por Alan :)<br/>
sepan agradecer es mi primer pagina jeje</span>
</center>
</div>
</body>
</html>

CSS:

Código CSS:

Ver original*
{
margin:0px;
padding:0px;
}
 
#cabezera
{
width:100&#37;;
height:60px;
background-color:#0000FF;
color:#FFFF00;
font-size:30px;
text-align:center;
}
 
#zonam
{
width:100%;
background-color:#FF0000;
color:#FFFF00;
}
 
.marq
{
color:#FFFF00;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
}
 
#menuhorizontal
{
font-family:Arial;
width:100%;
list-style-type:none;
margin:0px;
padding:0px;
float:left;
}
 
#menuhorizontal a:visited, #menuhorizontal a:link
{
float:left;
position:relative;
top:1px;
width:15em;
text-decoration:none;
text-align:center;
color:#FFFFFF;
padding:2px 5px;
}
 
#menuhorizontal a:hover
{
background-color:#000000;
}
 
#menuhorizontal li
{
display:inline
}
 
#frontal
{
position:relative;
top:1.9em;
margin-right:8em;
margin-left:8em;
border-style:solid;
border-color:#0000CC;
border-color:#FFCC00;
height:30em;
background-color:#FFFF00;
}
 
.textoinfo
{
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif
}
 
.boton-1
{
background-image:url(Imagenes/Boton-1.jpg);
}

Ryo · #2 (**permalink**) 12/02/2010, 18:15

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.

loncho_rojas · #3 (**permalink**) 12/02/2010, 18:19

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

elkpo15 · #4 (**permalink**) 12/02/2010, 22:05

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%".