/*/ * Fabian Schmid * März 2009 * * * ----------------------------------------- * CSS Hauptgruppen Marker * ----------------------------------------- * um CSS Formatierungen schneller zu finden habe ich die Element, Classen und ID`s * in Hauptgruppen zusammengefasst. * 1.) Layout & Design * 2.) Standard Elemente * 3.) Standard Classen * 4.) Layout Classen * 5.) Sonder-Styles * * Im PSPad können diese Marker über den Code-Explorer angesteuert werden * * ----------------------------------------- * Besondere Kürzel * ----------------------------------------- * [nav] = Navigation (Menü) * nav - Menü für die Hauptpunke * sub-nav - Müne für die Unter-Menüpunkte des Hauptmenüs * top-nav - Eigenes Müne für zusätzliche Seiten wie Kontakt, Impressum oder Sitemap * skip-nav - Enthält nur Anker-Links zu den wichtigsten Positionen wie * Content, Nav und Footer * * [wrap] = Umwicklung * kann verwendet werden um Layout Element richtig positionieren zu könne * bzw. Designs umsetzten zu können * wrap - umhüllt die gesammten Webseit um ihr z.B. eine fixe breite zu vergeben * und sie mittig zu positionieren * content-wrap - umhüllt den eigentlichen Content um die Sidebar * bzw. die Utilities zu ermöglichen * footer-wrap - umhüllt die Kontakt- und Powered By Informationen * * * ----------------------------------------- * Basis HTML & CSS-Id Struktur * ----------------------------------------- * ======================================== * | | Head | | * #wrap | | | | * #header | |--------------------------| | * #skip-nav | |--------------------------| | * #breadcrumb | | S. | Content | U. | | * #content-wrap | | | | | | * #content | | | | | | * #utility | | | | | | * #sidebar | | | | | | * #sub-nav | | | | | | * #nav | | | | | | * #footer-wrap | |--------------------------| | * #footer | | Footer © | | * #poweredby ======================================== * * * ------------------------------------------- * 100% Seitenhöhe erreichen * ------------------------------------------- * Die folgenden Angaben enthalten nur die wichtigsten * zusatz Parameter * * html,body { * height:100%; // needed for container min-height * } * * #wrap { * height:auto !important; // real browsers (Opera verkraftet das leider nicht * // aber FF braucht das auf jedenfall) * height:100%; // IE6: treaded as min-height * min-height:100%; // real browsers * } * * #content-wrap { * padding-bottom:7em; * } * * #footer-wrap { * position:absolute; * bottom:-1px; // mit -1px wird der Scrollbalken dauerhaft aktiviert * border-top:6px double #000; * height:6em; * } * /*/ /* Browser Styles zurücksetzten */ * { margin:0; padding:0; } /* _ @ 1. Layout Design @ _ {} */ html, body { height:100%; } body { font-family:Verdana; font-size:12px; color:#333; line-height:160%; } /* dient nur getränten Body Formatierung wenn das CSS auch im WYSIWYG Editor importiert wird */ #body { background: #fff; } /* wird nur für spezielle Design benötigt mit mehreren Hintergründen */ #wrap1 {} /* ist der standard Kontainer für die ganze Website */ #wrap { margin:0 auto; width:900px; position:relative; border-width:0 1px; border-color:#eee; border-style:solid; height:auto !important; /* real browsers | Opera verkraftet das leider nicht */ /* aber FF braucht das auf jedenfall */ height:100%; /* IE6: treaded as min-height */ min-height:100%; /* real browsers */ } /* für Hintergrundbild, Logo und Projekt-Titel */ #header { height:220px; background: #fff url(/design/header.jpg) no-repeat top center; position:relative; margin-bottom:47px; } /* Projekt-Titel wird meis für Screen-Ansicht ausgeblendet */ #header h3 { position:absolute; left:-9999px; } /* Enthält nur Anker-Links zu den wichtigsten Positionen wie #content, #nav und #footer */ #skip-nav { position:absolute; left:-999px; } /* Wo befindet sich der User auf der Website */ #breadcrumb { position:relative; padding:10px 0; } #breadcrumb strong { position:absolute; left:-999px; } #breadcrumb a { padding: 0 20px; margin-right:-10px; position:relative; display:block; float:left; } #breadcrumb a:link, #breadcrumb a:active, #breadcrumb a:visited { text-decoration:none; } #breadcrumb a:hover { text-decoration:underline; } #breadcrumb a.chapter1 { font-size:16px; z-index:10; line-height:30px; } #breadcrumb a.chapter2 { font-size:14px; z-index:9; line-height:26px; margin-top:2px; } #breadcrumb a.chapter3 { font-size:12px; z-index:8; line-height:22px; margin-top:4px; } /* wird benötigt um die #utility und #sidebar links oder rechts korreckt zu positionieren */ #content-wrap { width:100%; position:relative; padding-bottom:260px; } /* eigentlicher Innhalt der Seite mit Abstand zu den Sidebars */ #content { position:relative; margin:0 200px 0 20px; } /* Kontent-Spalte für zusätliche Informationen */ #utility { position:absolute; width:180px; color:#666666; top:0px; right:10px; } /* die #sidebar enthält meist die Sub-Navigation */ #sidebar { position:absolute; width:180px; color:#666666; top:0px; left:10px; } #sidebar div, #sidebar form { margin-bottom:10px; position:relative; } #sidebar h3 { line-height:22px; color:#676767; border-bottom: 1px solid #333333; } #sidebar li { margin-left:17px; } #sidebar a:link, #sidebar a:active, #sidebar a:hover, #sidebar a:visited { color: #990002; } /* Untermenü als frei positionierbaren
Layer mit einem