Beiträge von noah_salinger

noah_salinger

Wir haben ein Problem mit den css für eine Webseite in der Schule. Wir hätten gerne, dass bei Verkleinerung des Tabs die Verhältnisse bzw. die Zentriertheit der Bilder und Textfelder gleich bleiben?

HTML

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title>Quiz erat demonstrandum</title>
    <link rel="stylesheet" href="stylesheet.css">
    <style type"text/css">
    body {
    background-image: url(informatikII.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    }
    </style>
  </head>
  <body>
    <div id="bgimg"></div>
      <table>
        <tr>
          <td><img id="phb"src="phb.jpg"></td>
        </tr>
        <tr>
          <td><img id="recc"src="recc.jpg"></td>
        </tr>
      </table>




      <img  id="Logo" src="logoqed.png">




    <form class="" action="seitezwei.html" method="post">
      <button type="submit" name="button">weiter</button>
    </form>




  </body>
</html>

Alles anzeigen

Code

#phb{  float: right;
  height: 75px; /*not final*/
  width: 150px; /*not final*/
  border: 2px solid black;
  border-radius: 10px;
  position: absolute;
  top: 5%;
  right: 10%;
}








#recc{
  float: right;
  height: 75px; /*not final*/
  width: 75px; /*not final*/
  border: 2px solid black;
  border-radius: 10px;
  position: absolute;
  top: 15%;
  right: 10%;

}




#Logo{
  display: block;
  width: 40%;
  position: absolute;
  top: 20%;
  left: 32%
}




#background{
  background-image: url(informatikII.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
}




img{
 height: 30%;
 width: 30%;




}




table{
  float: right;
}




button{
  position: absolute;
  float: right;
  font-family: "Copperplate Gothic Light";
  font-size: 18px; /*not final*/
  height: 50px; /*not final*/
  width: 100px; /*not final*/
  background-color: white;
  border: 2px solid black; /*not final*/
  border-radius: 10px; /*not final*/
  font-style: bold;
  top: 75%;
  right: 10%;
}

Alles anzeigen