0

Hola estoy aprendido como auto-didacta a hacer paginas web y tengo un problema en css cuando intento reducir el tamaño de la ventana de la pagina web, cuando reduzco el tamaño no se me quedan la imagenes fijas ni tampoco se adaptan al porcentaje al igual que el texto y otros elementos de la pagina...el tamaño de las 4 imagenes que aparacen son de; 2 imagenes de153x274 y las otras dos son una de 108x108 y la otra 200x200(la imagenes estan en px)si alguien me puede ayudar se lo agradeceria saludos.

Aqui dejo la configuracion html y css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge"
    <meta name="viewport"content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" type="text/css" media="screen" href="style-FinalDownloads.css">
    <link rel="stylesheet" type="text/css" media="screen" href="style-FinalDownloads-Menu.css">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">

    <title>BomberApp/Downloads</title>

     <style type="text/css">
        .boton_personalizado{
          position: relative;
         
          bottom: 230px;
          text-decoration: none;
          padding: 30px;
          font-weight: 600;
          font-size: 20px;
          color: #ffffff;
          background-color: #ff7200     ;
          border-radius: 6px;
          border: 2.5px solid black;
        }
        .boton_personalizado:hover{
            
          background-color:#ffaf1c ;
        }
      </style>

   <center><h2 class=" titulo-apli">𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧</h2></center>
   <p class="parrafo">

    para el escáner web Whats utilizado principalmente <br>
    para el escáner web whats,whats web, chat directo <br>
    sin número guardado, QR Scanner para todos los qr <br>
    y códigos de barras.</p><br>


                   
                   <img class="imgCabecera"  src="img-downloads/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-15/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-3.png">

</head>
<body>
<a class="link"><center><h1 >BomberApp</h1></center></a>
    
    
    

    
    
    <a class="boton_personalizado" href="https://vinkula.com">Downloads</a>
    
    
    
    
    
    
    <span class="boton-hamburguesa icon-menu" id="boton-hamburguesa"></span>
    <nav class="menu" id="menu">
        <lu>
        
            <li class="opcion"><a href="/index-inicio.html"><b><h2>--Inicio--</h2></b></a></li>
            <li class="opcion"><a href="/list-herramientas.html"><b><h2>--Herramienta--</h2></b></a></li>
            <li class="opcion"><a href="/list-comunicacion.html"><b><h2>--Comunicacion--</h2></b></a></li>
            <li class="opcion"><a href="/list-seccioniPhone.html"><b><h2>--Seccion iPhone--</h2></b></a></li>
            <li class="opcion"><a href="/list-aplicacionespopulares.html"><b><h2>--A. Populares--</h2></b></a></li>
            <li class="opcion"><a href="/list-juegos.html"><b><h2>--Juegos--</h2></b></a></li>
            <li class="opcion"><a href="/list-productividad.html"><b><h2>--Productividad--</h2></b></a></li>
            <li class="opcion"><a href="/list-almacenamiento.html"><b><h2>--Almacenamiento--</h2></b></a></li>
            <li class="opcion"><a href="/list-internet.html"><b><h2>--Internet--</h2></b></a></li>
            <li class="opcion"><a href="list-redes-sociales.html"><b><h2>--Redes Sociales--</h2></b></a></li>
            <li class="opcion"><a href="/list-navegadores.html"><b><h2>--Navegadores--</h2></b></a></li>
            <li class="opcion"><a href="/list-navegadoresygps.html"><b><h2>--Navegadores y GPS--</h2></b></a></li>
            <li class="opcion"><a href="/list-tvmultimedia.html"><b><h2>--TV Multimedia--</h2></b></a></li>

        </ul>
    </nav>
    </nav>
    <script>
        $burguerButton = document.getElementById('boton-hamburguesa');
        $menu = document.getElementById('menu');

        $burguerButton.addEventListener('click', menu);
        $menu.addEventListener('click', menu);

        function menu(){
            $menu.classList.toggle('active');
            $burguerButton.classList.toggle('icon-close');
        }
    </script>

<img class="fotoizquierda" src="img-downloads/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-15/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-1.png">
<img class="fotoderecha"  src="img-downloads/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-15/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-2.png">


<div class="container">

<section class="titulo-footer"><h2 class="footer-title">BomberApp</h2></section>

<img class="imagen-fondo" src="bomber-gris-200-jpg.jpg">

  <div class="line-1">
    
    <div class="line-2"><a href="Formulario-contacto.html"><b><h3>Contacto</h3></b></a></div>

    <div class="line-2"><b><h3>Sobre Nosotros</h3></b></div>

    
<il class="logo-2">

    <b><h3>BomberApp © 2022</h3></b>
</il>

</div>

</body>
</html>




body{background-color:  #C8D8D9 ;
    padding:250px; 
    border: 20px solid #eee;
    border-radius: 10px;
   }
   



`introducir el código aquí`a{background:transparent;
        color: black;
        text-decoration: none;
       }




.link{position:relative;
        left:20px;
        bottom: 450px;
        font-family:'Pacifico', cursive;
        text-align:center; 
        font-size: 40px;
        text-decoration: none;
        text-align:center;}
        .titulo-apli{position:absolute;
          border-style: double ;
          border: 3.5px solid gray;
            top:250px;
            height: 55px;
            text-align: center;
            font-family: 'Bree Serif', serif;
             background: White;
             top:220px;
            left: 460px;
            width: 500px;
            border-radius: 10px;
        }
        



.parrafo{position: absolute;
          overflow:visible;
          text-align: center;
        height: 30px;
            font-family: 'Bree Serif', serif;
            top:300px;
            left:480px;
            background:#dfdfdf ;
            border: 2.5px solid gray;
            border-radius: 10px;
            padding: 60px;
            padding-top: 0px;
        }




.imgCabecera{position:relative;
            left:20px;
            top:-20px;
            border: 3.5px #606060;
            border-radius: 10px;
            border-style: solid;           
}





.fotoizquierda{position:absolute;
               bottom: -120px;
              right: 700px;
               border-style:solid;
               border-radius: 10px;
               border:3.5px solid #606060; 
             }





.fotoderecha{position: absolute;
            bottom: -120px;
            right: 410px;
          margin-left: 70px;  
            border: 3.5px #606060;
            border-radius: 10px;
            border-style: solid;           
}




.titulo-footer{position:relative;
          margin-bottom: 100px;
            bottom: 150px;
            font-size: 40px;
           font-family:'Pacifico', cursive;
          /* posicion titulo inferior */
          margin:180px;
          margin-bottom: 200px;
          left:50px;
          }






.line-1{position: absolute;
    left:500px;
    top:1150px;
  }
  



.line-1 .line-2 {
      text-align: center;
    float: left;
    padding: 25px;
    margin-left: 25px;
    background-color: transparent;
    font-family: 'Bree Serif', serif;
}




.logo-2{font-family: 'Bree Serif', serif;
         position: absolute;
           bottom: -50px;
           left: 80px;
        word-spacing: 20px;
          }

         



.imagen-fondo{position:absolute;
          left:580px;
        bottom: -530px;
     }




.container{
  
             bottom: 300px;
           border: 17px solid     #606060;
            border-style: double;
          border-radius: 10px;
          width: auto;
          height: 600px;
        
        }



/**************************** Para los íconos del botón ***************************/
/*Fuente: https://icomoon.io/app/#/select*/





@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?6jay0f ');
  src:  url('../fonts/icomoon.eot?6jay0f#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6jay0f') format('truetype'),
    url('../fonts/icomoon.woff?6jay0f') format('woff'),
    url('../fonts/icomoon.svg?6jay0f#icomoon     ') format('svg');
  font-weight: normal;
  font-style: normal;
}





[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}






.icon-menu:before {
  content: "\e9bd";
}





.icon-close:before {
  content: "\ea0f";
}

/**************************** Menu hamburguesa ***************************/





