Foros del Web » Creando para Internet » CSS »

[AYUDA] Problema al crear botonera horizontal CSS

Estas en el tema de [AYUDA] Problema al crear botonera horizontal CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/02/2010, 10:26
 
Fecha de Ingreso: octubre-2008
Mensajes: 112
Antigüedad: 9 años, 2 meses
Puntos: 1
[AYUDA] Problema al crear botonera horizontal CSS

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
  1. #botonera{
  2. height:30px; width:748px;
  3. margin:auto; margin-top:5px;
  4. background-color:#fb83b6;
  5. border-bottom:#ff0c73 solid 1px; border-top:#ff0c73 solid 1px;
  6. color:#FFFFFF;
  7. }
  8.  
  9. #botonera ul li {
  10. display: inline;
  11. padding: 2px 7px; /*Separar el texto*/
  12. }
  13.  
  14. #botonera ul li:hover {
  15. background-color:#ff0c73; /* Color de fondo sobre el boton */
  16. cursor: pointer; /* cambiar el aspecto del puntero */
  17. }

Ahora el HTML
Código HTML:
Ver original
  1. <div id="botonera">
  2.    
  3.         <ul>
  4.             <li>SOLIDARIDAD EN VENDIMIA</li>
  5.             <li>BODEGAS Y VIÑEDOS</li>
  6.             <li>ACONCAGUA</li>
  7.             <li>RIOS</li>
  8.         </ul>
  9.  
  10.  
  11.     </div>

Bueno espero alguno pueda ayudarme y desde ya muchisimas gracias.

Última edición por Daitron; 08/02/2010 a las 13:38
  #2 (permalink)  
Antiguo 08/02/2010, 13:39
 
Fecha de Ingreso: octubre-2008
Mensajes: 112
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: [AYUDA] Problema al crear botonera horizontal CSS

ninguna novedad?...

Sigo esperando su respuesta
Nuevamente muchas gracias
  #3 (permalink)  
Antiguo 08/02/2010, 14:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: [AYUDA] Problema al crear botonera horizontal CSS

¿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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #4 (permalink)  
Antiguo 08/02/2010, 15:38
Avatar de FaustinoAsprilla  
Fecha de Ingreso: febrero-2010
Ubicación: Medellín
Mensajes: 13
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: [AYUDA] Problema al crear botonera horizontal CSS

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!

Etiquetas: horizontal, botones
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 15:11.