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:
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.
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.
Hallo, hier schreibt Lars. Dipl-Ing. Ingenieurinformatik (FH). Seit Jahrzehnten in der IT tätig. Geprüfter (und begeisterter) Webmaster. Ebenso begeisterter Windows-, Apple-, und Office-User. Ich schreibe über alle möglichen Themen rund um IT. Mehr über mich erfährst du hier: Über mich. Danke für deinen Besuch!