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>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%;
}