Markus Steffen: Bekomme Responsive-Design nicht hin

Beitrag lesen

SELF-Forum

Bekomme Responsive-Design nicht hin

Markus Steffen
– Informationen zu den Bewertungsregeln

Hallo liebe Forum-Gemeinde,

ich versuche mich an einer sehr einfachen Webseite, die allerdings angepasst an die gängigen Geräte (PC, Tablet, Smartphone) dargstellt werden soll.

Bei einem PC soll eine Grafik 2/3 des Bildschirms einnehmen (volle Höhe, 66% der Breite), daneben (den restlichen 33%) soll Text dargestellt werden. Die Grafik liegt in 1258x1020x24 BPP vor. Der Text soll eine Mindestbreite haben, damit er sich nicht zusammenschiebt, wenn das Fenster skaliert wird. Die Grafik soll sich automatisch skalieren bis zu einer Mindestbreite/Höhe, dann soll die Grafik und der Text untereinander dargestellt werden.

Was mache ich falsch? Wahrscheinlich lässt sich das total leicht und mit der Hälfte der Zeilen lösen?

Vielen Dank für Eure Hilfe.

MfG MS

<!DOCTYPE html>
<html>
<title>Meine Firma</title>
<meta http-equiv="content-type" content="text/html; UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	body,table,tr,td 
	{ 
		font-family:Verdana; 
		font-size:10pt; 
		margin: 0px;
		padding: 0px;
		font-size: 20pt;
		line-height: 25pt;
		letter-spacing: -0.5px;
		color: #999999;
	}
	.bild 
	{
		background: url("bgimage2.jpg") center no-repeat;
		border: 1px solid black;
		min-width: 480px;
		height: 100vh;
	}
	.impressum
	{
		padding-top:15px;
		min-width: 250px;
	}

	@media only screen and (min-width: 1025px) 
	{
		.bild 
		{
			width: 66%;
			margin-right: 20px;
			float:left;
		}
		.impressum 
		{
			padding-top:15px;
			min-width: 250px;
		}
	}

	@media only screen and (max-width: 1024px) 
	{
		.bild 
		{
			width: 66%;
			margin-right: 20px;
			float:left;
		}
		.impressum 
		{
			padding-top:15px;
			min-width: 250px;
		}
	}

	@media only screen and (max-width: 480px) 
	{
		.bild 
		{
			width: 100%;
		}
		.impressum 
		{
			padding-top:15px;
			min-width: 250px;
		}
	}


</style>
<body>
<div id="container">
	<div class="bild">&nbsp;</div>
	<div class="impressum">
		Meine Firma<br/>
		Meine Strasse<br/>
		D-PLZ Ort<br/>
		Deutschland<br/>
		<br/>
		Ust.IdNr: DE1122334455<br/>
		<br/>
		Telefon: 0800 - 11 22 333<br/>
		Telefax: 0800 - 11 22 444<br/>
		Mobile: 0172 - 123 45 67<br/>
		</table>
		<br/>
		info@meinefirma.de<br/>
		www.meinefirma.de
	<div>
</div>
</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln