it-zeugs.de

Standardframework für Webseiten-Erstellung

von

Zuletzt aktualisiert am 25. Dezember 2023 von Lars

Jedes Mal das Rad neu zu erfinden, wenn es darum geht, ein Webseitenlayout zu erstellen. Daher hier mal der Versuch, einen vielseitig einsetzbaren Einstieg zu erstellen.

Zunächst einmal das Standard-Layout als Skizze:

Standard-Struktur für Webseitenlayout

Und hier kommt der HTML-Code:

<!DOCTYPE html> 
<html lang="de">
	<head>
		<meta charset="utf-8" />
			
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		<!-- viewport meta to reset smart-device inital scale -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">


		<!-- css3-mediaqueries.js for IE8 or older -->
		<!--[if lt IE 9]>
			<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<![endif]-->
		
  
  		<meta name="description" content="In diesem Artikel wird eine solide Ausgangsbasis für Webseiten-Layout geboten.">
  		<meta name="keywords" content="">
  		<title>Standardframework für Webseiten-Erstellung - it-zeugs.de</title>
		<!-- canonical - hier URL anpassen <link rel="canonical" href="http://www.url/standardframework-fuer-webseiten-erstellung.html" /> -->
		<!---->
	
		
	</head>
	<body>
   
		<div id="top"> 
			<div id="topmain">
				<div id="top_left">
					
				</div><!-- div id="top_left"> --> 				
				<div id="top_middle">
					
				</div><!-- div id="top_middle"> -->
				<div id="top_right">
					
				</div><!-- div id="top_right"> -->
			</div><!-- div id="topmain"> -->	
		</div><!-- div id="top"> -->
		<div class="floatbreaker"></div>
		
		<div id="menubar">
			
		</div><!-- div id="menubar"> -->
		
		<div id="content"> 
			<div id="content_left">
				
			</div><!-- div id="content_left"> -->
			<div id="content_middle">

Der HTML-Code selber ist für MODX vorkonfiguriert. Textteile in geschweiften Klammern sind sog. Chunks, eine Art Textbausteine.

Um Projekte zu vereinfachen, macht man diese häufig nicht voll responsiv, sondern beschränkt diese auf eine maximale Breite. Um aber das Bild auf einem grossen Bildschirm nicht unnötig einzuschränken, wird Kopf- und Fusszeile auf die ganze Breite gezogen. Daher haben die IDs #top und #foot noch einmal einen inneren DIV-Container #topmain bzw. #footmain, der den eigentlichen Inhalt zeigt.

Das zugehörige CSS sieht erst einmal so aus:

/******************************************************************************************************************************
	CSS Reset 
	Start
	Diese Sektion dient dazu, Standard-Abstände, etc. zurückzusetzen, um Browser-Inkompatibilitäten zu vermeiden
******************************************************************************************************************************/

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

	ol, ul { list-style: none;}
	
	blockquote, q { quotes: none; }
	
	blockquote:before, blockquote:after, q:before, q:after {	content: ''; content: none; }

	table { border-collapse: collapse; border-spacing: 0; }
/******************************************************************************************************************************
	Ende
	CSS Reset
******************************************************************************************************************************/



/******************************************************************************************************************************
	Benutzerdefiniertes CSS Start
******************************************************************************************************************************/

	/******************************************************************************************************************************
		Definition von Standards
		Start
	******************************************************************************************************************************/

	body
	{   
		font-family: "wf_SegoeUI","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif"; 
		font-size: 120%;
		line-height: 1.6;
		font-weight: 400;
	}

	p
	{   
		margin-bottom: 20px;
	}

	b
	{   
		font-weight: 600 !important;
	}

	/* Definitionen für die Überschriften */
	h1,h2,h3 {
		margin-top: 5px;
		font-weight: 500;
		margin-bottom: 20px;
		text-transform: uppercase; /* Alles gross bei Hauptüberschriften */
	} 

	h1 {
		margin-top: 20px;
		font-size: 160% !important;
		  
	}

	h2 {
		margin-top: 20px;
		font-size: 140% !important;
	}

	h3,h4,h5 {
		font-size: 135% !important;
	}

	a {
		text-decoration: none;
		color: black;
	}

	a:hover {
		text-decoration: none;
		color: black;
	}
	/******************************************************************************************************************************
		Ende
		Definition von Standard-Klassen
	******************************************************************************************************************************/

	/******************************************************************************************************************************
		Gängige CSS-Definitionen
		Start
	******************************************************************************************************************************/
	.floatbreaker	{	clear: both;	}

	.video-container 
	{ 
	position: relative; /* keeps the aspect ratio */ 
	padding-bottom: 56.25%; /* fine tunes the video positioning */ 
	overflow: hidden;
	}
	.video-container iframe,
	.video-container object,
	.video-container embed 
	{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	}

	.tablewrap {overflow:auto !important;}
	.tablewrap 	table { border-collapse: collapse ; border: 1px solid grey ;  width: auto ;}
	.tablewrap 	tr { border-collapse: collapse ; border: 1px solid grey ; }
	.tablewrap 	td { border-collapse: collapse; border: 1px solid grey ; padding: 5px; }

	.textcenter	{text-align: center;}
	.textright	{text-align: right;}
	
	
	.code
	{
    width: 99%;
	max-width: 99%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	overflow-x: auto;    
	overflow-y: hidden;
	-ms-overflow-y: hidden;
	font-family: Consolas,monospace;
	font-size: 90%;
	line-height: 1;
	background: #F3F3F3;
	border: 1px solid gray;
	display: flex;
	padding: 5px;
	}	


	/******************************************************************************************************************************
		Ende
		Gängige CSS-Definitionen
	******************************************************************************************************************************/

	

	/******************************************************************************************************************************
		Definition von top
		Start
	******************************************************************************************************************************/
		
	#top
	{
		max-width: 100%;			/*Definition der Breite*/
		width: 100%;					
		background: grey;		/* Definition des Hintergrundes */
		display: table;				/* Soll alle Elemente beinhalten */
	}

		#topmain
		{
			max-width: 1192px;		/* Definition der Breite */
			width: 1192px;
			margin: auto;			
			color: white;	
			display: table;			/* Soll alle Elemente beinhalten */
		}

			#top_left	
			{
				float: left; 
				width: 33%
			}
			#top_middle	
			{
				text-align: center;
				float: left; 
				width: 34%
			}
			#top_right	
			{
				text-align: right;
				float: right; 
				width: 33%
			}
	/******************************************************************************************************************************
		Ende
		Definition von top
	******************************************************************************************************************************/

	/******************************************************************************************************************************
		Definition von menubar
		Start
	******************************************************************************************************************************/
		#menubar
		{
			max-width: 1192px;		/* Definition der Breite */
			width: 100%;
			margin: auto;					
			background: white;		/* Definition des Hintergrundes */
			border: 1px solid grey;
			display: table;			/* Soll alle Elemente beinhalten */
		}	
	/******************************************************************************************************************************
		Definition von menubar
		Ende
	******************************************************************************************************************************/	
	

	
	/******************************************************************************************************************************
		Definition von content
		Start
	******************************************************************************************************************************/
	#content
	{
		max-width: 1192px;		/* Definition der Breite */
		width: 100%;
		margin: auto;					
		background: white;		/* Definition des Hintergrundes */
		border: 1px solid grey;
		display: table;			/* Soll alle Elemente beinhalten */
	}

		#content_left	
		{
			float: left; 
			width: 10%;
		}
		#content_middle	
		{
			float: left; 
			width: 80%;
		}
		#content_right	
		{
			float: right; 
			width: 10%;
		}
	/******************************************************************************************************************************
		Ende
		Definition von content
	******************************************************************************************************************************/

	/******************************************************************************************************************************
		Definition von foot
		Start
	******************************************************************************************************************************/	

	#foot
	{
		max-width: 100%;			/*Definition der Breite*/
		width: 100%;					
		background: grey;			/* Definition des Hintergrundes */
		display: table;				/* Soll alle Elemente beinhalten */
		position: fixed;			/* Fix am unteren Bildschirmrand */
		bottom: 0;
	}

		#footmain
		{
			max-width: 1192px;		/* Definition der Breite */
			width: 1192px;
			margin: auto;			
			color: white;	
			display: table;			/* Soll alle Elemente beinhalten */
		}
		
			#foot_left	
			{
				float: left; 
				width: 33%
			}
			#foot_middle	
			{
				text-align: center;
				float: left; 
				width: 34%
			}
			#foot_right	
			{
				text-align: right;
				float: right; 
				width: 33%
			}			
	/******************************************************************************************************************************
		Ende
		Definition von foot		
	******************************************************************************************************************************/	

	/******************************************************************************************************************************
		Definition von speziellen Seiten
		Start
	******************************************************************************************************************************/


	/******************************************************************************************************************************
		End
		Definition von speziellen Seiten		
	******************************************************************************************************************************/
/*
.
.
.
.
.
.
.
.
.
.
.
*/

/******************************************************************************************************************************
 ******************************************************************************************************************************
 ******************************************************************************************************************************
 ******************************************************************************************************************************
 ******************************************************************************************************************************
 Responsive Magic beginnt hier
 ******************************************************************************************************************************
 ******************************************************************************************************************************
 ******************************************************************************************************************************
 ******************************************************************************************************************************
 ******************************************************************************************************************************/

@media screen and (min-width: 1600px) {
/******************************************************************************************************************************
	Sektion grosser Bildschirm 
	Start
******************************************************************************************************************************/	
 
}
/******************************************************************************************************************************
	End
	Sektion grosser Bildschirm 
******************************************************************************************************************************/	
/*
.
.
.
.
.
.
.
.
.
.
.
*/
@media screen and (min-width: 1200px) {
/******************************************************************************************************************************
	Sektion mittlerer Bildschirm 
	Start
******************************************************************************************************************************/	

}
/******************************************************************************************************************************
	End
	Sektion mittlerer Bildschirm 
******************************************************************************************************************************/		

/*
.
.
.
.
.
.
.
.
.
.
.
*/
@media screen and (max-width: 1200px) {
/******************************************************************************************************************************
	Sektion Mobile
	Start
******************************************************************************************************************************/	
	/******************************************************************************************************************************
		Definition von Standard-Klassen
		Start
	******************************************************************************************************************************/
	
	/******************************************************************************************************************************
		Ende
		Definition von Standard-Klassen
	******************************************************************************************************************************/

 	/******************************************************************************************************************************
		Definition von generellen Klassen
		Start
	******************************************************************************************************************************/	
		/* Zwei generelle Klassen desktop und mobile */
		.desktop 	{ display: none; }
		.mobile		{ display: block; }
		
 	/******************************************************************************************************************************
		Ende
		Definition von generellen Klassen
	******************************************************************************************************************************/
 	/******************************************************************************************************************************
		Definition von generellen Dingen im Template
		Start
	******************************************************************************************************************************/	
		
 	/******************************************************************************************************************************
		Ende
		Definition von generellen Dingen im Template
	******************************************************************************************************************************/		

	/******************************************************************************************************************************
		Definition von speziellen Seiten
		Start
	******************************************************************************************************************************/	
		/******************************************************************************************************************************
			Seiten Firma 
	
}
/*
.
.
.
.
.
.
.
.
.
.
.
*/
@media screen and (min-width: 600px) {
/******************************************************************************************************************************
	Sektion Mobile min 600
	Start
******************************************************************************************************************************/	
 	/******************************************************************************************************************************
		Definition von generellen Klassen
		Start
	******************************************************************************************************************************/	
		/* Zwei generelle Klassen desktop und mobile */
		.desktop600	{ display: block; }
		.mobile600	{ display: none; }
 	/******************************************************************************************************************************
		Ende
		Definition von generellen Klassen
	******************************************************************************************************************************/	
	/******************************************************************************************************************************
		Definition von generellen Dingen im Template
		Start
	******************************************************************************************************************************/	
		/* Passenden Banner in Header-Zeile einblenden */
		#bigbanner img
		{
			display: block;
		}
		#littlebanner
		{
			display: none;
		}
	/******************************************************************************************************************************
		End
		Definition von generellen Dingen im Template
	******************************************************************************************************************************/	
}
/******************************************************************************************************************************
	End
	Sektion Mobile min 600
******************************************************************************************************************************/	

/*
.
.
.
.
.
.
.
.
.
.
.
*/
@media screen and (max-width: 600px) {
/******************************************************************************************************************************
	Sektion Mobile max 600
	Start
******************************************************************************************************************************/	
	.code
	{
		width: 300px;
		max-width: 300px;
	}
	.tablewrap {max-width:300px !important;}
}
/******************************************************************************************************************************
	End
	Sektion Mobile max 600
******************************************************************************************************************************/

Es beginnt mit einem sog. CSS-Reset.

Was macht ein CSS-Reset?

Ein CSS-Reset setzt diverse Einstellungen erst einmal zurück. Verschiedene Browser haben verschiedene Grundeinstellungen. Setzt man die infrage kommenden Elemente zurück, erspart man sich so manchen Ärger mit inkompatiblen Browser-Einstellungen. Allerdings muss man spätere Anpassungen des gleichen Wertes mit dem Schlüsselwort important versehen, da sonst nicht definiert ist, welche der beiden Einstellungen als gültig übernommen wird.

Zu Reset-Stylesheets gibt es sogar einen Wikipedia-Artikel.

Wie sollte man ein CSS-Stylesheet strukturieren?

CSS-Stylesheets sind geradezu eine Falle für unstrukturiertes Arbeiten. Eine Änderung hängt man irgendwo rein und gut ist. Doch leider ist das nach einigen Wochen kaum mehr nachvollziehbar. Ich habe mir daher eine bestimmte Reihenfolge angewöhnt und das CSS in bestimmte Abschnitte unterteilt:

  • Reset-Stylesheet
  • Definition von allgemeinen Standards wie body, p, h1, h2, h3, a
  • Gängige CSS-Definitionen
    • .floatbreaker - nur ein clear:both, was en Fluss zurücksetzt
    • .video-container - Macht eine eingebettes Video zum Vollbild
    • .tablewrap - Macht eine Tabelle auf einem kleinen Bildschirm verschiebbar
  • Alle Definitionen zum Bereich #top
  • Alle Definitionen zum Bereich #menubar
  • Alle Definitionen zum Bereich #content
  • Alle Definitionen zum Bereich #foot
  • Danach alle Definitionen, die ich für spezielle Seiten brauche
  • Danach die Definitionen, die nur bei bestimmter Bildschirmgrösse gelten

Ziel ist es also, die Reihenfolge auf der Webseite möglichst im CSS wiederzuspiegeln. Die Abschnitte rücke ich möglichst sinnvoll ein. In den Definitionen für die jeweiligen Bildschirmgrössen versuche ich die definierte Reihenfole bei Bedarf zu wiederholen.

Die im CSS definierten Einstellungen sind nur als Vorgabe zu sehen, damit schon mal eine vernünftige Ausgabe erscheint und können / sollen natürlich angepasst werden.

Der Footer ist mit

position: fixed;	
bottom: 0;

Im Moment für alle Bildschirmgrössen an den unteren Bildschirmrand "gepinnt". Es empfiehlt sich das aber speziell bei kleinen Bildschirmen anders zu realisieren.

Ergebnis der Standard-Struktur für Webseitenlayout

Was tun mit Elementen, die nicht gebraucht werden?

Derartige Elemente löscht man entweder aus HTML- und CSS-Code oder blendet Sie im CSS mit "display:none" aus.

CSS Compressor verwenden

Da Ladezeiten ein Rankingfaktor sind, würde ich nicht mit einem derart auskommentierten CSS an den Start gehen wollen. Wenn die Entwicklung zumindest auf einem vernünftigen Zwischenstand ist, kann man das CSS durch einen "Kompressor" jagen, dann unter einem anderen Namen speichern und z.B. als style-compressed.css einbinden.

Ein derartiger Kompressor findet sich z.B. unter csscompressor.com.

Zeit gespart? Dann unterstütze doch it-zeugs.de

Wenn dieser Tipp dir geholfen hat, Zeit zu sparen, überlege bitte, eine kleine Spende zu hinterlassen. Dein Beitrag hilft mir, weiterhin wertvolle Inhalte zu erstellen. Du kannst unter diesem Linke spenden: Spende it-zeugs.de

Falld du nicht spenden willst oder kannst, dann wäre es toll, wenn du deinen nächsten Amazon Einkauf mit diesem Link beginnen würdest: Amazon Link. Für dich wird es nicht teurer, ich bekomme aber einen kleinen Beitrag.

Vielen herzlichen Dank ❤️

Schreibe einen Kommentar