![](http://2.bp.blogspot.com/_hljKDuw-cxQ/Rq8JkRWfVYI/AAAAAAAAB6Y/4oc7TgFS6Tc/s00/outline_1.gif)
"Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline."
¿Cómo es eso? Primera noticia de la existencia de esa propiedad (todos los días se aprende algo nuevo, amén).
Estos contornos, se crean automáticamente sobre cualquier vínculo (etiqueta A), sobre cualquier elemento que pertenezca a un formulario y sobre las imágenes que se utilicen como mapas (etiqueta MAP), en teoría, "para destacarlos sobre el resto cuando tienen el foco" (cuando están activos), en la realidad, sólo sirven para molestarme.
Como el contorno está siempre encima, no influye en la posición o tamaño del bloque y es dibujado comenzando junto fuera del límite del borde.
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/Rq8JkhWfVZI/AAAAAAAAB6g/yVFgcYpibiM/s00/outline_2.png)
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/Rq8JkhWfVaI/AAAAAAAAB6o/AqKK9exTBJQ/s00/outline_3.gif)
outline-style: none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)
outline-color: el color del contorno (valor inicial invert)
a {outline:none;}
Cuando estoy creando o editando CSS, suelo utilizar un método bastante efectivo, recuadrar con border los bloques DIVs o cualquier otro elemento que quiera ver pero claro, siempre hay una pequeña variación ya que el borde "come" parte del ancho. Como outline no influye en el tamaño sino que funciona como una "capa transparente", es mucho más útil y basta darle valores para visualizar los elementos:
DIV {outline: 1px solid red;}
REFERENCIAS:
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RYYsHAuhGmI/AAAAAAAAACw/dkxg-2MF6RU/s320/WebExterna.gif)
8 comentarios:
Ah que bueno, lo del quitar outline.
Gracias
Ahora una pregunta:
Se pueden poner dos main wrapper, y hacer que cuando creas una entrada cada main wrapeer sea diferente y no sean la misma entrada?
Por ejemplo, tengo si tengo una plantilla de tres columnas, quiero tener sos dolumnas que sean entradas, y una columna de widgets.
Ahora bien, cuando hago eso, las dos columans de main wrapper me copia el mismo contenido del post.
Yo quisiera que en un main wrapper de post estuviera el contenido de la entrada del dia de hoy, y en el segundo main wrapper, el contenido de la entrada de ayer.
QUe no se copien el contenido
¿Se puede hacer eso?
Aunque te cueste creerlo... a mí me gustan esos puntitos.
Raro que es uno.
Renton
ID="main-wrapper", Los ID deben ser únicos, no puede haber dos con el mismo nombre, para el navegador, son el mismo.
Lo único que se me ocurre es tratar de "contarlos" para que los impares se muestren en un bloque y los pares en otro. Para empezar, debería duplicarse el código y cambiarse los IDs para que sean diferentes.
¿Se puede hacer? Imagino que si aunque en Blogger no he visto nada parecido, de cualquier manera, no parece una tarea sencilla.
Amigo Renton: en este mundo hay sitio para todos :D
Detesto esos puntitos desde el primer día que me puse ante el monitor.
Renton... no eres raro simplemente diferente :D
Jajajaaja, sobre gustos ... :D
Habra alguna forma(mediante css) de quitar la linea punteada de los elementos flash, sino hay me da igual que sea un scrip, pero que sea para definirlo una ves y que quede para todos los elementos, por ejemplo:
a {outline:none;}
quita la linea punteada a todos los enlases que haya en la pagina.
De la misma manera pero no efuncionará en IE:
embed, object {outline:none;}
No importa lo del ie, firefox es mejor y creo que hasta el mas neofito en el area se da cuenta de la diferencia, en fin, el que lo usa que se embrome, mi blog se ve bien con firefox.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...