Foros del Web » Creando para Internet » CSS »

Sacar marco a los links de las imagenes

Estas en el tema de Sacar marco a los links de las imagenes en el foro de CSS en Foros del Web. Hola amigos del foro, espero que me puedan disipar la siguiente duda. Habran obserbado que cuando uno clickea en un link a veces se forma ...
  #1 (permalink)  
Antiguo 29/01/2009, 01:29
Avatar de Undying  
Fecha de Ingreso: julio-2006
Ubicación: Argentina
Mensajes: 389
Antigüedad: 17 años, 8 meses
Puntos: 6
Pregunta Sacar marco a los links de las imagenes

Hola amigos del foro, espero que me puedan disipar la siguiente duda.
Habran obserbado que cuando uno clickea en un link a veces se forma un rectangulo punteado alrededor, incluso de las imagenes tambien cuando son links.

Bueno queria saber, que código tengo que agregar y donde para que esto no suceda
aca tienen un ejemplo de una imagen por las dudas(es el borde rojo)

Este es mi código CSS, por favor, diganme donde colocarlo
De antemano muchas gracias por su tiempo y valiosa ayuda para que mejore dia a dia.



body{
padding:0px;
margin:0px;
background-color:#FDFDFD;
}
a:hover{text-decoration:none;}
.m_text
{
font-family:Tahoma;
font-size:11px;
line-height:14px;
color:#858585;
}

.lt_text
{
font-family:Tahoma;
font-size:11px;
line-height:11px;
color:#858585;
}

.l_text
{
font-family:Tahoma;
font-size:11px;
line-height:11px;
color:#2197AA;
}

.l1_text
{
font-family:Tahoma;
font-size:11px;
line-height:11px;
color:#A1C935;
}

.l2_text
{
font-family:Tahoma;
font-size:11px;
line-height:11px;
color:#BCBD21;
}

.l3_text
{
font-family:Tahoma;
font-size:11px;
line-height:11px;
color:#E89300;
}

.c_text
{
font-family:Tahoma;
font-size:11px;
line-height:11px;
color:#8A8A8A;
}

.form
{
width:193px; height:20px; border-color:#CECECE; border-width:1px; background-color:#ffffff; border-style:solid
}

.form1
{
width:120px; height:20px; border-color:#CECECE; border-width:1px; background-color:#ffffff; border-style:solid
}

.form_div
{
height:23px; margin-top:-1px;
}

a.c_text{text-decoration:none;}
a.c_text:hover{text-decoration:underline;}

ul {margin:0; padding:0; list-style:none}
li {background:url(images/a.gif) no-repeat left center; margin: 9px 0px 0px 0px; padding:0px 0px 0px 13px}










-
__________________
LoveHateDreamsLifeWorkPlayFriendshipSex
  #2 (permalink)  
Antiguo 29/01/2009, 02:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sacar marco a los links de las imagenes

Debes añadir outline: 0; y lo debes colocar en el selector CSS de body o del elemento al que quieres quitar ese recuadro guionado.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 29/01/2009, 02:30
Avatar de Undying  
Fecha de Ingreso: julio-2006
Ubicación: Argentina
Mensajes: 389
Antigüedad: 17 años, 8 meses
Puntos: 6
Respuesta: Sacar marco a los links de las imagenes

Cita:
Iniciado por Mikmoro Ver Mensaje
Debes añadir outline: 0; y lo debes colocar en el selector CSS de body o del elemento al que quieres quitar ese recuadro guionado.

Muchas gracias por la pronta respuesta!


A lo que te referís es asi por ejemplo?

body{
padding:0px;
margin:0px;
background-color:#FDFDFD;
outline: 0;
)




Yo tengo un solo archivo .css para todos los documentos.
__________________
LoveHateDreamsLifeWorkPlayFriendshipSex
  #4 (permalink)  
Antiguo 29/01/2009, 02:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sacar marco a los links de las imagenes

Sí, y si no se lo pones en la CSS a los enlaces que sacan ese recuadro.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 29/01/2009, 02:45
Avatar de Undying  
Fecha de Ingreso: julio-2006
Ubicación: Argentina
Mensajes: 389
Antigüedad: 17 años, 8 meses
Puntos: 6
Respuesta: Sacar marco a los links de las imagenes

Muchisimas gracias!!!
__________________
LoveHateDreamsLifeWorkPlayFriendshipSex
  #6 (permalink)  
Antiguo 29/01/2009, 02:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Sacar marco a los links de las imagenes

De nada, es un placer.
Saludos.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 29/01/2009, 07:23
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Sacar marco a los links de las imagenes

aunque hay que recordar que si lo haces deberías especificar la propiedad a:focus y a:active para esos links porque una persona que navegue sin ratón no podrá saber donde se encuentra de la página...puedes ver más tips sobre accesibilidad en "los porqués de la accesibilidad"

Un saludo!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #8 (permalink)  
Antiguo 29/01/2009, 07:30
Avatar de Undying  
Fecha de Ingreso: julio-2006
Ubicación: Argentina
Mensajes: 389
Antigüedad: 17 años, 8 meses
Puntos: 6
Pregunta Respuesta: Sacar marco a los links de las imagenes

Cita:
Iniciado por Aresillo Ver Mensaje
aunque hay que recordar que si lo haces deberías especificar la propiedad a:focus y a:active para esos links porque una persona que navegue sin ratón no podrá saber donde se encuentra de la página...puedes ver más tips sobre accesibilidad en "los porqués de la accesibilidad"

Un saludo!

¿Y donde se halla esa propiedad?
¿Dónde la coloco Aresillo?
__________________
LoveHateDreamsLifeWorkPlayFriendshipSex
  #9 (permalink)  
Antiguo 29/01/2009, 07:35
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Sacar marco a los links de las imagenes

Eso lo pones en el css..
En el caso de imágenes, es cierto que el outline estropea un poco la apariencia por eso es bueno aplicar el efecto que le damos en el css al enlace con

a:hover{
...
}

añadiendo tambien el a:focus y el a:active, así:

a:hover, a:active, a:focus{
...
}

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #10 (permalink)  
Antiguo 29/01/2009, 07:44
Avatar de Undying  
Fecha de Ingreso: julio-2006
Ubicación: Argentina
Mensajes: 389
Antigüedad: 17 años, 8 meses
Puntos: 6
Respuesta: Sacar marco a los links de las imagenes

Eso ba debajo del body, no?

body{
padding:0px;
margin:0px;
background-color:#FDFDFD;
}
a:hover{text-decoration:none;}a:active, a:focus
.m_text


corrijanme por favor si me equivoco dado que hace unos meses nomas estoy con CSS
__________________
LoveHateDreamsLifeWorkPlayFriendshipSex
  #11 (permalink)  
Antiguo 29/01/2009, 08:24
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Sacar marco a los links de las imagenes

a ver... que te estoy liando...
no..
De momento olvídate de lo que comentaba. El domingo se publican las webs de la competencia CSS, en mi web podrás ver lo que te digo. Espera y lo ves con más claridad..

Si se me pira mándame un MP

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #12 (permalink)  
Antiguo 29/01/2009, 10:05
Avatar de Undying  
Fecha de Ingreso: julio-2006
Ubicación: Argentina
Mensajes: 389
Antigüedad: 17 años, 8 meses
Puntos: 6
Respuesta: Sacar marco a los links de las imagenes

Okey, buenisimo!
Gracias nuevamente :)
__________________
LoveHateDreamsLifeWorkPlayFriendshipSex
  #13 (permalink)  
Antiguo 03/02/2009, 02:56
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Sacar marco a los links de las imagenes

Ya que está todo publicado, lo prometido es deuda...
En el menú de la web:
Soluciones Web por Aresillo

tengo este código para el hover, es decir, cuando pasas el ratón:
Código:
#menu li a:hover, #menu li a:active, #menu li a:focus {
background: url(images/menuhover.jpg) repeat-x;
outline:0;
}
Quiere decir que cuando pases el ratón por encima de los a (enlaces) que haya en los li (elementos de una lista) del menu y lo mismo para cuando el enlace esté activo y enfocado, entonces se aplicará esto:
- un background
- un outline:0; no se verá recuadro de puntitos cuando se enfoca el enlace...

En este caso he quitado el outline porque lo he sustituido por un efecto poniéndole fondo y cuando haces foco, se sabe donde estás en la página..

En cambio en la sección de validaciones, tengo puesto el outline porque no hace ningún efecto más al pasar el ratón o al hacer foco, y si se lo quito una persona que navegue sin ratón no sabría donde se encuentra de la página...

En los enlaces a otros diseños de abajo de la web, tampoco he puesto outline porque hace el efecto de que sale la casilla con el nombre y entonces al navegar sin ratón se sabrá donde se está porque van saliendo los nombres... el código era este:
Código:
.subcaja:hover span,.subcaja:focus span, .subcaja:active span { 
visibility: visible;
bottom: 5px;
left: 0;
}
Es decir, que aparte del hover, también dices que lo haga en el active y en el focus. En este caso era un span. y por eso que en este código lo posicione y lo haga visible..


Por todo esto, es por lo que recomiendo hacer un uso responsable del outline, porque ultimamente se tiende a quitarlo para toda la web cuando es muchos casos no es necesario estéticamente y encima perjudica la accesibilidad de la web.


Un saludo!!

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
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 02:19.