Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] se reduce el link

Estas en el tema de se reduce el link en el foro de CSS en Foros del Web. no se bien como explicarlo, pero lo que me sucede, es que se reduce el alto del link en un texto. tengo este codigo @import ...
  #1 (permalink)  
Antiguo 29/01/2016, 22:28
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 12 años, 7 meses
Puntos: 3
se reduce el link

no se bien como explicarlo, pero lo que me sucede, es que se reduce el alto del link en un texto.
tengo este codigo
Código HTML:
Ver original
  1. <div class="barrasa">
  2.         <div align="right"valign="middle"><a href="http://localhost/MCA-iluminaria/registro/">Entrar | Registrarse</a>&nbsp;&nbsp;
  3.                  </div>
  4. </div>
Código CSS:
Ver original
  1. .barrasa{width:100%;background: #333333; color:#f78e28;height:50px;}
  2. .barrasa div {top:10px;position:relative}
  3. .barrasa a {color:#f78e28;}
  4. .barrasa a:hover {color:#fff;}
pero al pasar el mouse sobre el texto, no capta el link en la mitad inferior de la linea del texto.
No se bien como explicarlo, voy a poner una imagen

aqui pueden ver sobre el margen derecho, a que altura hace el cambio de hover en el texto


nunca me paso esto!!!
  #2 (permalink)  
Antiguo 31/01/2016, 16:04
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 4 años, 7 meses
Puntos: 5
Respuesta: se reduce el link

Yo soy muy novato, pero no sé, miraría a ver si dándole un tamaño al div contenedor del link y luego haciéndole al link un display: block pudiera así ocuparte todo el div y solucionar el problema. Igual como el link es por naturaleza un elemento en linea (creo recordar), pueda venir por ahí...
  #3 (permalink)  
Antiguo 01/02/2016, 08:26
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 6 años, 1 mes
Puntos: 39
Respuesta: se reduce el link

Hola, intente reproducir el error únicamente con el código html y css que nos pasaste y a mi si me funciona perfectamente, por lo que supongo, hay un elemento html o clases css que faltan y son las que te hacen el daño.

Sin embargo te tengo que aconsejar no colocar: "align="right" o valign="middle" este ultimo ni funciona, así como nunca usar &nbsp;&nbsp; para separar el elemento del borde, eso puedes hacerlo fácilmente y validado 100% con CSS

Código HTML:
Ver original
  1. <div class="barrasa">
  2.   <div><!--ves como le quite esos atributos obsoletos?-->
  3.     <a href="http://localhost/MCA-iluminaria/registro/">
  4.       Entrar | Registrarse
  5.     </a>
  6.   </div>
  7. </div>

Código CSS:
Ver original
  1. .barrasa div
  2. {
  3.   text-align: right;
  4.   padding-right: 10px;
  5.   line-height: 50px;
  6. }

Esto funciona porque has declarado una altura estática de 50px al contenedor.

Nota: Hazle caso a BramSt y declarale al enlace un display: block, dale un color de fondo para probar sus limites y juega añadiendole padding: la medida que quieras; es una forma fácil de testear los limites de un elemento.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #4 (permalink)  
Antiguo 08/02/2016, 21:17
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 12 años, 7 meses
Puntos: 3
Respuesta: se reduce el link

Perdón que no seguí el hilo que inicie, pero ando con unos problemitas familiares.
Les cuento que si el texto queda alineado a la izquierda, el problema no sucede, pero lo quiero alineado a la derecha.
ahora lo hice asi
Código HTML:
Ver original
  1. <div class="barrasa">
  2.         <div class="es">            <a href="http://localhost/MCA-iluminaria/registro/">Entrar | Registrarse</a>
  3.                 </div>
  4. </div>
Código CSS:
Ver original
  1. .barrasa{width:100%;background: #333333; color:#f78e28;height:50px;}
  2. .barrasa .es{text-align: right;
  3.   padding-right: 10px;
  4.   line-height: 50px;}
  5. .barrasa a {color:#f78e28;}
  6. .barrasa a:hover {color:#fff;}

Pero sigue con el problema
  #5 (permalink)  
Antiguo 09/02/2016, 11:14
 
Fecha de Ingreso: mayo-2013
Mensajes: 169
Antigüedad: 6 años, 6 meses
Puntos: 25
Respuesta: se reduce el link

Cita:
Iniciado por Gustavo1973 Ver Mensaje
Perdón que no seguí el hilo que inicie, pero ando con unos problemitas familiares.
Les cuento que si el texto queda alineado a la izquierda, el problema no sucede, pero lo quiero alineado a la derecha.
ahora lo hice asi
Código HTML:
Ver original
  1. <div class="barrasa">
  2.         <div class="es">            <a href="http://localhost/MCA-iluminaria/registro/">Entrar | Registrarse</a>
  3.                 </div>
  4. </div>
Código CSS:
Ver original
  1. .barrasa{width:100%;background: #333333; color:#f78e28;height:50px;}
  2. .barrasa .es{text-align: right;
  3.   padding-right: 10px;
  4.   line-height: 50px;}
  5. .barrasa a {color:#f78e28;}
  6. .barrasa a:hover {color:#fff;}

Pero sigue con el problema
¿se puede ver tu página en algun sitio?... si no puedo analizarlo con el firebug poco puedo ayudar XD.
  #6 (permalink)  
Antiguo 09/02/2016, 19:00
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 12 años, 7 meses
Puntos: 3
Respuesta: se reduce el link

Perdón, dentro del header del lado derecho, tengo otro menú con position:relative y por la altura, cubría parte del texto. Eso hacia que el cursor no activara el link.
Gracias por su ayuda y disculpen las molestias!!!

Etiquetas: background, color, hover, link, reduce, width
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 07:11.