HTML 5 Layout

admin — Tue, 11 Aug 2009 11:32:47 +0000

Die Arbeit am HTML 5 ist zwar noch nicht abgeschlossen, da es aber von dem W3C-Konsortium vorgestellt und schon von den modernen Browsern unterstützt wird, werde ich in diesem Artikel zeigen wie man ein Seitenlayout mit HTML 5 erstellt.

Als Vorlage werde ich ein einfaches Design wie dieses hier verwenden:

Das HTML 5 Grundgerüst sieht dann wie folgt aus:


<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
  ...
  </body>
</html>

Bis auf den Doctype sieht die Synthax eigentlich nicht viel anders aus als bei einem XHTML/HTML 4 Document.
Um mit der Umsetzung des Layouts weiter zu machen, habe ich noch eine kleine Grafik erstellt, um die Synthax von HTML 5 besser darzustellen:

Jetzt kommt die Struktur:

<div id="doc">
  id="header">
    <h1>HTML5 Layout</h1>
    
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
  </header>
  id="content">
    
      <h2>Artikel Überschrift</h2>
      <p>Lorum ipsum...</p>
    </article>
  </section>
  
    <h2>Sidebar</h2>
    <p>Lorum ipsum...</p>
  </aside>
  
    <a href="#">Impressum</a>
  </footer>
</div>

Wie man eindeutig erkennen kann, bekommt die HTML 5 Struktur mehr Symantik. Die einzelnen Elemente wie z.b. Header, Navigation, Sidebar usw. bekommen endlich eigene Tags was auch zu einem schlankerem Code führt. Das eine “div” wird verwendet, um dem Layout eine feste Breite zu verschaffen und um alles zu zentrieren.

Damit jetzt alles Form und Farbe bekommt folgt nun das CSS:

/* HTML5 HACK -------------------------------------- */  
header, section, footer, aside, nav, article {  
	display: block;  
}
 
/* LAYOUT ------------------------------------------ */
 
body {
  background: #fff;
  font-size: 12px;
  font-color: #444;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#doc  {
  width: 800px;
  margin: 0 auto;
}
 
/* HEADER & NAVIGATION ------------------------------ */
 
#header {
  background: #333;
  padding: 0 15px;
}
 
#header h1 {
  margin: 0;
  padding: 15px 0;
  color: #A5A5A5;
}
 
#header nav ul {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
 
#header nav ul li {
  display: inline;
  margin: 0;
  padding: 0;
}
 
#header nav ul li a {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  background-color: #CC3366;
  text-decoration: none;
}
 
#header nav ul li.active a,
#header nav ul li a:hover {
  background-color: #fff;
  color: #444;
}
 
/* CONTENT ------------------------------------------ */
 
#content {
  width: 440px;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
}
 
/* SIDEBAR ------------------------------------------ */
 
aside {
  width: 300px;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
}
 
/* FOOTER ------------------------------------------ */
 
footer {
  clear: both;
  background: #DDD;
  text-align: right;
  padding: 10px 15px;
  margin: 10px 0 0 0;
}
 
footer a {
  color: #999;
}

Am Anfang des CSS Files befindet sich ein kleiner Hack, damit sich die HTML 5 Elemente (header, section, footer, aside usw.) wie ganz normale Block-Level-Elemente verhalten. Wie es auch bei einem “div” der Fall ist.
Das komplette Ergebniss aus HTML und CSS kan man hier sehen.

Wie schon oben erwähnt befindet sich HTML 5 noch in der Entwicklung und wird zur Zeit leider in nur wenigen Browsern unterstützt. Für den IE gibts halt wie immer Workarounds. Es ist aber gut das man jetzt schon mit HTML 5 arbeiten kann.

Mehr Informationen gibts hier (english):
http://www.w3.org
http://html5doctor.com

CSSGURU.DE » HTML5

HTML 5 Layout