0

Tengo una página web y estoy intentando mover un elemento link "a" dentro de un "div" ya existente. El código generado sería algo así:

<a href="google.es" class="download-link">Download file</a>
<form>
  ...
  </form>
<div class="footer"></div>

La idea es mover el link dentro de la clase "footer" mediante SCSS. Soy un novato en el maquetado y no consigo encontrar la forma. Supongo que podría hacerlo mediante el backend de la página, pero eso lo dejo como último recurso. Muchas a gracias a todos.

1
  • 1
    ¿Te refieres a moverlo a nivel visual o a nivel de código? Es decir, que visualmente el a ocupe el mismo lugar que el div o que el código se transforme a <div><a></a></div> (Esto último CREO que no se puede hacer con scss, tendrías que usar JavaScript/JQuery para hacerlo desde el cliente si quieres evitar el backend)
    – Rabegi
    Commented el 9 jul. 2018 a las 11:31

1 respuesta 1

0

Solo con css, o scss en tu caso podrías hacer algo así, de esta manera puedes conseguir que el enlace se vea dentro del footer:

.footer {border:1px solid black;width:100%;height:100px;}
.download-link {position:absolute;top:20%;}
<a href="google.es" class="download-link" id="link">Download file</a>
<form>
  ...
  </form>
<div class="footer" id="footer"></div>

Pero yo te recomiendo hacerlo con javascript para no tener que forzar el posicionamiento de los elementos, con js es mucho más fácil y aconsejable, tendrías que hacer que el enlace sea hijo del footer, aquí tienes un ejemplo:

document.getElementById("footer").appendChild(document.getElementById("link"));
.footer {border:1px solid black;width:100%;height:100px;}
<a href="google.es" class="download-link" id="link">Download file</a>
<form>
  ...
  </form>
<div class="footer" id="footer"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.