Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Duda(Desafio Encriptador de texto)

por Jorleidy Paola Cantillo Rudas
| 27k xp | 1 posts

Hola buenos días, espero estén todos bien. estoy desarrollando el encriptador de texto pero resulta que mi botón de copiar no esta alineado con los otros dos botones (se desliza por la pantalla cuando muevo la barra)

Agradezco si alguien me puede ayudar!

comparto mi código HTML y CSS

Solo letras minúsculas y sin acentos 
</div>
</section>
<section>
  <textarea class="mensaje" cols="20" rows="10"></textarea>
   <div>
    <button class="btn-copiar">Copiar</button>
   </div>
</section>

*{ background-color: #F3F5FC; font-family: "inter"; font-weight: 400; font-size: 32px ; line-height: 150%; }

.logo{ padding-top: 10px; margin-left: 10px ; width: 10%; }

main{ display: flex; margin-bottom: 50px; margin-left: 80px; }

.text-area{ border: none; color: #0A3871; margin-top: 90px; text-transform: lowercase; }

::placeholder{color: #0A3871;} .text-area:focus{ outline: none; }

.mensaje{ background: white; background-image: url(Muñeco.png); background-repeat: no-repeat; border: none; border-radius: 20px; color: #0A3871; margin-left: 98px; margin-top: 20px; position: fixed; }

.mensaje:focus{ outline:none; }

.btn-desencriptar{ background: #d8dfe8; border: 1px solid #0A3871; border-radius: 24px; color: #0A3871; cursor: pointer; height: 67px; margin-left: 30px; width: 328px; }

.btn-encriptar{ background-color: #0A3871; border: 1px solid #0A3871; border-radius: 24px; color: white; cursor: pointer; height: 67px; width: 328px; }

.btn-copiar{ border: 1px solid #0A3871; border-radius: 24px; color: #0A3871; cursor: pointer; height: 67px; margin-left: 108px; margin-top: 402px; position: absolute; width: 328px; } Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Como se puede ver en la imagen el botón "copiar" no se queda estatico en su sitio sino que se mueve.

1 respuesta
por Daysibel.pitter
| 115.7k xp | 523 posts
Instructor

¡Hola Jorleidy!

Entiendo tu problema con el botón de copiar en tu encriptador de texto. Parece que el problema está relacionado con la posición absoluta que le has dado al botón en tu archivo CSS. La posición absoluta hace que el botón se posicione de forma fija en relación con el primer ancestro que tenga una posición relativa o absoluta. En este caso, al no tener un ancestro con posición relativa o absoluta, el botón se posiciona en relación con el documento HTML, lo que puede causar que se desplace cuando mueves la barra.

Para solucionar esto, puedes envolver el botón de copiar en un contenedor con posición relativa. De esta forma, el botón se posicionará de forma fija en relación con ese contenedor y no se moverá al desplazar la barra. Aquí te muestro cómo podrías modificar tu código CSS:

.contenedor-botones {
    position: relative;
}

.btn-copiar {
    position: absolute;
    bottom: 20px; /* Puedes ajustar esta propiedad según tu diseño */
    right: 20px; /* Puedes ajustar esta propiedad según tu diseño */
}

Y en tu HTML, agregar el contenedor alrededor del botón de copiar:

<div class="contenedor-botones">
    <button class="btn-copiar">Copiar</button>
</div>

Con estos cambios, el botón de copiar debería permanecer estático en su lugar sin desplazarse al mover la barra.

Espero que esta solución te sea de ayuda. ¡Buena suerte con tu proyecto de encriptador de texto!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios