Foros del Web » Creando para Internet » CSS »

alcance del area de un boton

Estas en el tema de alcance del area de un boton en el foro de CSS en Foros del Web. Buenas estoy haciendo un menú con botones con css, y es la primera vez que lo hago y tengo un fallo que no se como ...
  #1 (permalink)  
Antiguo 15/07/2009, 17:10
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
alcance del area de un boton

Buenas estoy haciendo un menú con botones con css, y es la primera vez que lo hago y tengo un fallo que no se como solventar. La cuestión es que me está gustando como va quedando solo tengo un pequeño problema y que consisten en cuando desplazo el cursor dentro del botón hacia abajo, me salgo del botón pero sigue siendo clickeable. Me refiero a esto:

img139.imageshack.us/img139/8985/89368082.jpg

(Aunque el ratón aparece como si no estuviera apuntando a un link, en realidad si esta apuntando).

Esto solo me ocurre cuando me salgo del botón por la parte de abajo, y cuando accedo al botón por abajo tampoco me sale clickeable hasta que estoy dentro, el problema es cuando me salgo del botón.
Mi código html es:

Código HTML:
 <body>
		<div id="cuerpo">
			<div id="cabecera">
				<div id="banner">
					<img id="img_banner" src="/img/cabecera.png" alt="Tamaño original"> 
				</div>
				<div id="botonera">
					<ul id="menu">
						<li><a href="img" target="_self">Principal</a></li>
						<li><a href="img" target="_self">About me</a></li>
					</ul>
				</div>
			</div>
			<div id="principal">
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			</div>
			<div id="footer">
			</div>
		</div>
	</body>
</html> 
Y mi código css es:

Código:
body{
	background-image: url(/img/fondo.jpg);
	background-repeat: repeat;
	background-attachment: scroll;
	background-color: maroon;
	margin:0 auto;
	color:white;
	width: 950px;
	text-align:justify;
}
#cuerpo{
	margin-top:15px;
	z-index:0;
	
}
#cabecera{

}

#img_banner{
	display:block;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;

}
#botonera{
	background-image: url(/img/botonera.png);
	width: 100%;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;

}

ul#menu
{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:40px;
	font-size:14px;
	font-weight:bold;
	/*background:transparent url(images/nav_bg.png) repeat-x top left;*/
	font-family:Arial, Helvetica, sans-serif;
	/*border-bottom:1px solid #000000;
	border-top:1px solid #000000;*/
	
}

ul#menu li
{
	display:block;
	height:40px;
	float:left;
	clear: none;
	border-right:1px solid #000;
	
}

ul#menu li a
{
	display:block;
	float:left;
	/*height:40px;*/
	color:#999999;
	text-decoration:none;
	font-weight:bold;
	padding:12px 10px 10px 10px;
}

ul#menu li a:hover
{	display:block;
	color:#FFFFFF;
	height:40px;
	
	/*background:transparent url(/img/nav_bg.png) 0px -30px no-repeat;*/
}
	

ul#menu li a.current
{
	display:block;
	
	/*background:transparent url(images/nav_bg.png) 0px -30px no-repeat;*/
	float:left;
	margin:0;
}

#b_principal{
	border-left: #000000;
	padding: auto auto;
	height: 100px;
}

#principal{
	width: 100%;
	border:1px solid #000;
	
	height: 500px;
	
	background-image:url(/img/trans.png);
}

/*#banner{
	margin: auto;
	width: 100%
}*/



/*
h1{
	text-align: center;
}*/
/*
.Sheet
{
  overflow: hidden;
  min-width:35px;
  min-height:35px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  width: 900px;
}
			#cuerpo{
				width: 930px;
				padding: 10px;
				margin: 0 auto;
			}
			#cabecera{
				text-align:right;
			}
			*/

Gracias de antemano.
  #2 (permalink)  
Antiguo 15/07/2009, 17:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: alcance del area de un boton

Posíblemente sea por la altura de 40px que le tienes a "ul#menu li a:hover", en "ul#menu li a" la tienes comentada. Eso hará que el tamaño de a:hover (más su pádin) extienda la zona activa más abajo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 16/07/2009, 06:16
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: alcance del area de un boton

Gracias
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 01:38.