Foros del Web - Ver Mensaje Individual

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);
}