hacer entero -etiquetar un enlace

3 minutos de lectura

avatar de usuario
SuMi

Estoy trabajando en una personalización de wordpress donde necesito una etiqueta de artículo completa para que sea un enlace.
Básicamente, cuando muevo el <article> el color de fondo cambia (funciona) pero no puedo calcular el html para convertir toda la etiqueta en un enlace. he probado de las dos formas

<a href="https://stackoverflow.com/questions/38367002/mylink">
    <article>
        /*article content: an image, header &text*/
    </article>
</a>

y

<article>
    <a href="https://stackoverflow.com/questions/38367002/mylink">
        /*article content: an image, header &text*/
    </a>
</article>

  • Hay algo mal si tienes que hacer todo article un enlace

    – Sr. Alien

    14 de julio de 2016 a las 6:40

  • @Mr.Alien Es bastante común que un blog o tienda tenga la entrada completa de la publicación/producto como un enlace

    – Excepción de excepción recursiva

    17 de junio de 2017 a las 19:56

avatar de usuario
Kijan Maharjan

El primer código debería funcionar. añadir clase a <a> etiquete y use css display:block property.

.block{
  display: block;
}
<a class="block" href="https://stackoverflow.com/questions/38367002/mylink">
    <article>
        <img src="http://placehold.it/400/400" alt="" />
    </article>
</a>

  • Realmente debería señalar (al sugerir de esta manera) que: al usar esta solución, no puede tener otros elementos de anclaje dentro del artículo.

    – Roko C. Bulján

    14 de julio de 2016 a las 6:51

  • Buen punto @RokoC.Buljan. Una solución JS (haga clic en evento en ) sería útil en ese caso

    – Anupam

    10 de enero de 2020 a las 17:32

  • Desafortunadamente, desde a es un elemento en línea y article un elemento de bloque, creo que en realidad no es HTML válido. No creo que sea legal anidar elementos de bloque dentro de elementos en línea. Sin embargo, debo aceptar que esta solución tiene más sentido y no puedo pensar en una mejor. Por supuesto, se podría anidar el a dentro del artículo, pero article normalmente contiene otros elementos de bloque como header o h1 etc., así que no creo que haya una forma HTML válida de hacerlo. Supongo que en algún momento eliminarán la regla de que los elementos en línea no pueden contener elementos de bloque.

    – Stijn de Witt

    26 de abril de 2020 a las 11:52

  • Ah, me estoy haciendo viejo. Desde el empaquetado de HTML 5 a alrededor de los elementos de nivel de bloque está realmente permitido, de acuerdo con esta respuesta. ¡Esas son buenas noticias! ¡Hace que esta respuesta sea completamente válida! Tenga en cuenta que es posible que el enlace aún no contenga enlaces o botones anidados, etc.

    – Stijn de Witt

    26 de abril de 2020 a las 11:56

avatar de usuario
SuMi

Gracias Kijan!
tu respuesta casi funciona. Tuve que ajustarlo así:

    .parent{
	position: relative;
    }
    .block{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    }
    <div class="parent">
        <a class="block" href="https://stackoverflow.com/questions/38367002/mylink">
            <article>
                <img src="http://placehold.it/400/400" alt="" />
            </article>
        </a>
    </div>

así que básicamente darle una altura al enlace era esencial. y para que cubriera todo el artículo, lo hice en posición absoluta y tomé todo el fondo del artículo. Tal vez esto ayude a otros.

  • Sí, esa podría ser la solución para usted al posicionar según sea necesario para su sitio web. Saludos por la solución. Por cierto, si desea agregar otro enlace en el bloque, también puede colocar ese elemento, por ejemplo: leer más botón en la publicación. pero lo está haciendo mal al colocar la posición relativa y absoluta en la misma clase, es decir, .block

    – Kijan Maharjan

    14 de julio de 2016 a las 6:57


  • @KijanMaharjan eso fue solo un error tipográfico en el código de muestra.

    – SuMi

    15/07/2016 a las 11:00

  • Ooh, un fragmento en un bloque de código. ¿Qué pensarán a continuación?

    – Señor Lister

    22 de julio de 2016 a las 18:17

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad