<!DOCTYPE html>
<html>
    <title>Baustellenbox</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Standard um eine Seite responsive zu gestalten -->
<style>
body { 
    font-family: Angsana,Calibri,Arial; 
    display:block; 
    text-align:justify; 
    font-size:12pt;
    vertical-align:middle;
    margin-right:20px;
    max-width:800px;
    min-width:400px;
    width:50%;  /*Ein Text darf nicht zu breit sein, damit er gut lesbar bleibt - Angabe in % für responsive Seite*/
    }          
 #dieBox /*wichtig ist die Box in einem block-Element zu platzieren - z.b. in <p>*/
	{
	width:80%;
	max-width: 400px;
	height: 250px;
	background-color:#eeaaaa;
	text-align:center;
	border: 5px solid #ff0000;
	margin-left: auto; /*wichtig ist auch margin auf auto zu setzen*/
    	margin-right: auto;
	}
/*Der besseren Lesbarkeit wegen wurden alle einfachen spezifischen styles in den Text integriert*/
/*media-styles zur Begrenzung für Mobiltelefone stehen hier, es können auch mehrere Stufen ähnlich gestaltet werden*/
@media only screen and (max-width:599px) {
	body {
		 margin-right:0px;min-width:350px;width:80%;text-align:left;clear:left;
	}
}
</style>
</head>
<body>
<h2>Die Baustellenbox</h2>

<p id="dieBox">
	<br/>
	Baustelle
	<br/>
	<img src="./hdata/constru.gif">
	<img src="./hdata/construerdhaufen.gif">
	<img src="./hdata/constru.gif">
	</p>    

</body>
</html>