2

Hola buenas hace un tiempo que estoy intentando colocar unos botones fixed dentro de mi pagina web debido a que necesito que suban y bajen con el scroll, lo que pasa es que mi div central el que hace de contenedor es un relative, encontré la manera de colocarlos metiéndolos en un div y haciendo ese div fixed, pero tengo un problema que cuando redimensiono la pagina, estos botones se pierden o tapan otras cosas del diseño etc. me gustaría si me pudieran echar una mano para redimensionar los botones en conjunto con la pagina para que no siga causando esos errores.

Codigo css:

 .Formulario {

  width: 100%;
  height: 650px;
  padding-top: 50px;
  padding-bottom: 20px;
  background-color: #fbfbfb;
  position: relative;
  overflow-y: auto;
}

.cuadro_tramites {
  width: 100%;
  height: 500px;
  background-color: blueviolet;
  color: #fbfbfb;
  position: absolute;
  left: 0;
  top: 0;
  overflow-x: auto;
  display: flex;
}

.cuadro-scroll {
  max-height: 300px;
  width: 1400px;
  display: flex;
  overflow-x: auto;
}

.cuadro-permiso-circulacion {
  height: 290px;
  background-color: aliceblue;
  box-sizing: border-box;
  width: 350px;
  padding: 5px;
  margin: 0px auto;
  border-radius: 10px;
  text-align: center;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: auto;
}

.boton2 {
  width: 300px;
  height: 30px;
  background-color: crimson;
  color: aliceblue;
  margin-top: 50px;
  border-radius: 5px;
}

.label1 {
  color: black;
}

.btnEventos {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: blueviolet;
  position: absolute;
  top: 10px;
  left: -55px;
}

.btnSolicitarInfo {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: blueviolet;
  position: absolute;
  top: 10px;
  left: 35px;
}

.btnAudiencia {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: blueviolet;
  position: absolute;
  top: 10px;
  left: 130px;
}

.btnConocelosP {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: blueviolet;
  position: absolute;
  top: 10px;
  left: 230px;
}

.circulos {
  width: 100%;
  height: 100px;
  text-align: center;
  position: absolute;
  top: 500px;
}

.cuadro_directo {
  position: absolute;
  top: 800px;
  width: 100%;
}

.p_envivo {
  float: right;
}

.cuadrado1 {
  background: blue;
  position: absolute;
  border-radius: 4px;
  width: 90%;
  height: 30px;
  top: 10px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  z-index: 2;
}

.cuadrado2 {
  background: dodgerblue;
  position: absolute;
  border-radius: 4px;
  color: aliceblue;
  width: 90%;
  height: 30px;
  top: 50px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  z-index: 2;
}

.label2 {
  color: #fbfbfb;
}

.bienvenidx {
  margin-left: 20px;
}

.tramitx {
  margin-left: 20px;
}

.botones_fixed {
  position: fixed;
  width: 100%;
  min-height: 100px;
  background-color: #fbfbfb;
  top: 70%;
  left: 5%;
}

.cuadro_logo {
  background-color: blueviolet;
  width: 96%;
  height: auto;
  text-align: center;
  position: fixed;
  z-index: 2;
}
.linea{
  border-radius: 50%;
  background-color: blueviolet;
  width: 50px;
  height: 50px;
  margin-right: 30px;
}
.i_Eventos{
  width: 30px;
  height: 30px;
}
.i_solicitar_info{
  width: 30px;
  height: 30px;
}
.i_solicitar_audiencia{
  width: 30px;
  height: 30px;
}
.i_conoce_losP{
  width: 30px;
  height: 30px;
}

* {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.contenedor_tramites {
  width: auto;
  height: auto;
  margin-top: 100px;
}

.botones_espacio {
  width: 350px;
  height: 140px;
  background-color: #fbfbfb;
}

.contenedor {
  width: 100%;
  height: 100%;
}
.tabla{
  width: 100%;
}

codigo html:

<div class="contenedor">
<div class="Formulario" id="Formulario">
  <div class="cuadro_tramites">
    <div class="cuadro_logo" id="cuadro_logo">
      <img src="imagenes/logomuni.png" width="100" height="80">
    </div>
    <div class="contenedor_tramites">
      <h3 class="bienvenidx">Bienvenid@</h3>
      <h4 class="tramitx">Selecciona el tramite que deseas:</h4>
      <div class="cuadro-scroll">
        <div class="cuadro-permiso-circulacion">
          <form action="https://home.municipalidadgorbea.cl/archivos/3118">
            <label class="label1" for="Permiso-circulacion">Permiso de circulacion</label>
            <hr>
            <img class="i_pcirculacion" src="imagenes/coche.png" width="150px" height="150px">
            <button class="boton2" type="submit" value="Pagar aqui">Pagar aqui</button>
          </form>
        </div>
        <div class="cuadro-permiso-circulacion">
          <form action="https://www.sem.gob.cl/pago/buscar.php?pago_id=4&inst_id=69191200&setiframe=0">
            <label class="label1" for="Permiso-circulacion">Pago derechos de aseo</label>
            <hr>
            <img class="i_pago_derechos_aseo" src="imagenes/envase.png" width="150px" height="150px">
            <button class="boton2" type="submit" value="pagar aqui">Pagar aqui</button>
          </form>
        </div>
        <div class="cuadro-permiso-circulacion">
          <form action="https://mattgr05.github.io/Proyecto-app-muni/index4.html">
            <label class="label1" for="Permiso-circulacion">Tramites departamentos de obras</label>
            <hr>
            <img class="i_Tramites_DOM" src="imagenes/en-construccion.png" width="150px" height="150px">
            <button class="boton2" type="submit" value="pagar aqui">Revisar aqui</button>
          </form>
        </div>
        <div class="cuadro-permiso-circulacion">
          <form action="https://rsh.ministeriodesarrollosocial.gob.cl/portada">
            <label class="label1" for="Permiso-circulacion">Registro social de hogares</label>
            <hr>
            <img class="i_Registro_SH" src="imagenes/familia.png" width="150px" height="150px">
            <button class="boton2" type="submit" value="pagar aqui">Revisar aqui</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="circulos">
    <table class="tabla">
      <tr>
        <td><a href="https://mattgr05.github.io/Proyecto-app-muni/index5.html"><button class="linea"><img class="i_Eventos" src="imagenes/calendario.png"></button></a>
        </td>
        <td><a href="https://www.portaltransparencia.cl/PortalPdT/web/guest/directorio-de-organismos-regulados?p_p_id=pdtorganismos_WAR_pdtorganismosportlet&orgcode=e1c4b38162d39"><button class="linea"><img class="i_solicitar_info" src="imagenes/informacion.png"></button></a>
        </td>
        <td><a href="https://www.leylobby.gob.cl/instituciones/MU099"><button class="linea"><img class="i_solicitar_audiencia" src="imagenes/hacer-clic.png"></button></a>
        </td>
        <td><a href="https://mattgr05.github.io/Proyecto-app-muni/index3.html"><button class="linea"><img class="i_conoce_losP" src="imagenes/usuario.png"></button></a>
        </td>
      </tr>
      <tr>
        <td>
          <p class="parrafo">Eventos</p>
        </td>
        <td>
          <p class="parrafo">Solicitar informacion</p>
        </td>
        <td>
          <p class="parrafo">Solicitar audiencia</p>
        </td>
        <td>
          <p class="parrafo">Conoce los progrmas</p>
        </td>
      </tr>
    </table>
  </div>
  <div class="cuadro_directo">
    <h3>Gorbea en vivo:</h3>
    <h4>
      <p class="p_envivo">En vivo ahora 🔴</p>
    </h4>
    <iframe width="100%" height="250" src="https://www.youtube.com/embed/ceqgwo7U28Y" title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
    <div class="botones_espacio">
    </div>
  </div>

  <div class="botones_fixed">
    <button class="cuadrado1">
      <a class="label2" href="tel:452972000">Llamanos</a>
    </button>
    <form action="https://mattgr05.github.io/Proyecto-app-muni/index2.html">
      <button class="cuadrado2">
        Envianos un mensaje
      </button>
  </div>
</div>

introducir la descripción de la imagen aquí

imagen de la pagina normal

introducir la descripción de la imagen aquí

imagen de la pagina redimensionada

1 respuesta 1

0

Cordial saludo,

ya intento colocando en css filtros por tamaño de pantalla?

ejemplo:

@media only screen and (max-width: 600px) {
 .botones_fixed {
  position: fixed;
  width: 100%;
  min-height: 100px;
  background-color: #fbfbfb;
  top: 70%; /*modificalo de forma que no te tape el menu*/
  left: 5%;
 }
} 

ahi cuando la pantalla llega a un ancho de 600px realiza esos cambios.. normalmente en css se manejan 3 tamaños, el general, uno medio y otro pegueño para darle cimetria segun el espacio de la pantalla.

1
  • Hola muchas gracias por el comentario, ya logre solucionar ese problema, lo que hice fue hacer 2 botones en la misma parte donde se encontraban los del código que publique aquí, pero en vez de hacerlos con la etiqueta <button> use <a> para así no tener que hacer un form, estos los metí en un div y ese div lo hice fixed, los botones los deje sin position, por lo menos eso es lo que me resulto al final, saludos. Commented el 18 abr. 2022 a las 19:24

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.