Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/06/2012, 19:33
Avatar de Azer
Azer
 
Fecha de Ingreso: abril-2012
Ubicación: Argentina
Mensajes: 13
Antigüedad: 12 años, 1 mes
Puntos: 0
Pregunta Problema con los <a>.

Hola gente, espero que estén muy bien. Estoy desarrollando mi primer web con un Doctype Strict, y la verdad maquetar algunos botones (hipervínculos) se me esta volviendo un dolor de cabeza. Quiero que sepan que soy un principiante en esto. Les paso a contar mi problema, y espero me puedan ayudar.

Esta es la forma correcta en la que debo crear mi botón en html:
Código HTML:
<div class="botonespagina">
  <ul>
      <li class="botonizquierda"><p class="textoboton1"><a href="index.html"></a></p></li>
  </ul> 
Extracto de Css:
Código HTML:
.botonderecha{
	float:left;
	margin-top:3px;
	margin-right:0px;
	border-radius:4px;
	border:1px solid #000;
}

.textoboton3{
	padding-top:2px;
	font-size:13px;
}

.textoboton3 a{
	display:block;
	height:20px;
	width:22px;
	color:#dbeef5 !important;
}

.textoboton3 a:hover{
	color:#343c56 !important;
}

.botonderecha:hover{
	border:1px solid #434d6e;
	background-color:#dbeef5;
	color:white !important; 
}
El problema con esto es que al estar la etiqueta <a> dentro de <p> siempre que quiero darle padding-top o margin-top a mi texto pasa lo siguiente:

1- Chequeo el código para observar si todo está bien, pero el <a> se me desplaza para abajo:

(El <a> se desplaza para abajo, sin ocupar el espacio que debería ocupar normalmente, lo que no me permite realizar el efecto que busco)
Se que en el Css se puede apreciar que disminuí el alto de mi etiqueta <a> en 2 pixeles menos que en mi etiqueta <p>, pero fue para que mi enlace no traspasara por debajo del botón.

2- Chequeando lo que pasa posicionando el cursor en el espacio que le falta ocupar al <a>, pero que ocupa perfectamente el <p>:


(Desaparece la flecha, cosa que no debería pasar)

3- Chequeando que pasa al posicionar el cursor dentro del espacio que ocupa el <a>:

(Ocurre lo que tiene que pasar segun la propiedad hoover y los valores asignados en el css, pero al <a> le falta completar un par de pixeles por arriba como ya dije)

Bien, creo que me enrolle un poco, la verdad no se si vengo a pedir ayuda o consejos sobre como trabajar, ya que no se que estoy haciendo mal. Espero puedan responder. Saludos, muchas gracias por su atencion!