Anfernee Valera
Pregunta¿Cómo puedo agregarle el hipervínculo a mi logo? el background-image al estar en la etiqueta contenedora <li> y no en la etiqueta ancla <a> hace que deje de tener algo a lo cual vincular.
<nav> <ul class="nav-right-section"> <li> <a href="">Gmail</a> </li> <li> <a href="">Imágenes</a> </li> <li class="menu-icon"> <a href="#"></a> </li> <li> <a href=""> <img src="https://lh3.googleusercontent.com/ogw/ADGmqu8rLf89WDecfpjK-4fdHz43oWmRip6qB0KdgGQn=s32-c-mo" alt="Imagen Usuario"> </a> </li> </ul> </nav>```
- {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.3rem;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover {
cursor: pointer;
}
header {
width: 100%;
height: 6rem;
}
header nav {
display: flex;
justify-content: flex-end;
}
header nav .nav-right-section {
width: 250px;
height: 6rem;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}
nav .nav-right-section a {
margin-right: 1rem;
color: #000000;
}
.nav-right-section .menu-icon {
background-image: url(‘https://static.thenounproject.com/png/198752-200.png’);
width: 2.5rem;
height: 2.5rem;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
nav .nav-right-section img {
border-radius: 50%;
margin-left: 10px;
}```
Anfernee Valera
Gracias ana, me ayudaste mucho, no solo con esta duda, sino también para futuros casos.
Ana Hernández
Claro es semánticamente correcto, la forma de comprobarlo es respondiendo si cada elementos está siendo usado para lo que es, ejemplo. <nav>, lo estoy aplicando para un menú de navegación? Sí ul contiene elementos de una lista desordenada? Sí li es un elemento de la lista? Sí a crea un enlace a un sitio interno o externo? Sí Como quiero que accedan al enlace? Es por medio de una imagen? Entonces puedo agregar un img
Algo mal con la semántica sería por ejemplo, escribir todo un párrafo en un h2, o utilizar varios h1 en una página.
Acá te dejo una referencia de navbar de la documentación de Bootstrap 4
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a> </nav>
Continúa así, es importante cuidar la semántica.
Anfernee Valera
Gracias ana, pensé en esa solución pero no sabia si semánticamente estaría bien eso, ¿sabrás algo sobre si eso estaría bien desde un aspecto semántico?. Gracias por tu aporte.
Ana Hernández
Hola! Debes agregar el hipervínculo al elemento a, y colocar la imagen del logo dentro del elemento a, de manera que lo envuelva. El atributo href es propio de la etiqueta <a>
Jose Alberto Sanchez Nava
En tu codigo, en la parte de <li> agrega lo siguiente:
<li href="https://www.google.com">
