logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


Tutorial Webseitenerstellung mit HTML 5 und CSS 3 / Teil 2 -- Grundformatierung

Im vorherigen Schritt haben wir das inhaltliche Grundgerüst erstellt, welches wir im 2. Teildes Tutorials nun ersteinmal grundformatieren werden mittels CSS Anweisungen.

Die wichtigsten Änderungen zur unformatierten Version werd ich im Quelltext des HTML-Dokuments farblich hervorheben und auf die CSS Datei verweisen mit zugehörigem Code.

Die Seiten sind über highslide javascript library zu sehen und öffen full size im Browserfenster als Popup über das rechte "HTML5 Tutorial - Menü

 

Grundaufbau der Seite im Tutorial

 

Webseitenaufbau

Wie im ersten Schritt des Tutorials beschrieben soll der Grundaufbau der Seite wie auf nebenstehender Grafik später aussehen.

Um dies zu erreichen werden wir nun das Grundgerüst aus Teil 1 des Tutorials mittels CSS Anweisungen stylen und schon einmal in eine grundformatierte Form bringen.

Im nachfolgenden, auskommentierten Quelltext läßt sich die Grundstruktur nachvollziehen und über den jeweiligen Downloadbereich die betreffende(n) Datei(en) auch downloaden. Ich werde nur die neu hinzugefügten Codes zeigen und farblich die Änderungen hervorheben.

 

Quelltext auskommentiert mit Beschreibung

 


<head> <!--Beginn head-->
<meta charset="utf-8" /> <!--Beginn meta-->
<meta name="description" content=" " />
<!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk
/html5.js></script><![endif]-->
<link href=stylesgrundformat.css rel=stylesheet />
<!--[if lt IE 9]><link href=ie.css rel=stylesheet /><![endif]-->
<head/> <!--Ende head-->

Es werden zur Darstellung im IE9 zwei Browserweichen eingesetzt die eine adäquate Anzeige im Internet Explorer Version 9 gewährleisten. Diese Browserweichen können wahrscheinlich bei einer Weiterentwicklung des Browsers später entfallen

Obendrein wird hier auf die externe Stylsheet Datei "stylesgrundformat.css" verlinkt um die Seite mit dortigen Anweisungen zu formatieren


<nav id=global><!--Beginn Hauptnavigation-->
<ul>
<li><a href=#>Navigation 1</a></li>
<li><a href=#>Navigation 2</a></li>
<li><a href=#>Navigation 3</a></li>
<li><a href=#>Navigation 4</a></li>
</ul>
</nav> <!--Ende Hauptnavigation-->

Die zugehörige Stylesheet-Anweisung


/* Navigation */
nav#global {
	margin: 30px 0 40px;
	width: 100%;
}
nav#global ul {
	text-align: center;
	height: 40px;
	margin: 0 auto;
	display: table;
}
nav#global ul li { position: relative; display: inline; }
nav#global ul li a {
	font-size: 14px;
	display: block;
	float: left;
	text-transform: uppercase;
	line-height: 40px;
	padding: 0 25px;
}
nav#global ul li a:hover {
	border: none;
}

Mit obigen Anweisungen bringen wir die Navigation ersteinmal in die richtige Position und bereiten Sie für eine horizontale Navigation vor (später mit dynamischen Submenüs)


<div class=clearfix> <!--Beginn Inhaltsbereich-->

Mit dem Clearfix wird umgangen das Elemente innerhalb eines Containers nach vorangegangenen Float-Elementen wieder richtg dargestellt werden, da sie mit dem float die Zugehörigkeit verlieren und das Clearfix dies wieder aufhebt.

Die zugehörige Stylesheet Anweisung


/* Clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { zoom: 1 } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */

Der div des Contents bekommt eine ID über die er per stylesheet angesprochen werden kann.


<div id=content> <!--Beginn Hauptinhalt-->

Die zugehörige Stylesheetanweisung


    #content {
	width: 600px;
	margin-right: 30px;
	float: left;
}


<footer class=clearfix><!--Beginn Seitenfooter-->

Die zugehörige Stylesheet Anweisung


/* Clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { zoom: 1 } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */

Beschreibung zu Clearfix siehe oben


<p class=copyright><!--Beginn Seiteninformationen-->
Copyright © 2010 <strong>IT Trombe</strong>. 
All Rights Reserved.
</p> <!--Ende Seiteninformationen-->
</footer> <!--Ende Seitenfooter-->

Die zugehörige Stylesheetanweisung


   .copyright {
	text-align: center;
	margin: 10px 0 30px;
	clear: both;
}

Hier wird die Textausrichtung festgelegt und die Abstände gesetzt, schliesslich ähnlich dem Clearfix die Zugehörigkeit erwungen.

 

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview

Dies war der zweite Teil des Tutorials indem das Grundgerüst formatiert wurde. Als nächsten Schritt werde über CSS Anweisungen, eigene Schriften hinzufügen.

Tags

HTML5 META Artikel Doctype Header Footer