[SOLUCIONADO] Tres <div> que actúen como un solo enlace.

[jurassicboy]

Buenos días compañeros,

A lo mejor la consulta que voy a hacer es muy básica, pero de verdad que no caigo en la manera de hacerlo.

Estaba trasteando con una imagen que consta de tres palabras, por ejemplo:

Hola
Como
Estas

Y pensé... ¿qué tal si creo esto mismo en CSS y así no utilizo una imagen?

Imaginaros que las tres palabras son un mismo enlace (a href) y están incluídas dentro de un mismo <div>. Por tanto cuando clique en cualquier zona del <div> se iluminarán los tres enlaces a la vez (hover) me dirigirá a la misma página.

Hasta aquí todo bien, pero.. ¿y si quiero que el "Como" central sea por ejemplo más pequeño que el "Hola" y el "Estas"? ¿Como lo haríais?

Pongo un ejemplo no funcional para ver mejor lo que quiero conseguir:

<a href="http://google.com">

<div id="tamanonormal">
Hola
</div>

<div id="tamanopequeno">
Como
</div>

<div id="tamanonormal">
Estas
</div>
</a>

Muchas gracias por vuestro tiempo.

[jonni09lo]

Hola en mi caso lo haría de la siguiente manera:

Código HTML:

<a href="http://google.com">
    <span id="tamanonormal">
        Hola
    </span>
    <span id="tamanopequeno">
        Como
    </span>
    <span id="tamanonormal">
        Estas
    </span>
</a>
 

Código CSS:

a{
    display:inline-block;
    width:300px; /*Opcional solo para ver que el span de Como se centre*/
}
a span{
    display:block;
}
#tamanopequeno{
    text-align:center;
}
 

Demo

Saludos

[jurassicboy]

Muchas gracias, funciona de maravilla. Parece que el secreto esta en los display's.

En caso de que al enlace le quiera dar un selector, ¿como debería escribir el "a span" y el "a"?

Código HTML:

<a href="index.html" id="footer_logo">
            
<span id="footer_logo_first">
Hola
</span>
                    
<span id="footer_logo_center">
Como
</span>
                    
<span id="footer_logo_first">
Estas
</span>
 

Código CSS:

#footer_logo {
 
text-indent:-9999px;
margin-right:22px;
width:111px;
height:45px;
 
 
}
 
#footer_logo a{
    display:inline-block;
    width:300px; 
    
}
 
#footer_logo a span {
 
    display:block;
 
}
 
#footer_logo_first{
 font-size:40px;
 
}
#footer_logo_center{
 
  font-size:20px;
  padding-bottom: 0px;
  padding-top: 0px;
  
}
 

Esto anterior no funciona, a y a span no saben a qué selector me refiero.


Gracias de nuevo.

[jonni09lo]

Si te fijas ya le estas dando un identificador a el a por ello el código quedaría de la siguiente manera:

Código CSS:

#footer_logo {
 
text-indent:-9999px;
margin-right:22px;
width:111px;
height:45px;
 
 
}
 
#footer_logo {
    display:inline-block;
    width:300px; 
    
}
 
#footer_logo span {
 
    display:block;
 
}
 
#footer_logo_first{
 font-size:40px;
 
}
#footer_logo_center{
 
  font-size:20px;
  padding-bottom: 0px;
  padding-top: 0px;
  
}
 

Pero lo que creo es que tu estructura deberia ser asi:

Código HTML:

<div id="footer_logo">
<a href="index.html">
            
<span id="footer_logo_first">
Hola
</span>
                    
<span id="footer_logo_center">
Como
</span>
                    
<span id="footer_logo_first">
Estas
</span>
</a>
</div>
 

De esta manera el código original que publicaste debería funcionar

Saludos

[jurassicboy]

Mil gracias, en cuanto llegue a casa le daré un buen repaso a la estructura anterior y a la que propones para notar la diferencia.

[jonni09lo]

Ok, si te sirve, recuerda compartir tu solución

Saludos