[SOLUCIONADO] Links "a href" con imagenes o palabras no tengan borde punteado al oprimir click

Laura_Berenice · #1 (**permalink**) 07/05/2013, 21:22

Hola chicos:

Veran, estoy haciendo el html de un website y como todo sitio web sencillo tiene links "a href" con imagenes o palabras que enlaza a otras secciones o paginas...

Bien, lo que no me gusta o se ve muy poco estetico para los sitios web actuales es que cuando un usuario oprime click en un link de la pagina aparece un borde o margen punteado al rededor de la imagen o palabra del link...

Cuando se brinca a otra pagina o seccion en la misma pagina no tiene mucha importancia, pero cuando el link a href="www" tiene la etiqueta target="_blank" para abrir la pagina del enlace en otra ventana, en la pagina de mi website aparece ese borde punteado alrededor de la palabra o imagen del enlace.

La verdad se ve muy anti-estetico para los websites actuales, como se quita ese borde punteado de los links???

Ya lo intente con style css pero creo que no me funciono:

Código:

<style type="text/css">

#NJ5Background{
/*float:center;*/
height:0;
width:0;
max-width:100%;
background-image: url(http://i822.photobucket.com/albums/zz142/NJ5_ACS_Futbol/NJ5_Background_Coat_of_Arms_Clean-01_zps727b2cee.png);
background-repeat:repeat;
background-position:top;
background-size:auto;

}

</style>


<style>
 <link rel="STYLESHEET" type="text/css" href="estilos.css">
</style>

<STYLE type=text/css>BODY {
	SCROLLBAR-FACE-COLOR: #1a0e55; SCROLLBAR-HIGHLIGHT-COLOR: black; SCROLLBAR-SHADOW-COLOR: black; 
        SCROLLBAR-3DLIGHT-COLOR: black; SCROLLBAR-ARROW-COLOR: black; SCROLLBAR-TRACK-COLOR: gray; 
        SCROLLBAR-DARKSHADOW-COLOR: black
}
</STYLE>

<style>
A:link {text-decoration: none;}A:visited {text-decoration: none;}
</style>

<style type="text/css" madia="screen">
.contenidos{font-size:12px;font-family:Verdana,Helvetica,sans-serif;}
</style>
<style type="text/css" madia="print">
.contenidos{font-size:10px;font-family:Times New Roman,Times,serif;}
</style>

Disculpen que escriba todos los style css, pero quiero saber si los escribi mal o si es cosa de html5 el que ya no aparezca ese anti-estetico borde punteado en los links.

Triby · #2 (**permalink**) 07/05/2013, 21:32

Primero algunas notas:

1- Todos los atributos y etiquetas HTML y CSS se escriben en minúsculas.
2- Modificar el estilo de barras de desplazamiento (scrollbar) funciona solo en IE y en versiones antiguas, no sé si la 7 todavía lo "soporte"
3- No es un borde lo que aparece al hacer click sobre un enlace, sino un indicador de enlace activo, no sé el nombre en español, pero en inglés es outline.
4- Se supone que ese borde ayuda al usuario a ubicar el enlace donde hizo click, sobre todo si lo envías a pestaña/ventana nueva.

Si aún quieres "mejorar" la estética en detrimento de funcionalidad/usabilidad, entonces revisa esto: http://www.w3schools.com/cssref/pr_outline.asp

comablck · #3 (**permalink**) 08/05/2013, 00:23

ponele a las etiquetas q no queres el borde esta propiedad..

Cita:

outline: none;

Laura_Berenice · #4 (**permalink**) 10/05/2013, 20:43

Hola chicos, disculpen la demora por el trabajo y por hacerle al programador amateur.

Hola Triby:

De hecho hubico mas rapido los atributos HTML cuando estan escritos en mayusculas; De hecho en IE 7 y 8 es el unico buscador donde jala bien mi barra de dezplazamiento scrollbar.

Bueno, en las paginas actuales como sitios de noticias ya no se usa el indicador de enlace activo ("outline"), pero me pones a pensar en que estoy decidiendo entre la estetica y la funcionabilidad.

Despues de leer esa pagina que habla del "outline" me encontre este codigo:

Código:

<!DOCTYPE html>
<html>
<head>
<style>
p 
{
border:0px solid red;
outline-style:dotted;
outline-color:#FFFFFF;
}
</style>
</head>
<body>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>

Y las sintaxis javascript que presentan son estas:

Código:

object.style.outlineStyle="dotted"

object.style.outlineWidth="thin"

Y siguiendo el consejo de comablck de poner en las etiquetas "outline: none;" diciendo que no quiero el borde de la propiedad, escribi la sintaxis del codigo asi:

Código:

<style>
p 
{
border:0px solid red;
outline: none;
outline-color:#FFFFFF;
}
</style>

Pero de todas maneras aparece el borde punteado de los links en palabras e imagenes ("claro, el indicador de enlace activo")...

Código:

<script language="JavaScript1.2">
object.style.outlineStyle="none"
</script>

Tambien probe como sintaxis javascript, pero tampoco funciono...

Alguien me podria decir cual es la sintaxis mas adecuada??? Sera que el indicador de enlace activo no se puede desactivar??? Sera que esta mal quitar el indicador de enlace activo???

