JMiur [E]

Los enlaces (links) son elementos inline, es decir, miden tanto como su contenido y no generan un salto de línea automático, por eso es que podemos agregarlos en un texto sin que la página sufra colapsos:
blablabla blablabla <a href="unaURL">EL ENLACE</a> blablabla blablabla blablabla
Por lo general, el área donde podemos hacer click está definida por un color diferente y el ancho y el alto se corresponden con el ancho y alto del mismo texto sin embargo, muchas veces, nos vemos en la necesidad (o se nos da la gana) de crear enlaces un poco más "sofisticados", agregarles bordes o fondos pero, si lo hacemos, el resultado puede no parecer lo que esperábamos:

blablabla blablabla EL ENLACE blablabla blablabla blablabla

Mucho peor si se trata de alguna clase de lista con algún estilo:
<a style="background-color: #334455; border: 1px solid #556677;" href="#">ENLACE</a>
Daría como resultado algo así:

ENLACE A ALGUNA PARTE
ENLACE A OTRA PARTE
ENLACE A NINGUNA PARTE

En CSS, la propiedad que define si un elemento es de tipo inline o no es display y podemos modificarla a nuestro antojo así que nada impide que convirtamos los enlaces en el tipo contrario (block):
<a style="display: block; border: 1px solid #556677; background-color: #334455;" href="#">ENLACE</a>
El resultado sería algo así:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Como se ve, el enlace ocupa todo el ancho del contenedor, un poco exagerado pero ahora podemos agregarle más propiedades y controlar su diseño. Claro que para eso, lo mejor es crear un clase y aplicarla. Por ejemplo:
a.enlaceDemo {
background-color: #334455;
border: 1px solid #556677;
color: #AABBCC !important;
display: block;
height: 22px;
line-height: 22px;
margin: 5px;
padding: 0 10px;
width: 200px;
}
Y, en lugar de agregar el estilo en cada uno de ellos, indicamos la clase:
<a class="enlaceDemo" href="#">ENLACE</a>
La lista estará más ordenada:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
En general, como el color de los enlaces está predefinido, si queremos cambiarlos en algún modelo, es necesario agregarle la palabra !important para que el cambio surta efecto.

Como es una lista, usamos width y height para darles a todos el mismo tamaño. Con padding establecemos la distancia que habrá entre el contenido (el texto) y los bordes; con margin, la distancia que habrá entre un bloque (los enlaces) y otro. Por último, para que el texto quede centrado verticalmente, le damos a la propiedad line-height el mismo valor que a la propiedad height.

Por supuesto, podemos agregar cualquier otra propiedad, incluyendo imágenes de fondo:
  background: #334455 url(laImagen) no-repeat 10px 50%;
padding: 0 10px 0 30px;
Colocamos la imagen en el fondo, la posicionamos algo hacia la izquierda (10px) verticalmente centrada (50%) y aumentamos el padding izquierdo para que el texto no se superponga:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Podemos agregarle un efecto mouseover añadiendo una nueva definición donde cambiamos algunas propiedades por otras y usamos text-decoration: none para que no se subrayen los textos:
a.enlaceDemo:hover {
background: #000000 url(laImagen) no-repeat 10px 50%;
border: 1px solid #333333;
color: #FFFFFF !important;
text-decoration: none;
}
El último ejemplo:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Ahora, simplemente, basta ponerse ...

A JUGAR

33 comentarios:

Gem@  

Utilísimo :)
Por cierto tus feeds llevan retraso, antes me llegaban al momento las actualizaciones y llevo unos de días que no veo la nueva actualización y al venir aquí en efecto hay algo nuevo :O

Responder
JMiur  

Uffff. Los revisaré pero ya sabes, eso es algo que no podemos controlar. Le daré una mirada y lo sacudiré un poco :D

Responder
k_nelita  

Yo estoy mas loca que de costumbre o aquí hay algo raro? :o
Este post ya lo lei antes, hace unos días, aunque no tan largo, el título era algo de los links y decía 14 de Febrero (en el título), hasta dejé un comentario preguntando que tenía que ver lo de los links con el 14 de Febrero, estoy muy loca, alucino, lo soñé? Me podés explicar JM?? Ya no entiendo mas nada :S

Responder
JMiur  

Ahhhhh son los misterios de Blogger :D Al parecer hubo un error en post que se publocó unos minutos aunque estaba en borrador. Justo dejaste un comentario ahí. al rato, solito, volvió a donde pertenecía, a los borradores y el comentario desapareció aunque aún lo tengo en GMail.

Es otro de los grandes misterios de la naturaleza :D

Responder
k_nelita  

Ja ja jaaa me lo imaginaba, no porque no crea que estoy medio chiflada, pero yo también tengo el comentario en el correo y cuando quise entrar al post, me decía que no existía, y el único comentario fue el mío, de apurada-atolondrada jajaaa
Gracias igual por aclaralo, ahora se que no estoy taaaan loca juaaa
En serio, por un momento pensé "yo estoy alucinando, o ya sueño con esto también?" Si, en realidad sueño con los blogs, pero esto era como muy real :D Me dije "soy vidente!!" ja jaaaa

Responder
Tigremen  

Justo lo que buscaba, lo pongo en practica ahora mismo.

Una duda JMiur ¿Como puedo hacerle? para cambiar la manita que me señala enlace, por cualquier imagen que yo elija.

Saludos desde Mexico. :D

Responder
jesgo  

Muy útil, superdetallado como siempre.
Saludos.

jesgo23

Responder
JMiur  

k_nelita: Fue para confundrte, nomás .D

Tigremen: Fijate en este post.

Saludos, jesgo :)

Responder
Graciela  

:P qué bonitos J, a jugar a jugar jajajaja, poquito es el tiempo que tengo en estos días, que por cierto me ayuda la temperatura, ideal!!! Muackkk

Responder
Alba  

MUy útiles . a ver si voy perdiendo el miedo y me animo :) saludos

Responder
Triki  

Hola Jmiur
Tengo un problema en el blog, desde ayer, cuando accedo a mi blog, me sale una publicidad de Weborama, en modo flotante que no se de donde ha salido. Yo no he añadido nada en la plantilla. ¿Que crees que puede haber sido? He borrado los archivos temporales y las cookies del ordenador, por si acaso, y no se resuelve, parece como se se hubiese incrustado en el blog.
Espero me puedas ayudar con esto.

Triki

PD: Disculpa por dejarte este comentario en esta entrada, pero no sabia donde ponerlo.

Responder
JMiur  

A jugar, Graciela :D

Alba: Ánimo y sin miedo, no es tan complciado como aparenta.

Triki: es el contador de MiArroba. Ese servicio agrega publicidad emergente en sus gadgets.

Responder
k_nelita  

No me toques a Miarroba... que yo tengo esos contadores y algo mas (como un blog)y no tengo publicidad en mis blogs, ni en los de Blogger, ni en el de Miarroba, en este último solo tengo un banner de publi arriba de todo.

Entré al blog de Triki y no vi ninguna publicidad de Weborama, yo tuve ese servicio hace tiempo y lo saqué por eso por el popups.
Aviso que desactivé el Adblok y puse que me aparecieran ventanas emergentes y no me apareció nada, para ver el blog de Triki.

Para comprobar que sea lo que dices porque no pasás por mis blogs Te Propongo y FolkTango y me decís si te sale alguna publicidad, en los dos tengo los contadores de Miarroba.

Responder
Alba  

Me tomé ña libertad y entré a los tres blogs de K_nelita (por cierto me encantaron todos) y no conseguí ninguna publicidad , saludos

Responder
JMiur  

Lo siento, K_nelita pero, los contadores de Miarroba poseen publicidad y ellos lo dicen.

Hay decenas de páginas en la web que se quejan de lo mismo (1 | 2 | 3)

Lo mismo ocurre en Te Propongo (ver captura)

Que no todos lo vean o no se vea siempre e por la forma en que ellos disponen esa publicidad pero que existe, existe.

Responder
k_nelita  

Puede ser, dado lo de tu captura, pero los enlaces que ponés son dos del 2003 y otro de un foro que no conozco, y Miarroba dijo este año que pasó,(ahora no encuentro el enlace) que sacaban toda la publicidad para que la gente de otras plataformas usaran sus servicios, entonces nos mintieron!! grrr
Ya mismo saco los contadores!, los puse por eso, porque habían dicho que habían quitado toda publicidad, incluso "sacaron" la publi en los blogs que no tuvieran mas de 500 visitas semanales, de los de Miarroba.

Gracia JM por molestarte en revisar mis blogs ;)

Responder
JMiur  

Por lo que sé, siempre incluyó publicidad. Tal vez la hayan quitado temporalmente y la hayan restaurado recientemente porque hoy, es la tercera vez que me preguntan y en los tres casos pasaba lo mismo. En tus dos blogs pasa lo mismo pero tenés suerte porque sólo abre un popup, en otros caso, he visto abrirse hasta tres al mismo tiempo.

¡Fuera con ellos! :D

Responder
k_nelita  

Si, siempre tuvieron publicidad, en una época era imposible entrar a mi blog de Miarroba sin que te saltaran mil ventanitas.

Pero ahora nos mintieron! (indignada :|)Ya me van a oir... porque eso si tiene de bueno, se puede una quejar en los foros de soporte y pelear con el mismísimo dueño, no sería la primera vez que lo hago :D Y te contestan ehh, no como en Blogger...
Si has andado por el foro me habrás visto por todos lados ja jaa

Responder
NKR  

Hola JMiur.
Hoy entre en Vagabundia para buscar ,en Recursos, un generador de botones. Nada mas ver esta entrada no me hizo falta nada más. Muy bueno.
Gracias.

Responder
JMiur  

Me alegra que sirviera NKR :D

Responder
Triki  

Hola Jmiur
He quitado el contador de miarroba
Me podrías recomendar algun contador que no use publicidad emergente
Gracias

Responder
EmiTer  

Jmiur a mi tambien me ha pasado lo mismo que a Triki, he hecho una capturación de la ventana que me sale en el blog
http://www.uploadfilesystem.com/thumbs/09/02/12/tn_YcY76669.jpg

Responder
JMiur  

Triki:
Ahora veo el blog limpio, han desaparecido los popups. Dos contadores que uso: Sitemeter (muy sencillo) y StatCounter (muy completo).

EmiTer:
Eso veo. También tienes un contador de MiArroba. Parece una epidemia :D

En todos los casos, la publicidad no es constante pero está ahí, latente.

Responder
Birdelo  

Hola JMiur.

Uyyy, esto es muy cool y se ve excelente. Cada día uno encuentra cada cosa, ahora pregunto. ¿Cuando nos vas a dejar estar a gustos con nuestro blog?. Jejejeje, es pura broma. Siempre tienes cosas nuevas y ya lo que tenemos, al menos en mi caso, lo encontramos feo y pasado de moda, juaaa!.

Saludines y a poner en práctica ;).

Responder
JMiur  

Oh, no. Una vez que entras, se cierra la puerta y no hay salida .D

Responder
Triki  

Muchas gracias por tu ayuda

Responder
k_nelita  

Hola JM, volviendo al tema de los contadores de Miarroba, te traigo noticias fresquitas, dandote la razón obviamente :D
Recién pasé por el foro de soporte y me encontré con esto, para que a toda la gente le quede claro y sepa a que atenerse si usa los servicio de Miarroba: enlace
La fecha de esto es 17 de Febrero de 2009.
Está todo muy bien explicado con sus motivos y todo, por el dueño de Miarroba.

Responder
JMiur  

Saludos K_nelita. La aclaración vale :D

Responder
Tigremen  

Hola JMiur,

No se que pasa he usado lista de enlace verticales y no tengo problemas pero intente crear una lista horizontal, cambie display: inline y los primeros 3 enlaces aparecen en linea el cuarto ya se pasa al siguiente renglon.
Lo ocupe para mostrar canales de TV mira mi blog.

http://tigremen.blogspot.com

Estoy usando divs para mostrar o ocultar con el toogle, con eso no tuve problema alguno, desde la ultima vez que me ayudaste con el script ya solo cree otro y me funciona, me podras orientar? por que el cuarto enlace se baja un renglon?

Tambien utilize antes y despues el clear:both para que no se mezclaran los divs, pero no se que mas hacerle.

Saludos.

Responder
JMiur  

Si te refieres al "Libertadores/Sport", justamenete, el:

<div style="clear:both;" /> que está antes del <span .... con ese enlace es el que hace que ese cuarto enlace baje.

display: inline hace que un bloque deje de ser bloque. Los enlaces, la etiqueta A no es un eleemnto de bloque, por defecto, es inline, es decir, se muestra sin saltos de línea así que no hace falta que tenga esa propiedad.

Distinto en el caso de listas UL LI que si lo son y por lo tanto, por defecto, los items sse muestran uno debajo del otro y no, uno al lado del otro.

Responder
Tigremen  

Gracias como siempre JMiur,

Estuve metido en ese codigo mas de 4 horas y nunca le encontre jejeje.

Lo unico que si que si quito el display:inline se baja un renglon cada enlace,

Mil gracias como siempre Man.

Responder
Amador López Criado  

Hola JMiur. Estoy empezando con esto de css y mi duda es la siguiente: ¿en qué parte del blog se aloja la clase para que surta efecto? Gracias y feliz año.

Responder
JMiur  

El CSS puede ir entre <b:skin> y </b:skin> Todo lo que ves allí es CSS. También puedes colocarlo entre etiquetas <style> y </style&gt.

Esas etqiuetas STYLE pueden ponerse en cualquier parte, en un post o en un elemento HTML pero, lo normal, si es una clase para todo el sitio, es colocarlas antes de </head>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR