ï»¿ – Byte Order Mark (BOM) – Darstellungsprobleme

Loaden — Wed, 13 Jan 2010 20:42:27 +0000

Bei Arbeiten wurde ich auf ein merkwürdiges Zeichen “ï»¿” im HTML Dokument aufmerksam, weil dieses die Darstellung des Layouts beinträchtigte. Nach einiger Recherche fand ich heraus das es sich hierbei um das UTF-8 Byte Order Mark kurz BOM handelt. Das Byte Order Mark ist eine Bytefolge die von einigen Programmen verwendet wird um anzuzeigen das ein Dokument UTF-8 codiert ist. Anderen Programmen, wie Browsern, ist diese Bytefolge nicht geläufig. Häufig wird es dann in dieser Form ï»¿ dargestellt.

Einen Webbasierenden Test ob das BOM in einem Dokument vorhanden ist findest du hier: BOM Tester

Horizontal zentriertes 100% Höhe CSS Layout

Loaden — Sat, 26 Dec 2009 15:12:02 +0000

Während der Arbeit für Werbeagenturen ist mir aufgefallen, dass die meisten Designs als CSS Layout mit 100% Höhe am schönsten zur Geltung kommen. Eine prozentuale Breite für ein Web-Layout, das ursprünglich eine feste Breite hatte, lässt sich selten umsetzen. Eine prozentuale Höhe jedoch schon. Von prozentualen Maßen wollen Werbeagenturen in der Regel auch nichts wissen. Denn im Print Bereich, in welchem die Wurzeln der Agenturen liegen gibt es so etwas nicht. Was dabei nicht beachtet wird ist das der Designer bei einem Printmedium weiß wie groß die zu bedruckende Fläche ist. Im Web ist das anders. Die Größe und Auflösung des Bildschirm der Betrachter stehen nicht fest.

Das folgende HTML Grundgerüst wird hierfür benötigt:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Horizontal zentriertes 100% Höhe CSS Layout</title>
</head>
<body>
	<div id="wrapper">
		Inhalt
		<div id="footer">
			Fußzeile
		</div>
	</div>
</body>
</html>

Dieser CSS Quellcode muss noch in den Style Tag des Dokuments eingefügt oder aus einer seperaten CSS Datei eingebunden werden:

/* Mit dem Universalselektor standardmäßige Innen- und Außenabstände entfernen */
* {
	margin: 0;
	padding: 0;
}
 
/* Scrollbar einblenden, damit die Seite bei langem Inhalt nicht springt */
html {
	overflow: -moz-scrollbars-vertical; /* Firefox */
	overflow-y: scroll;
}
 
/* Ohne diese Angaben kann der Wrapper keine 100% Höhe haben */
html, body {
	height: 100%;
}
 
/* Keine Rahmen um Bilder anzeigen */
img {
	border: 0;
}
 
/* Gestrichelte Rahmen beim Klicken von Links entfernen */
:focus {
	outline: none;
}
 
div#wrapper {
	position: relative; /* Wird für den Footer benötigt */
	margin: 0 auto; /* Horizontales zentrieren des Wrappers */
	width: 995px; /* Ohne Breitenangabe kann der Wrapper nicht zentriert werden */
	background: #f0f0f0; 
	height: auto !important;
	height: 100%; /* Verhält sich wie min-height im IE6 */
	min-height: 100%;
}
 
div#footer {
	position: absolute;
	width: 100%;
	bottom: 0; /* Footer am Ende des Browsers festsetzen */
	background: #dddddd;
	border-top: 6px double gray;
}

Das padding-bottom des Inhalt DIV’s, das nicht im Quellcode vorhanden ist, muss mindestens so groß sein wie die Höhe Footers. Beachtet man dies nicht verschwindet ein Teil des Inhalts hinter dem Footer. Zusätzlich sollten noch Schriftart und Schriftgrößen im CSS definiert werden. Da hierbei sonst Abweichungen in den verschiedenen Browsern entstehen. Eine Demo findest du hier.

Mit dieser Layout Vorlage sollte es dir ein leichtes sein eine Webseite mit zentriertem Inhalt und 100% Höhe zu erstellen. Ich hoffe das ist ein schönes nachträgliches Weihnachtsgeschenk für dich. Frohe Weihnachten noch.

monkey-business.biz » HTML

ï»¿ – Byte Order Mark (BOM) – Darstellungsprobleme

Horizontal zentriertes 100% Höhe CSS Layout