/* atributon boton */
.boton-hamburguesa{
  margin: 10px;
  width: 60px;
  height: 40px;
  line-height: 40px;  
  border-radius: 50%;
  left: 0;
  top: 0;  
  text-align: center;
  display: inline-block;
  position: relative;
  left:-150px;  /*posicion boton izquierda derecha*/
  /* altura posicion boton */
  top:-600px;
  z-index: 3;
  cursor: pointer;  
  background-color:  #1f81c0 ;  
}




.menu{
  position: absolute;
  text-align: center;
  top: 0;
  right: 5px;
  z-index: 2;
  /* anchura tableto menu */
  width: 20%;
  margin-top: 30px;
  left: -100%;
  transition: .3s;
 }




.menu.active{
  left: 0;
}




.menu ul{
  margin-top: 60px;
  padding: 10px;
}




.menu li{
  border: 1px solid #010101;
  list-style: none;
  display: block;
  padding: 18px;
  cursor: pointer;
  background: rgba(92, 173, 201, .5);
}




.menu li:hover{
  background: rgb(26, 53, 77);
  color: white;
}
2
  • 1
    Hola, tu estructura esta mal, dentro del head no puede ir una imagen ni texto que se mostrará en la web... no hay problema, quizás confundiste con el header que es lo que hará la función de encabezado dentro del lado visual de tu web, de igual manera con los <script></script> estos van en el head o antes de la etiqueta de cierre del body, mas no, a media web como lo tienes en tu código el 24 jun. 2022 a las 15:18
  • 2
    Puedes utilizar la web de Mozilla Developer para aprender los conceptos básicos de HTML y buscar acerca de la estructura básica de HTML5 para que puedas prender más. el 24 jun. 2022 a las 15:24

1 respuesta 1

1

En efecto tu estructura está mal, hice unas adecuaciones para que revises y compares los errores que tienes a través de comentarios HTML <!--#-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge"> <!-- No cerraste esta etiqueta-->
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <title>BomberApp/Downloads</title>

    <link rel="stylesheet" type="text/css" media="screen" href="style-FinalDownloads.css">
    <link rel="stylesheet" type="text/css" media="screen" href="style-FinalDownloads-Menu.css">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
</head> 
<!-- Aqui termina <HEAD> y dentro de esta etiqueta debes meter configuraciones adicionales (titulo, compatibilidad, favicon, charset, idioma) y adjuntar tus hojas de estilo, librerias o scripts-->
    

<style type="text/css">
.boton_personalizado{
    position: relative;
    
    bottom: 230px;
    text-decoration: none;
    padding: 30px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #ff7200     ;
    border-radius: 6px;
    border: 2.5px solid black;
}
.boton_personalizado:hover{
    
    background-color:#ffaf1c ;
}
</style>

<!-- Estos estilos tu los colocaste al final y no los colocaste dentro de una etiqueta <style> Debes colocar tus estilos siempre al inicio-->
<style>
body{
background-color:  #C8D8D9 ;
padding:250px; 
border: 20px solid #eee;
border-radius: 10px;
}

a{
    background:transparent;
    color: black;
    text-decoration: none;
}




.link{
    position:relative;
    left:20px;
    bottom: 450px;
    font-family:'Pacifico', cursive;
    text-align:center; 
    font-size: 40px;
    text-decoration: none;
    text-align:center;
}

.titulo-apli{
    position:absolute;
    border-style: double ;
    border: 3.5px solid gray;
    top:250px;
    height: 55px;
    text-align: center;
    font-family: 'Bree Serif', serif;
    background: White;
    top:220px;
    left: 460px;
    width: 500px;
    border-radius: 10px;
}

.parrafo{
    position: absolute;
    overflow:visible;
    text-align: center;
    height: 30px;
    font-family: 'Bree Serif', serif;
    top:300px;
    left:480px;
    background:#dfdfdf ;
    border: 2.5px solid gray;
    border-radius: 10px;
    padding: 60px;
    padding-top: 0px;
}

.imgCabecera{
    position:relative;
    left:20px;
    top:-20px;
    border: 3.5px #606060;
    border-radius: 10px;
    border-style: solid;           
}

.fotoizquierda{
    position:absolute;
    bottom: -120px;
    right: 700px;
    border-style:solid;
    border-radius: 10px;
    border:3.5px solid #606060; 
}

.fotoderecha{
    position: absolute;
    bottom: -120px;
    right: 410px;
    margin-left: 70px;  
    border: 3.5px #606060;
    border-radius: 10px;
    border-style: solid;           
}

.titulo-footer{
    position:relative;
    margin-bottom: 100px;
    bottom: 150px;
    font-size: 40px;
    font-family:'Pacifico', cursive;
    /* posicion titulo inferior */
    margin:180px;
    margin-bottom: 200px;
    left:50px;
}

.line-1{
    position: absolute;
    left:500px;
    top:1150px;
}

.line-1 .line-2 {
    text-align: center;
    float: left;
    padding: 25px;
    margin-left: 25px;
    background-color: transparent;
    font-family: 'Bree Serif', serif;
}

.logo-2{
    font-family: 'Bree Serif', serif;
    position: absolute;
    bottom: -50px;
    left: 80px;
    word-spacing: 20px;
}

.imagen-fondo{
    position:absolute;
    left:580px;
    bottom: -530px;
}

.container{
    bottom: 300px;
    border: 17px solid     #606060;
    border-style: double;
    border-radius: 10px;
    width: auto;
    height: 600px;
}

/**************************** Para los íconos del botón ***************************/
/*Fuente: https://icomoon.io/app/#/select*/

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?6jay0f ');
  src:  url('../fonts/icomoon.eot?6jay0f#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6jay0f') format('truetype'),
    url('../fonts/icomoon.woff?6jay0f') format('woff'),
    url('../fonts/icomoon.svg?6jay0f#icomoon     ') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
  content: "\e9bd";
}

.icon-close:before {
  content: "\ea0f";
}

/**************************** Menu hamburguesa ***************************/

/* atributon boton */
.boton-hamburguesa{
  margin: 10px;
  width: 60px;
  height: 40px;
  line-height: 40px;  
  border-radius: 50%;
  left: 0;
  top: 0;  
  text-align: center;
  display: inline-block;
  position: relative;
  left:-150px;  /*posicion boton izquierda derecha*/
  /* altura posicion boton */
  top:-600px;
  z-index: 3;
  cursor: pointer;  
  background-color:  #1f81c0 ;  
}

.menu{
    position: absolute;
    text-align: center;
    top: 0;
    right: 5px;
    z-index: 2;
    /* anchura tableto menu */
    width: 20%;
    margin-top: 30px;
    left: -100%;
    transition: .3s;
}

.menu.active{
    left: 0;
}

.menu ul{
    margin-top: 60px;
    padding: 10px;
}

.menu li{
  border: 1px solid #010101;
  list-style: none;
  display: block;
  padding: 18px;
  cursor: pointer;
  background: rgba(92, 173, 201, .5);
}

.menu li:hover{
  background: rgb(26, 53, 77);
  color: white;
}
</style>

<body> <!-- Desde aqui inicia <BODY> Todo lo que coloques dentro de esta etiqueta se va a apreciar en tu navegador -->
   
    <center><h2 class=" titulo-apli">𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧</h2></center>
    <p class="parrafo">
        para el escáner web Whats utilizado principalmente <br>
        para el escáner web whats,whats web, chat directo <br>
        sin número guardado, QR Scanner para todos los qr <br>
        y códigos de barras.
    </p>
    <br>

    <img class="imgCabecera"  src="img-downloads/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-15/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-3.png">
    <a class="link"><center><h1 >BomberApp</h1></center></a>
    <a class="boton_personalizado" href="https://vinkula.com">Downloads</a>

    <span class="boton-hamburguesa icon-menu" id="boton-hamburguesa"></span>
    <nav class="menu" id="menu">
        <ul> <!-- Esta etiqueta la escribiste mal. es UL y no LU-->
            <li class="opcion"><a href="/index-inicio.html"><b><h2>--Inicio--</h2></b></a></li>
            <li class="opcion"><a href="/list-herramientas.html"><b><h2>--Herramienta--</h2></b></a></li>
            <li class="opcion"><a href="/list-comunicacion.html"><b><h2>--Comunicacion--</h2></b></a></li>
            <li class="opcion"><a href="/list-seccioniPhone.html"><b><h2>--Seccion iPhone--</h2></b></a></li>
            <li class="opcion"><a href="/list-aplicacionespopulares.html"><b><h2>--A. Populares--</h2></b></a></li>
            <li class="opcion"><a href="/list-juegos.html"><b><h2>--Juegos--</h2></b></a></li>
            <li class="opcion"><a href="/list-productividad.html"><b><h2>--Productividad--</h2></b></a></li>
            <li class="opcion"><a href="/list-almacenamiento.html"><b><h2>--Almacenamiento--</h2></b></a></li>
            <li class="opcion"><a href="/list-internet.html"><b><h2>--Internet--</h2></b></a></li>
            <li class="opcion"><a href="list-redes-sociales.html"><b><h2>--Redes Sociales--</h2></b></a></li>
            <li class="opcion"><a href="/list-navegadores.html"><b><h2>--Navegadores--</h2></b></a></li>
            <li class="opcion"><a href="/list-navegadoresygps.html"><b><h2>--Navegadores y GPS--</h2></b></a></li>
            <li class="opcion"><a href="/list-tvmultimedia.html"><b><h2>--TV Multimedia--</h2></b></a></li>
        </ul>
    </nav> <!-- Estabas cerrando 2 veces la etiqueta <NAV> -->
    
    <script>
        $burguerButton = document.getElementById('boton-hamburguesa');
        $menu = document.getElementById('menu');

        $burguerButton.addEventListener('click', menu);
        $menu.addEventListener('click', menu);

        function menu(){
            $menu.classList.toggle('active');
            $burguerButton.classList.toggle('icon-close');
        }
    </script>

    <img class="fotoizquierda" src="img-downloads/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-15/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-1.png">
    <img class="fotoderecha"  src="img-downloads/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-15/𝐅𝐦𝐖𝐡𝐚𝐭𝐬-𝐥𝐚𝐭𝐞𝐬𝐭-𝐯𝐞𝐫𝐬𝐢𝐨𝐧-2.png">


<div class="container">

    <section class="titulo-footer"><h2 class="footer-title">BomberApp</h2></section>
    <img class="imagen-fondo" src="bomber-gris-200-jpg.jpg">
    <div class="line-1">
    
    <div class="line-2">
        <a href="Formulario-contacto.html">
            <b><h3>Contacto</h3></b>
        </a>
    </div>

    <div class="line-2">
        <b><h3>Sobre Nosotros</h3></b>
    </div>

    
    <div class="logo-2"> <!-- La etiqueta IL no existe, supongo que quisiste utilizar DIV-->

        <b><h3>BomberApp © 2022</h3></b>
    </div>

</div>

</body>
</html>

A partir de ahí, entonces, te sugeriría

  1. Utilizar las @Media-Querys
  2. Si no te gustan las @Media-Querys, utiliza el sistema de rejillas de Bootstrap
  3. Investigar sobre el Responsive Design (Diseño responsivo)
  4. Implementar otras unidades de medida en lugar de pixeles
1
  • gracias por intentar ayudarme.... hago los cambios que me habeis dicho y no consigo hacer que se adapte las imagenes y el texto del parrafo al tamaño de reduccion de pantalla en el portatil.... Al igual que si cambio el scripts de posicion de lugar en html fuera de body no me funciona la apertura del menu...hamburguesa Saludos
    – Whestt
    el 24 jun. 2022 a las 21:00

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.