Para empezar esta pagina "Foros del Web" tiene el indicador de enlace desactivado, no aparece el borde de lineas punteadas al rededor de los links.

Triby · #5 (**permalink**) 10/05/2013, 21:02

Cita:

Iniciado por Laura_Berenice

De hecho hubico mas rapido los atributos HTML cuando estan escritos en mayusculas;

Tal vez para ti sea más fácil ubicar etiquetas y atributos escribiéndolos en mayúsculas, pero lee esto: http://webdesign.about.com/od/html5t...-sensitive.htm

Hay mejores formas de teclear código que usando mayúsculas, por ejemplo, utilizar un editor adecuado, que te ayude con coloreado de sintaxis, como Notepad++, entre muchos otros.

Cita:

Iniciado por Laura_Berenice

De hecho en IE 7 y 8 es el unico buscador donde jala bien mi barra de dezplazamiento scrollbar.

Cambiar el estilo a las barras de desplazamiento es algo que sólo funciona con IExplorer, los navegadores reales son más respetuosos de las preferencias de los usuarios.

Cita:

Iniciado por Laura_Berenice

Para empezar esta pagina "Foros del Web" tiene el indicador de enlace desactivado, no aparece el borde de lineas punteadas al rededor de los links.

Acabo de hacer la prueba haciendo click derecho sobre cualquier enlace para abrirlo en pestaña nueva; al cerrar esa pestaña, el enlace muestra correctamente el outline.

Cita:

Iniciado por Laura_Berenice

Alguien me podria decir cual es la sintaxis mas adecuada???

La forma adecuada es simplemente agregar outline:none; no requieres atributos adicionales y, si no te funcionó, es porque lo aplicaste a párrafos (p { outline:none; }) y no a enlaces (a { outline:none; }).

gaston_garcia · #6 (**permalink**) 11/05/2013, 17:43

Si no queres que ningún link tenga los puntitos, entonces en tu archivo de CSS podes ponerle esto:

Código:

a{
outline: none;
}

Laura_Berenice · #7 (**permalink**) 12/05/2013, 14:52

Hola Triby:

Estube leyendo tu sugerencia de no escribir con mayusculas las etiquetas de <HTML>...

Código:

Question: Are HTML 5 Tags Case Sensitive?
When you write XHTML, you must write all standard tags in lowercase because XHTML is case sensitive. This means that <HTML> is a different tag than <html> in XHTML.
Answer:
HTML 5, unlike XHTML, is not case-sensitive. This means that <HTML> and <html> and <HtMl> are all the same tag in HTML 5.
Convention in HTML 5 is to Use Lowercase
While it is valid to write tags using any case you prefer when writing HTML 5, the convention is to use all lowercase for tags and attributes. This ensures that if an HTML 5 document is one day converted to XHTML, there will be less difficulty for the developers. Plus lowercase letters are easier to read than uppercase letters, and most HTML editors insert tags as lowercase by default.

Traduccion:
Pregunta: ¿HTML 5 etiquetas mayúsculas y minúsculas?
Al escribir XHTML, debe escribir todas las etiquetas estándar en minúsculas porque XHTML entre mayúsculas y minúsculas. Esto significa que <HTML> es una etiqueta diferente a <html> en XHTML.
respuesta:
HTML 5, a diferencia de XHTML, no distingue entre mayúsculas y minúsculas. Esto significa que <HTML> y <html> y <HTML> son todos la misma etiqueta en HTML 5.
Convención en HTML 5 es el uso de minúsculas
Si bien es válido para escribir etiquetas usando cualquier caso de que prefiera al escribir HTML 5, la convención es usar todo en minúsculas para las etiquetas y atributos. Esto asegura que si un documento HTML 5 es de un día convertida a XHTML, habrá menos dificultad para los desarrolladores. Además, las letras minúsculas son más fáciles de leer que las letras mayúsculas, y la mayoría de editores de HTML insertar etiquetas en minúsculas de forma predeterminada.

Pero eso aplica cuando conviertes a HTML en XHTML, para HTML5 los atributos en minuscula y mayuscula son iguales, solo esta el detalle que al escrbri etiquetas HTML en mayuscula el lector de los navegadores de internet se tarda un poco mas en la lectura de la pagina. A mi me gusta en mi sitio esa pequeña pausa al cargar la pagina.

Código:

<style>
a { outline:none; }
</style>

Si tienes razon, asi se escribe el codigo que me funciono para desactivar el indicador de enlace activo. Pero como dices, es sacrificar funcionalidad por estetica. Yo me quedo con la estetica.

http://www.bbc.co.uk/mundo/

La pagina de la BBC de Londres tiene desactivado el indicador de enlace activo y cuando uno pone el mouse en un link imagino que un onmouseover hace que se subraye el link y que despues de hacer click en el enlace este cambie el color de la fuente para indicar que ya se clickeo ese enlace... Eso se me hace mas estetico y funcional que las lineas punteadas del indicador de enlace activo.

Hola gaston_garcia:

Gracias tambien por tu respuesta. Han sido muy amables por sus atentas soculuciones.