[AYUDA] Problema al crear botonera horizontal CSS

Daitron · #1 (**permalink**) 08/02/2010, 10:26

Hola a todos, bueno el tema es así estoy haciendo una botonera bastante sencilla, la cual lo unico que hace es cambiar el color cuando se le pone el mouse encima...

bien el tema es que quiero que quede bien posicionada dentro del recuadro de la botonera y no lo logro...

Bien lo primero les dejo las imagenes del problema y de lo que quiero conseguir...

PROBLEMA: (tamaño de la imagen 1440x900 click para agrandar)

Como ven en el problema no se como hacer para que me ocupe todo el lugar que necesito exactamente

LO QUE NECESITO (esta hecho en photoshop)

Como ven ocupa todo el ancho de los 748 pixels el color claro pero cuando pongo el mouse encima del boton se pinta la totalidad del alto de la botonera...

Ahora los codigos:
Codigo CSS de la botonera:

Código CSS:

Ver original#botonera{
height:30px; width:748px;
margin:auto; margin-top:5px;
background-color:#fb83b6;
border-bottom:#ff0c73 solid 1px; border-top:#ff0c73 solid 1px;
color:#FFFFFF;
}
 
#botonera ul li {
display: inline;
padding: 2px 7px; /*Separar el texto*/
}
 
#botonera ul li:hover {
background-color:#ff0c73; /* Color de fondo sobre el boton */
cursor: pointer; /* cambiar el aspecto del puntero */
}

Ahora el HTML

Código HTML:

Ver original<div id="botonera">
    
        <ul>
            <li>SOLIDARIDAD EN VENDIMIA</li>
            <li>BODEGAS Y VIÑEDOS</li>
            <li>ACONCAGUA</li>
            <li>RIOS</li>
        </ul>
 
 
    </div>

Bueno espero alguno pueda ayudarme y desde ya muchisimas gracias.

Daitron · #2 (**permalink**) 08/02/2010, 13:39

ninguna novedad?...

Sigo esperando su respuesta
Nuevamente muchas gracias

Impostor · #3 (**permalink**) 08/02/2010, 14:17

¿Si es un menu, no tendrías que aplicarle enlaces a la lista? Y al enlace le aplicas display block y le das un padding suficiente.

Saludos¡¡

FaustinoAsprilla · #4 (**permalink**) 08/02/2010, 15:38

Prueba con este código modificado a ver que tal te parece, creo que funciona bien:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Botonera</title>
		<style type="text/css">
			#botonera ul
			{
				height:30px;
				width:748px;
				margin-top:5px;
				margin-left: auto;
				margin-right: auto;
				background-color:#fb83b6;
				border-bottom:#ff0c73 solid 1px; border-top:#ff0c73 solid 1px;
				color:#FFFFFF;
			}
			 
			#botonera ul li
			{
				float: left;
				height: 100%;
				display: inline;
				margin-right: 10px;
			}
			 
			#botonera ul li:hover
			{
				background-color:#ff0c73; /* Color de fondo sobre el boton */
				cursor: pointer; /* cambiar el aspecto del puntero */
			}
			
			#botonera a
			{
				text-decoration: none;
				color: #FFFFFF;
				position: relative;
				top: 6px;
			}
		</style>
    </head>
    <body>
    <div id="botonera">
    
        <ul>
            <li><a href="#">SOLIDARIDAD EN VENDIMIA</a></li>
            <li><a href="#">BODEGAS Y VIÑEDOS</a></li>
            <li><a href="#">ACONCAGUA</a></li>
            <li><a href="#">RIOS</a></li>
        </ul>
 
 
    </div>
    </body>
</html>

Me cuentas que tal te va!

Saludos!