Wieder stelle ich ein minimal-Webdesign vor. Dabei beschränke ich mich nur auf das wesentliche. Am Ende steht es zum ansehen und downloaden zur Verfügung.

Was möchten wir für ein Webdesign?

  • für 1024er Auflösungen
  • 960 Pixel Breite
  • einen Header
  • eine Sidebar
  • einen Footer
  • etwas für den Content

Wir benötigen dazu nur:

  • CSS (style.css)
  • HTML (index.html)
  • 5 Div-Container
  • etwas Farbe

Schritt 1: Dateien anlegen

Lege als erstes zwei Dateien an. Eine namens “index.php”, die andere “style.css”.
Falls du Dateiendungen auf deinem (Windows) Computer nicht sehen kannst, geh in die Ordneroptionen unter Extras und deaktiviere “Dateiendungen von bekannten Dateien ausblenden”.

Schritt 2: Das HTML Grundgerüst

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<title>Full 960px Sidebar left</title>
</head>
<body>
 
	<div id="wgWrapper">
		<div class="borderBg" id="wgHeader">Header</div>
		<div class="borderBg" id="wgContent">Content</div>
		<div class="borderBg" id="wgSidebar">Sidebar</div>
		<div class="borderBg" id="wgFooter">Footer</div>
	</div>
 
	<div style="position:absolute;bottom:0;">Webdesign Vorlage von <a href="http://webmaster-glossar.de/">webmaster-glossar.de</a></div>
</body>
</html>

Erläuterung zum HTML-Teil

Neben dem HTML Grundgerüst brauch wir im body-Bereich fünf DIV-Container.
Wrapper: Dieser umrahmt sozusagen alle anderen Elemente. Diesen geben wir später die Anweisung, wie breit unser Design sein soll, aber auch das dies mittig ausgerichtet dargestellt werden muss.

Schritt 3: CSS Style-Datei mit den nötigen Anweisungen

body{
	margin:		0;
	width:		100%;
}
div{
	padding:	2px 5px;
	overflow:	hidden;
}
.borderBg{
	background-color:#E9E9E9;
	border:		1px dotted #808080;
}
 
#wgWrapper{
	width:		960px;
	margin-left:	auto;
	margin-right:	auto;
}
#wgHeader{}
#wgContent{
	width:		680px;
	float:		left;
}
#wgSidebar{
	width:		250px;
	float:		right;
}
	#wgContent, #wgSidebar{
		margin:	5px 0;
	}
#wgFooter{
	clear:		both;
}

Erläuterung zum CSS-Teil

Das body-Element benötigt einen margin von 0 Pixeln. Wir möchten schließlich keinen inneren Rand, welchen der Browser selbst festlegt. Dies könnte sich sonst negativ auswirken: horizontaler Scrollbalken!

Jeder DIV-Container erhält einen padding-Wert, damit wir vom Rand etwas Abstand gewinnen. Ebenso benötigen wir overflow:hidden, um übergroße Elemente nicht unser Design zerstören zu lassen.

Mit margin-left:auto und margin-right:auto legen wir fest, dass der Wrapper, welche übrigens alle unsere Elemente beinhaltet, mittig ausrichtet.

Sidebar und Content Container erhalten einen float. Dies bestimmt ob es links oder rechts ausgerichtet werden soll. In unserem Beispiel ist die Sidebar rechts. Du kannst der Sidebar auch einen left und dem Content DIV ein right zuweisen.

Der Footer hebt das float durch clear:both wieder auf.

Schritt 4: Ergebnis begutachten

Nachdem du beide Dateien gespeichert hast, kannst du die index.html doppelt anklicken, um diese in deinem Browser zu öffnen. Du solltest genau das gleiche Ergebnis sehen wie folgend:

Download und minimal-Webdesign ansehen

Hier ansehen:

Du kannst das Webdesign frei nutzen, es aber nicht selbst als Download/Verkauf/zum ansehen anbieten. Es kann natürlich erweitert und kommerziell genutzt werden.

Feedback

Hat dir dieses Webdesign-Tutorial gefallen? Hinterlasse hier doch ein Kommentar! Vielleicht hast du das Design bereits für deine Website weiter umgesetz? Schicke einen Link mit deinem Ergebnis! Viel Spaß mit dem minimal Webdesign.

GD Star Rating
loading...