HTML - Div con link

 
Vista:

Div con link

Publicado por andreu (1 intervención) el 02/05/2018 09:33:05
Hola buenas necesito ayuda con un menu para mis paginas que he hecho durante el curso; esta es la estructura de div + a que tengo para acceder a las paginas:

1
2
3
<div class="zoom">
<a  href=libros/index.html> Biblioteca de libros  </a>
</div>

Y este el css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.zoom {
 
    background-image: url('src/IMAGES.jpg');
    background-repeat: repeat;
 
    transition: transform .2s; /* Animation */
 
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    color: #222; 
    font-size: 24px;
    font-weight: bold;
    padding: 12px 0;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    text-transform: uppercase;
   margin: 20 0 0 0;
   border: 7px solid white;
 
}

Y lo unico que queda linkeable es el texto de dentro del div https://imgur.com/a/hq6Gdji Quiero que todo el div sea clickeable y no solo el texto.
Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Div con link

Publicado por xve (1543 intervenciones) el 02/05/2018 10:56:23
Hola Andreu, prueba a poner el class dentro del <a ...> y quita el div...
En el estilo, añade: display:block;

algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<a href="libros/index.html" class="zoom">Biblioteca de libros</a>
 
<style>
.zoom {
    display:block;
    background-image: url('src/IMAGES.jpg');
    background-repeat: repeat;
 
    transition: transform .2s; /* Animation */
 
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    color: #222; 
    font-size: 24px;
    font-weight: bold;
    padding: 12px 0;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    text-transform: uppercase;
    margin: 20 0 0 0;
    border: 7px solid white;
}
</style>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Div con link

Publicado por juan jose (51 intervenciones) el 02/05/2018 12:40:34
piensa un poco tienes un div, con un enlace dentro

1
2
3
<div class="zoom">
<a  href=libros/index.html> Biblioteca de libros  </a>
</div>


quieres un enlace, con un div dentro....

1
2
3
4
5
<a  href=libros/index.html>
    <div class="zoom">
        Biblioteca de libros
    </div>
</a>

la respuesta de xve tambien es buena, te ahorras un div, y deberias de ver shorthands y usarlas como

1
background: url('src/IMAGES.jpg') repeat;

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar