Tutorial: Layout ohne Tabellen (Stylesheets)


@charset "utf-8";
/* ===========================================
// Overview
=========================================== //
[x] Reset, defaults, Web Fonts (and/or font-face), clearfix, misc.
[x] HTML5 fix
[x] Default layout
	[Header, navigation, container, sticky footer, misc.]	
[x] Content
	[Headlines, images, misc.]
[x] Google Maps (page "Anfahrt und Öffnungszeiten")
[x] IE fixes and filters
[x] Plugins
	[Slimbox 2, jQuery Validation]
[x] No JavaScript
[x] Print

/* ===========================================
// [x] Reset, defaults, Web Fonts (and/or font-face), clearfix, misc.
=========================================== */
* { margin: 0; padding: 0 }
body { background: #225c96 url(../img/defaultLayout/bg.png) repeat-x; font: normal 14px/18px Arial, Helvetica, sans-serif; color: white }
h1, h2, h3 { font: normal 18px/25px 'Oswald', Arial, Helvetica, sans-serif; text-shadow: 4px 2px 3px #333; color: #fdf467; margin-bottom: 15px }
h2 { font-size: 16px; line-height: 20px; margin-bottom: 10px }
h3 { font-size: 15px; line-height: 19px; margin-bottom: 6px }
ul, dl { list-style: none; margin-bottom: 25px }
ul.bulletList { list-style-type: disc; list-style-position: inside }
ul sup { text-decoration: underline }
ol { list-style: decimal; padding-left: 20px; margin-bottom: 15px }
dt { float: left; margin-right: 7px }
section, p { margin-bottom: 15px }
hr { background-color: #aaa; height: 1px; border: 0 }
img, img a { outline: none; border: none }
a:link, a:visited { color: #fdf467; text-decoration: none; border-bottom: 1px dotted red; outline: none }
a:hover, a:active { color: #ffef27; border-bottom-color: #fdf467 }
li.active, li.active a:link, li.active a:visited, li.active a:hover { color: #fdf467; text-decoration: none }
.accentuate { font-weight: bold; color: #ccc }
.separator { border-bottom: 1px solid #888; padding-bottom: 30px; margin-bottom: 10px }
.item { margin-bottom: 10px }
.noShow { visibility: hidden; height: 0 }
.group, .item { overflow: hidden }
.group:after, .item:after { clear: both; content: "."; display: block; font-size: 0; height: 0; min-height: 0; visibility: hidden }

/* Force scrollbar + -webkit-font-smoothing (http://maxvoltar.com/archive/-webkit-font-smoothing) */
html { overflow-y: scroll; -webkit-font-smoothing: antialiased }

/* ===========================================
// [x] HTML5 fix
=========================================== */
header, hgroup, nav, aside, article, section, figure, footer { display: block }

/* ===========================================
// [x] Default layout
=========================================== */
.wrap .layout { position: relative; width: 874px; margin: 0 auto }
section.default { margin-bottom: 80px }
.fadedLogo { position: absolute; top: 252px; left: -136px; background: url(../img/defaultLayout/bgLogo.png) no-repeat; width: 228px; height: 154px; z-index: 1 }
.allProducts .fadedLogo { top: 94px }
.drape  .fadedLogo { top: 119px }
.carpets .fadedLogo { top: 145px }
.hangings .fadedLogo { top: 193px }
.lining .fadedLogo { top: 196px }
.sunscreen .fadedLogo { top: 218px }
.measuredCarpets .fadedLogo { top: 244px }
.brands .fadedLogo { top: 258px }
.beforeAfterwards .fadedLogo { top: 291px }
.approach .fadedLogo { top: 329px }
.contact .fadedLogo { top: 360px }
	
	/* Header
	// =========================================== */
	header { color: #2f2f2f }
	.wrap .layout header hgroup, .wrap .layout header a, .wrap header h1 { border-bottom: 0; text-indent: -9999px; width: 424px; height: 110px; 
	margin: 0 auto 22px }
	.wrap .layout header hgroup { background: url(../img/defaultLayout/logo.png) 0 24px no-repeat }
	
	/* Navigation
	// =========================================== */
	nav { position: relative; z-index: 2; float: left; width: 200px; font-size: 15px; text-shadow: 4px 2px 3px #333; margin-bottom: 37px }
	nav li { list-style-type: none }
	nav a:link, nav a:visited, nav a:active { font: normal 20px/26px Oswald, Arial, Helvetica, sans-serif; color: white; border-bottom-color: red }
	nav a:link span, nav a:visited span, nav a:active span { font-size: 14px; color: #ccc }
	nav a:hover, nav a:hover span, nav li.active a span { color: #ffef27 }
	nav li { margin-bottom: 5px }
	nav li.beforeAfter { margin-bottom: 12px }
	nav li ul { margin: 7px 0 6px 68px }
	nav li ul li { list-style: disc outside; display: list-item; font-size: 13px; font-weight: normal; margin-bottom: 3px }
	nav li ul li a:link, nav li ul li a:visited { font-size: 15px; line-height: 22px }
	nav .offer { text-decoration: none }
	nav a:link.start, nav a:visited.start, nav a:hover.start { font-size: 13px; margin-top: 7px }
	
	/* Sticky Footer (New CSS Sticky Footer: http://www.cssstickyfooter.com/)
	// =========================================== */
	html, body { height: 100% }
	.wrap { min-height: 100% }
	#main { overflow: auto; padding-bottom: 200px }
	body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /} /* Opera Fix */
	footer { position: relative; margin-top: -140px /* negative value of footer height */; height: 140px; clear: both }
	
	/* Footer (additional styles)
	// =========================================== */
	footer { background: black url(../img/defaultLayout/bgFooter.png) repeat-x }
	footer .wrap { width: 874px; margin: 0 auto }
	footer a.showroom { display: inline-block; float: left; border-bottom: 0; -moz-transition: -moz-transform 200ms ease-in-out; 
	-webkit-transition: -webkit-transform 200ms ease-in-out; -ms-transition: -ms-transform 200ms ease-in-out /*IE (up to 9) does not support*/; 
	-o-transition: -o-transform 200ms ease-in-out; transition: transform 200ms ease-in-out; margin-top: -85px }
	footer a.showroom:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25) }
	footer a.showroom img { border: 2px solid #5d688a }
	footer ul { float: left; width: 530px; display: inline-block; color: #fdf467; margin: 9px 0 0 27px }
	footer li { float: left; display: inline-block; font-weight: bold; margin-bottom: 2px }
	footer a.imprint { float: right; font-size: 13px; text-decoration: none; color: white; margin-top: 9px }
	footer a.imprint:hover, footer a.imprint.active { color: #fdf467 }

/* ===========================================
// [x] Content
=========================================== */
section.main h1, section.intro h1 { display: inline-block; border-bottom: 1px solid #888; padding: 0 53px 7px 0; text-indent: 53px; line-height: 50px; height: 33px; 
background: url(../img/defaultLayout/bgHeadline.png) no-repeat }
.content, article { float: right; width: 640px; margin-bottom: 50px }
.content { padding-top: 10px }
	
	/* Claim
	// =========================================== */
	section.intro { width: 780px; position: relative; margin: 0 auto }
	section.intro h1 { border: 0; color: white; text-indent: 47px; line-height: 47px; margin-bottom: 9px }
	section.intro div { position: absolute; left: 125px; bottom: 118px }
	
	/* Galleries
	// =========================================== */
	section.slimbox { width: 100%; margin-top: 15px }
	section.slimbox a { float: left; width: 188px; height: 120px; overflow: hidden; background: #e4e0dd; border: 4px solid #ccc; -moz-border-radius: 8px; 
	-webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 3px 4px 4px #222; -webkit-box-shadow: 3px 4px 4px #222; 
	-ms-box-shadow: 3px 4px 4px #222; -o-box-shadow: 3px 4px 4px #222; box-shadow: 3px 4px 4px #222; margin: 0 17px 16px 0; font-size: 0 }
	section.slimbox a:hover { margin: 1px 15px 15px 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; 
	border-radius: 5px; -moz-box-shadow: 3px 3px 3px #222; -webkit-box-shadow: 3px 3px 3px #222; -ms-box-shadow: 3px 3px 3px #222; -o-box-shadow: 3px 3px 3px #222; 
	box-shadow: 3px 3px 3px #222 } 
	section.slimbox img.arrow { float: left; margin: 45px 8px 0 0 }
	section.slimbox .keys { font: normal 19px/24px Oswald, Arial, Helvetica, sans-serif; color: #fff215; letter-spacing: 2px; text-transform: uppercase }
	
	/* Page "Links zu unseren Marken"
	// =========================================== */
	.brands h2 { margin-bottom: 7px }
	
	/* Page "Vorher-Nachher"
	// =========================================== */
	.beforeAfter section { float: left }
	.beforeAfter section a:first-child { margin-left: 90px }
	.beforeAfter .separator { padding-bottom: 1px; margin-bottom: 1px }
	.beforeAfter section.slimbox a:hover { margin-right: 17px }
	
	/* Page "Kontakt"
	// =========================================== */
	#form { position: relative; margin-top: 4px; border: 1px solid #ccc; -moz-border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px; 
	-o-border-radius: 8px; border-radius: 8px; width: 417px; padding: 30px 37px 20px 13px; background: #013059 url(../img/defaultLayout/bgForm.png) repeat-x; 
	background: -moz-linear-gradient(top, #225c96 0%, #013059 100%); background: -webkit-linear-gradient(top, #225c96 0%, #013059 100%); 
	background: -ms-linear-gradient(top, #225c96 0%, #013059 100%); background: -o-linear-gradient(top, #225c96 0%, #013059 100%); 
	linear-gradient(top, #225c96 0%, #013059 100%) }
	#form .required { position: absolute; top: 17px; right: 20px }
	#form input, #form textarea { background-color: white; border: 1px solid white; -moz-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; 
	-o-border-radius: 6px; border-radius: 6px;	-moz-box-shadow: 3px 4px 4px #222; -webkit-box-shadow: 3px 4px 4px #222; -ms-box-shadow: 3px 4px 4px #222; 
	-o-box-shadow: 3px 4px 4px #222; box-shadow: 3px 4px 4px #222; width: 265px; font-size: 14px; color: #555; padding: 4px 10px; margin: 0 7px 9px 0 }
	#form fieldset { border: 0; margin-bottom: 20px }
	#form .position label { width: 120px; line-height: 15px }
	#form .position div { height: 22px }
	#form fieldset.gender { margin-bottom: 9px }
	#form fieldset.gender div div { float: right; width: 295px }
	#form fieldset.gender div div input { float: left; background: 0; padding: 0; width: auto; color: black; margin: 5px 6px 0 0 }
	#form .gender div label { float: left; margin-right: 25px }
	#form label { float: left; line-height: 26px }
	#form input, #form textarea { float: right }
	#form .wrapZipCity .descZipCity { float: left; width: 120px }
	#form .wrapZipCity .descZipCity label { width: auto; float: none; display: inline }
	#form .wrapZipCity .zipCity { float: right }
	#form .wrapZipCity .zipCity input { float: left; width: 41px }
	#form .wrapZipCity .zipCity input.city { float: right; width: 194px }	
	#form .approach { margin: -14px 0 29px }
	#form .approach label.labelApproach { width: 100%; margin: 0 }
	#form .approach input { float: left; background: 0; padding: 0; width: auto; line-height: 20px; color: black; margin: 5px 2px 0 0 }
	#form .approach label { height: 20px; line-height: 24px; padding-top: 0; margin: 0 25px 0 5px }
 	#form textarea { font: normal 14px/18px Arial, Helvetica, sans-serif; width: 270px; min-width: 270px; max-width: 270px; height: 150px; min-height: 18px; 
	max-height: 300px; padding-right: 5px; margin-bottom: 18px }
	#form input#send { width: 140px; height: 28px; color: white; border: 1px solid white; background-color: #225c96; background: -moz-linear-gradient(top,#225c96, #003059); 
	background: -webkit-linear-gradient(top, #225c96, #003059); background: -ms-linear-gradient(top, #225c96 0%, #013059 100%); 
	background: -o-linear-gradient(top, #225c96 0%, #013059 100%); background: linear-gradient(top, #225c96 0%, #013059 100%); -moz-border-radius: 8px; 
	-webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; margin-right: 154px; cursor: pointer }

/* ===========================================
// [x] Google Maps (page "Anfahrt und Öffnungszeiten")
=========================================== */
#map { border: 1px solid black; background-color: #f4f3f0; color: black; width: 638px; height: 400px }
#map .location { margin-bottom: 5px }
#map .location div { font-weight: bold; color: #003059 }
#map .routePlanner { border-top: 1px solid #ccc; font-size: 12px; margin-bottom: 10px }
#map .routePlanner input { height: 20px; margin-right: 10px }
#map .routePlanner input#route { float: left; border: 1px solid #ccc; width: 224px }
#map .routePlanner input.submit { width: 65px; height: 23px; margin: 0 }

/* ===========================================
// [x] IE fixes and filters
=========================================== */
section.slimbox a, .ie6-8 #form, .ie6-8 #form input, .ie6-8 #form textarea, .ie6-8 #form input#send { behavior: url(assets/ie/PIE.htc) } /* PIE.htc for CSS 3 support for 
IE 6-IE 8 (CSS3 Pie: http://css3pie.com/) */
.ie6-8 .wrap .layout header hgroup { cursor: pointer }
.ie6-8 a#lbPrevLink img, .ie6-8 a#lbNextLink img, .ie6-8 a#lbCloseLink img { display: none }
.ie6-8 #form { z-index: 1 } /* Necessary fix for IE 8 [regarding the CSS 3 support for IE 6-IE 8 (CSS3 Pie: http://css3pie.com/)] */
.ie6-8 #form, .ie6-8 #form input#send { border-width: 1px 2px 2px 1px }
.ie6-8 #form input, .ie6-8 #form textarea { border-radius: 6px 6px 8px 8px }
.ie6-8 #form .gender input, .ie6-8 #form .approach input, .ie9 #form .gender input, .ie9 #form .approach input { width: 10px; height: 10px }
.ie6-8 #form .wrapZipCity .zipCity { width: 294px }
.ie6-8 #form .approach label { line-height: 20px }

	/* IE 6 only
	// =========================================== */
	*html .ie6-8 .group, *html .ie6-8 .item { height: 1% }
	*html .ie6-8 ul.subMenu { margin-top: -14px }
	*html .ie6-8 .main h1, *html .ie6-8 .intro h1 { padding-bottom: 0; line-height: 40px; background-image: none; 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='assets/img/defaultLayout/bgHeadline.png') }
	*html .ie6-8 .fadedLogo { background-image: none; 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='assets/img/defaultLayout/bgLogo.png') }
	*html .ie6-8 .slimbox a { cursor: pointer }
	*html .ie6-8 footer ul { margin: 9px 0 0 28px }
	*html .ie6-8 footer a.showroom { position: relative; z-index: 2 }
	*html .ie6-8 section.intro div { bottom: 132px }
	*html .ie6-8 .beforeAfter .separator { padding-bottom: 16px }
	*html .ie6-8 .beforeAfter a:hover { margin: 1px 15px 13px 2px }
	*html .ie6-8 #form .wrapZipCity .zipCity input.city { width: 191px }
	*html .ie6-8 #form .approach { margin-top: -5px }
	
	/* IE 7 only
	// =========================================== */
	*+html .ie6-8 section.intro div { bottom: 133px }
	*+html .ie6-8 ul.subMenu { margin-top: -14px }
	*+html .ie6-8 .approach ul { line-height: 22px }
	*+html .ie6-8 .beforeAfter .separator { padding-bottom: 16px }
	
	/* IE 9 only
	// =========================================== */
	.ie9 #form input#send { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#225c96', endColorstr='#013059') } }
		
/* ===========================================
// [x] Plugins
=========================================== */
	/* Slimbox 2
	// =========================================== */
	#lbBottomContainer #lbCaption { font-size: 12px; line-height: 16px; color: #444; width: 88%; margin: -2px 0 5px }
	#lbBottomContainer #lbCaption a:link, #lbBottomContainer #lbCaption a:visited, #lbBottomContainer #lbCaption a:hover { color: #124778; 
	border-bottom: 1px dotted #124778 }
	#lbCenter a, #lbBottom a { border-bottom: 0 }
	
	/* jQuery Validation
	// =========================================== */
	#form ul.errorlist { display: block; clear: both; float: right; border: 2px solid red; width: 263px; padding: 3px 10px; margin: 0 7px 15px 0 }
	
/* ==================================================
// [x] No JavaScript
================================================== */
.noJS section.slimbox:before { display: block; border: 2px solid red; font-size: 13px; font-weight: bold; font-style: italic; padding: 10px; margin-bottom: 20px; 
content: "Ohne aktiviertes JavaScript stehen Ihnen die Funktionalitäten der Bilder-Galerien dieser Website nicht zur Verfügung. Die Bilder sind dann nur auf Basis von HTML verlinkt." }
.noJS section.slimbox.index:before { margin-top: -22px }
.noJS #map:before { display: block; border: 2px solid red; font-size: 13px; font-weight: bold; font-style: italic; padding: 10px; margin: 20px 0 0 132px; 
width: 350px; text-align: center; content: "Ohne aktiviertes JavaScript steht Ihnen Google Maps und der Routenplaner nicht zur Verfügung." }

/* ===========================================
// [x] Print
=========================================== */
@media print {
* { background: transparent!important; color: #000!important; text-shadow: none }
header hgroup, section.intro, footer img, a.imprint { display: none }
header { height: 120px }
nav a { font-size: 14px!important; line-height: 13px!important }
.content { padding: 0 }
a, a:visited { color: #444!important; text-decoration: none; border-bottom: 1px dotted #fdf467 }
a:after { content: " (" attr(href) ")" }
abbr:after { content: " (" attr(title) ")" }
.ir a:after { content: "" }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid }
img { page-break-inside: avoid }
@page { margin: 0.5cm }
p, h1, h2, h3 { orphans: 3; widows: 3 }
h1, h2, h3 { text-shadow: none; text-indent: 0; page-break-after: avoid }
footer { position: absolute; margin: 0; top: 0 }
footer li { display: block; margin-right: 30px }
}
(X)HTML	(8)
Stylesheets (CSS)	(5)
Web 2.0/ JavaScript	(4)
PHP	(1)
Flash^®	(1)
3D/ Animation	(0)
Das Stylesheet-Template (inkl. Reset)	1.

Textumfluss um Motiv des Hintergrundbildes	2.
Layout ohne Tabellen	3.
Prioritäten bei mehreren Stylesheets	4.
Die drei Varianten der CSS-Formatierung	5.
1.		Die Dateigröße ihrer Seiten verkleinert sich.
2.		Noch wichtiger ist allerdings die Möglichkeit, mit einer externen Datei alle Seiten anpassen zu können.
Layout ohne Tabellen

Layout

Das zentrierte Grundgerüst

Kompatibilität zu Internet Explorer 5 und 5.5

Die Titelleiste

Die Navigation und die Inhaltsseite

Der Befehl “clear” (Zeile 151)

Die Fußleiste

Fazit:

	Das Gerüst (sowie die Inhalte) einer Website sind am leichtesten und effektivsten zu erstellen und zu modifizieren, wenn es mit einem externen Stylesheet formatiert wird.
	Mit der Vorlage verfügen Sie über ein Grundgerüst, welches in den gängigen Browsern einwandfrei funktioniert.
	Layout ohne Tabellen

01. Dezember 2006/ von Stefan Plagge