Wikizone - Benutzerbeiträge [de]

CSS - Snippets

2012-04-16T14:52:30Z

79.240.74.209:

== Radius ==

Vorsicht bei Bildern. Diese werden nicht beschnitten (Stand 2011)
<pre>
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
</pre>

== Schatten ==
<pre>
.schatten
{
box-shadow: 3px 3px 5px #888;
-webkit-box-shadow: 3px 3px 5px #888;
-moz-box-shadow: 3px 3px 5px #888;
}
</pre>

Die Werte bezeichnen: Versatz in x-Richtung, y-Richtung, den Wert für das Weichzeichnen und natürlich die Schattenfarbe.

'''Schatten auf alten IE'''
Mit Microsoft Filter Funktionen. Es gibt zwei unterschiedliche Schatten Filter. Beide liefern ein eher mäßiges Ergebnis.

<pre>
.ie-schlagschatten
{
filter:progid:dxImageTransform.Microsoft.dropShadow(color=#8888,offX=3,offY=3 positive=true);
}

.ie-schatten
{
filter:progid:DXImageTransform.Microsoft.Shadow(color='#8888',direction='120',strength='3');
}
</pre>

CSS - Tipps & Tricks

2012-04-16T14:47:22Z

79.240.74.209:

Siehe auch

[[CSS - Snippets]]

[[CSS - Baukasten]] (Frameworks etc.)
== CSS Zugriff über Attribute (Attributselektoren)==
'''Beispiel'''

<pre>
input[type="button"],
</pre>

== 3-Spalter mit gleich langen Spalten ==
Normalerweise wird ein 3-Spalter mit gleichlangen Spalten simuliert, indem man im Wrapper div einen mehrfarbigen horizontalen Streifen als Hintergrundbild einfügt, das quasi die Spalten durchgängig erscheinen läßt.

Einen anderen einfachen Weg bietet die Eigenschaft table:

<pre>
#content-wrap{
display: table;
}
#wrap{
display: table-row;
}
#left,#middle,#right,#content{
display: table-cell;
vertical-align: top;
}
</pre>

Wir geben dem Umgebenden Wrap die Eigenschaft table und dem nächsten umgebenden Div die Eigenschaft table-row. Alles was sich darin befindet wird dann zu table-cell. Das war es schon nur funktioniert es im IE7 noch nicht. Deshalb die passenden Hacks:

<pre>
* html #left,
* html #middle,
* html #right,
* html #content{
margin-bottom: -10000px;
padding-bottom: 10000px;
float: left;
}

*+html #left,
*+html #middle,
*+html #right,
*+html #content{
height: 100%
float: left;
}
</pre>

== Größenbestimmung in flexiblen Layouts ==
Mit ein paar Standard - Tricks bei der Größendefinition wird es wesentlich leichter in flexiblen Layouts die Exakten Werte herauszufinden.

Ein Problem bei flexiblen Layouts ist die Vererbung der Größen. Wenn für den body z.B. 0.5em als Textgröße festgelegt werden und sich in diesem Body eine Tabelle befindet, dann ist die Größe in dieser Tabelle 0.5em von 0.5em, also 0.25em.

<pre>
* { font-size: 1em; /* do not edit */}
html { font-size: 62.5%; /* do not edit */}
body {font-size: 1.12em; /* edit here global font size - 1em is 10px */}
</pre>

Durch die Definition in * und html haben wir in allen Browsern in den Unterelementen eine Standardgröße von 10px auf 1em. Diese 'runde' Größe läßt sich hervoragend für die Größenbestimmungen der anderen Blöcken verwenden. Möchten wir z.B. eine Spaltenbreite von 52px in der Standardeinstellung des Browsers erreichen, dann entspricht das der Größe 5.2em. Wenn der Browser resized wird wächst so nicht nur die Schrift, sondern auch die Breite der Spalten und das genau Proportional.

== Formulare mit CSS ==

'''Formulare per CSS Layouten'''

Von Gerrit Kaiser, am 09.01.04

15.9.06 http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten

'''Das Formular'''

Für dieses Beispiel nehmen wir uns ein einfaches Formular, wie es auf vielen Websites anzufinden ist. Nehmen wir an, es handelt sich um ein Newsletter-Formular mit Eingabefeldern für Name, eMail-Adresse und einer Dropdown-Box zum auswählen, ob man ein- oder eingetragen werden soll.

'''Screenshot des Beispiel-Formulares'''

[[Bild:Formlayout_beispiel1.png]]

Doch diese Technik lässt sich auch auf andere Formulare übertragen. Und genau das ist der Vorteil: man hat dieselbe Struktur, dieselben Abstände. Und kann sie jederzeit ändern, in allen Formularen die das Stylesheet benutzen. Man muss nicht in den HTML-Code eingreifen dafür.

'''Die Struktur'''

Wenn man bedenkt, was ein Formular wirklich ist, woraus es besteht und nach der Maxime vorgeht, allen unnötigen HTML-Code wegzulassen, landet man bei etwas ähnlichem wie dem hier:

<form id="beispielform" method="post" action="">
<label for="name">Name</label> <input type="text" id="Name" name="Name" /><br />
<label for="name">eMail-Adresse</label> <input type="text" id="email" name="email" /><br />
<label for="name">Geburtsmonat</label>
<select id="Monat" name="Monat">
<option value="1">Januar</option>
<option value="2">Februar</option>
</select><br />
<input type="submit" id="submit" />
</form>

Dies ist der optimale Code. Er besteht lediglich aus den Formularelementen und ihren Bezeichnern. Nicht nur die W3C-Richtlinien zur Barrierefreiheit gebieten das Benutzen von <label>-Tags um die Beschreibungen, deren Benutzung verbessert auch die Struktur des Codes und bietet Vorteile beim Einsatz von CSS.

Gegenüber einer Tabellen-Lösung spart man einiges an Code, was die Seite wieder ein bisschen schneller Laden lässt und die Traffic-Kosten verringert.

Den Formularelementen muss sowohl das name, wie auch das id-Attribut mitgegeben werden. Das erste wird gebraucht, damit überhaupt Werte durch das Formular an den Server übermittelt werden. Das zweite ist notwendig, um die Labels an ihre Formularfelder zu binden (so wird z.B. durch einen Klick auf den Label-Text das Formularfeld ausgewählt). Durch die feste ID können aber auch einzelne Felder später individuell gestaltet werden. Mit Hilfe eines ID-Selektors könnte man z.B. dem eMail-Feld einen roten Hintergrund geben um es hervorzuheben.

Um aber Benutzern nicht CSS-Fähigen Browsern wie z.B. alten Netscape-Versionen oder PDAs nicht heilloses durcheinander zu präsentieren, müssen am Ende einer Formular-Zeile Zeilenumbrüche eingefügt werden. So erhält man sich die Abwärtskompatibilität. Diese <br>-Tags machen an dieser Stelle aber auch strukturell Sinn (im Gegensatz zu Ihrem Missbrauch als Absatz-Abstandhalter). Ausserdem spielen sie später für das CSS eine wichtige Rolle.

Wichtiger Hinweis:Der Beispiel-HTML-Code hier ist XHTML-Code. Er benutzt die /> Endung bei kurzen Tags um sie abzuschließen. Wenn man diesen Code in einem HTML4-Dokument benutzen will, sollte man diese Schrägstriche entfernen.

'''Nun zum layouten...'''

Das wichtigste hier ist es, die mittlere "Linie" herzustellen, an der sich sowohl der Label-Text als auch die Textfelder etc. ausrichten. Das erreicht man nur, indem man diesen Elementen eine feste Breite zuweist. Dies tuen wir im folgenden Beispiel, möglich wird es durch die Benutzung der Eigenschaft display: block;.

label, input, select { /* Alle Labels UND Formularelemente auswählen */
display: block;
float: left;
width: 100px; /* Breite.*/
}

form br { /* Alle Zeilenumbrüche in Formularen auswählen */
clear: left; /* das floating der labels und inputs aufheben */
}

input#submit { /* den Submit-Button */
float: none;
width: auto;
}

Die letzte Regel ist nötig, damit der Submit-Button nicht auf die gleiche Breite gestreckt wird wie die Textfelder. Die ideale Lösung für diesen Selektor wäre input[type="submit"], was automatisch alle Submitbuttons auswählt. Der Internet Explorer unterstützt dies jedoch noch nicht, daher muss ein Kompromiss eingegangen werden und dem Button eine eindeutige ID vergeben werden.

Die Abstände wurden in em definiert, damit sie sich in Relation zur Schriftgröße verhalten. Vergrößert man die Schrift, vergrößern sich auch die Abstände entsprechend.

'''Letzte Schritte'''
Jetzt wird noch ein wenig Abstand zwischen den Labels und den Feldern eingefügt sowie der Text der Labels rechts ausgerichtet.

label {
text-align: right;
padding-right: 1em;
}

Wollen wir das Formular nun noch visuell attraktiver gestalten und es dem Screenshot oben näher bringen, fügen wir noch eine Regel in das Stylesheet ein. Diese ist dann dem eigenen Site-Design anzupassen.

form {
background: #de2;
border: thin solid #ab0;
margin:0;
padding:.5em;
}

'''Fazit'''

Mit der hier vorgestellten Technik sind Tabellen auch für das Layout von Formularen überflüssig. Sie bietet aber auch Abwärtskompatibilität zu nicht-CSS-Browsern, und das ohne den Gewinn an Flexibilität durch den Einsatz von CSS zu schmälern.

==Horizontale und vertikale Zentrierung in XHTML Strict==
Das Attribut 'align' ist vom W3C als deprecated (missbilligt) eingestuft und im aktuellen XHTML Strict nicht mehr zulässig. Die bisher übliche Anweisung
<nowiki> <div align="center"> </nowiki>
zur horizontalen Zentrierung muß also ersetzt werden.

Die horizontale Zentrierung von Inline-Elemenen und Text in Paragraphen ist einfach:
<p style="text-align:center;">Dieser Text ist zentriert.</p>
<pre><p style="text-align:center;">Dieser Text ist zentriert.</p></pre>

Block-Elemente wie z.B. <div> oder Tabellen werden zentriert, indem man ihre linken und rechten Abstände gleich groß definiert, wozu man den Wert 'auto' verwenden kann:

<pre>
<div style="margin:auto; width:250px; padding:10px; border: 1px solid black;">
<p>Dieser Block sollte zentriert sein.</p>
</div>
</pre>

Dieser Block wurde bei Ihnen nicht zentriert angezeigt? Dann verwenden Sie einen Browser, der sich nicht an den CSS-Standard hält - vermutlich den Internet Explorer (der diese Anweisung ab Version 6 zwar kennt, aber nur im "standards-compliant mode" auch umsetzt). Um diesen Browser unabhängig von der Version oder dem Modus zur Zentrierung eines Blocklevel-Elements zu veranlassen, nutzen wir einen weiteren Fehler von ihm aus; er wendet nämlich das ausschließlich für Inline-Elemente zuständige Attribut 'text-align' auch auf enthaltene Blocklevel-Elemente an.

Hierdurch werden jedoch ebenfalls alle Inline-Elemente zentriert. Um nun z.B. die Blocklevel-Elemente <div> und <table> für alle Browser zu zentrieren, Texte in den Inline-Elementen <nowiki><p></nowiki> und in Tabellen jedoch weiterhin linksbündig ausgerichtet zu lassen, setzen wir die folgenden Style-Angaben zwischen <nowiki><head> und <body>:</nowiki>

<pre>
<style type="text/css">
body { text-align:center; }
div,table { margin-left:auto; margin-right:auto; }
p,th,td { text-align:left; }
</style>
</pre>

===Vertikale Zentrierung===

Die vertikale Zentrierung einer Textzeile ist einfach, wenn auch wegen der hierzu zweckentfremdeten CSS-Eigenschaft line-height nicht allgemein bekannt:

<pre>
<p style="line-height:5em; text-align:center; border:1px solid black;">Text</p>
</pre>
<p style="line-height:5em; text-align:center; border:1px solid black;">Text</p>

Blocklevel-Elemente sind schwieriger vertikal zu zentrieren, da margin:auto bei der Höhe dem Initialwert des Elements entspricht. Soweit jedoch die Höhe des Elements und seines umschließenden Elements bekannt sind, können die hierzu passenden margins angegeben werden:

<pre>
<div style="width:300px; height:80px; border:1px solid blue;">
<p style="width:250px; height:30px; margin:24px; border:1px margin:20px; border:5px solid black;">
zentrierter Absatz</p>
</div>
</pre>

Einen Haken hat diese Methode allerdings: der Internet Explorer zieht die Rahmenbreite fälschlich von der Größe der inneren Box ab, so daß die Zentrierung nicht ganz stimmt. Dies wird allerdings erst bei breiterem Rahmen sichtbar; testen Sie 5px.

Eine ganze Seite sollte man nur dann innerhalb eines zentrierten Rahmens darstellen, wenn hierdurch keine seiteninternen Scrollbalken provoziert werden. Eine mögliche Anwendung wäre (wie bei mir ab einer ins Fenster passenden Inhaltshöhe von 475px) eine Startseite mit einem begrenzten Inhalt:

<pre>
<style type="text/css">
@media screen, projection {
html { height:100%; padding:0; }
body { height:100%; margin:0; padding:0; }
#seite { height:80%; width:90%; position:absolute; top:10%; left:5%;
overflow:auto; border:1px solid black; }
#innen { padding:15px; }
}
</style>

...
<div id="seite"><div id="innen">
Seiteninhalt (der Innenabstand erfordert hier leider eine Schachtelung)
</div></div>
</pre>

Eine solche Definition ist meist nicht drucktauglich und sollte daher wie hier auch nur für die Bildschirmdarstellung gegeben werden.

Um ein Element mit festen Dimensionen wie die Tafelgrafik dieser Seite zentrieren zu können, ist absolute Positionierung erforderlich. Hierbei wird z.B. die obere linke Ecke des Elements in der Mitte positioniert und das Element über negative margins um die Hälfte seiner Breite nach links und die Hälfte seiner Höhe nach oben verschoben:

<pre>
<style type="text/css">
#Tafelgrafik {
position:absolute; top:50%; left:50%;
margin-left:-49px; margin-top:-43px;
width:98px; height:85px;
}
</style>
</pre>

=== Vertikale Zentrierung in Block Elementen mit unbekannter Höhe ===
Eine weitere schöne Methode funktioniert mit der Eigenschaft display: table-cell;

Damit kann man den von der Positionierung in Tabellenzellen bekannten Eigenschaft vertical-align auch außerhalb von Tabellen nutzen. Das funktioniert bei Standardbrowsern gut. Bei einigen IE nicht. Man kann aber ein paar Hacks nutzen. Ein ausführliches Beispiel hier:

<pre>
<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>
</pre>

== Infobox im Textbereich über CSS einblenden ==
aus http://www.1ngo.de/web/infobox.html 6 / 2006

Erklärungstexte können beim Überfahren eines Elements zwar über das title-Attribut angezeigt werden, jedoch ist dies nur für kurze Texte praktikabel, da diese nicht formatiert werden können und auch nur kurz eingeblendet werden. Eine Infobox mit formatiertem Inhalt kann über CSS auch ohne Verwendung von JavaScript angezeigt werden. Jedoch ist hierzu leider ein Link erforderlich, da der Internet-Explorer die Pseudoklasse :hover nur auf dieses Element anwenden kann.
Die Positionierung der Infobox im Textbereich relativ zu dem aktivierenden Element ist allerdings nicht ganz einfach. Das Element relativ zu positionieren und dadurch als Basis für eine absolute Positionierung der Infobox zu nehmen scheidet aus, da dessen Position im Fließtext unbekannt ist und zu nahe am Fensterrand liegen könnte, so daß die Infobox teilweise außerhalb des sichtbaren Fensters positioniert würde.

<pre>
<style type="text/css">
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
a.infobox:hover { cursor:help; color:#c30; background:white; }
a.infobox span { visibility:hidden; position:absolute; left:16em;
margin-top:1.5em; padding:1em; text-decoration:none; }
a.infobox:hover span { visibility:visible; border:1px solid #c30;
color:blue; background:white; }
</style>


...
<p>Dies können <a class="infobox" href="#INFO">AFAIK<span> <b>Infobox:</b><br />
englisch für: 'As far as I know' ('soweit ich weiß')</span></a> alle modernen Browser interpretieren:</p>
</pre>

Zur Unterscheidung von echten Verweisen erhält der Link die CSS-Klasse 'infobox' und wird mit einem gestrichelten unterem Rand formatiert; auch der im href-Attribut angegebene Anker sollte vorhanden und sinnvoll benannt sein, da er in der Statuszeile erscheinen wird. Im Zustand :hover wird für den Link ein weißer Hintergrund und ein Fragezeichen-Cursor definiert. Beachten Sie, daß mindestens eine dieser Änderungen erforderlich ist, damit der Internet Explorer die Infobox auch anzeigt; es würde sogar ausreichen, einem vorher mit background:#fff definierten Link background:#ffffff oder background:white zuzuweisen. ;-)

Der Inhalt der Infobox wird nach dem zu erklärenden Wort in ein weiteres inline-Element (<span>, da es kein semantisch passendes Element gibt) gesetzt und als 'unsichtbar' definiert.
Für die über ':hover' später 'sichtbar' gemachte Anzeige wird das Element absolut positioniert, wobei ich einen nicht ganz standardkonformen, aber funktionierenden Trick anwende: ich gebe über 'left:' den Abstand des Textbereichs zum linken Rand (hier vom <body>, da keine weiteren positionierten Elemente vorhanden sind) an und setze die Box über 'margin-top:' unter die aktuelle Zeile. Da keine Angabe zu 'top:' gemacht wurde, funktioniert das erfreulicherweise auch in fast allen Browsern.

Ein weiterer Trick ist der Verzicht auf eine Breitenangabe. Eigentlich müßte die Box nun die gesamte noch verfügbare Breite einnehmen, aber nur standardkonforme Browser wie Mozilla setzen dies so um. Wenn allerdings der Text der Infobox an geeigneten Stellen über <br /> umgebrochen wird, ist das zweite Ziel erreicht: alle Browser geben der Box eine zum Inhalt passende Breite und gleiche 'padding'-Angaben bewirken einen einheitlichen Abstand zum Rahmen der Infobox.

Alle Browser? Leider benötigt der Internet Explorer 5.x noch display:block zur Anzeige der Infobox. Dies hat jedoch in allen IEs zur Folge, daß die Infobox bereits beim wiederholten anmausen des eigentlich noch unsichtbaren Anzeigebereichs erscheint. Daher sollte diese "Hilfe" nur dem IE 5.x gegeben werden, z.B. wie hier über einen 'conditional comment'. Außerdem würden standardkonforme Browser die Infobox mit display:block eine Zeilenhöhe tiefer setzen als der IE.

Um in der Infobox Fließtext im Blocksatz anzuzeigen, ist eine Weite anzugeben, was allerdings auch display:block erfordert und zu den genannten Problemen führt. Wenn Sie dies inkauf nehmen wollen, nutzen Sie hierzu den folgenden CSS-Code: Infobox:
Diesmal im Blocksatz. Nicht nur der IE hat hier einen Fehler beim wiederholten Anzeigen der Infobox; Opera schneidet die Infobox leider oben und links etwas ab :-(

<style type="text/css">
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
a.infobox:hover { cursor:help; color:#c30; background:white; }
a.infobox span { display:none; position:absolute; left:16em;
margin-top:0.1em; padding:1em; text-decoration:none; }
a.infobox:hover span { display:block; width:20em; text-align:justify;
border:1px solid #c30; color:blue; background:white; }
</style>


== Listenpunkte positionieren ==
Besser als mit
ul {
list-style-image: url(bild.png);
}
lassen sich Listenpunkte mit
ul li.mithintergrund {
background: url(bild.png) 0 50%;
padding-left: [Breite der Grafik + Abstand]px
}
positionieren.

== Flexibler 2-Spalter mit gleichlangen Spalten ==
Dazu verwendet man ein relativ positioniertes Hintergrundbild

== Waagerechte Navigation mit einer Liste ==
'''Methode 1:'''
display:inline;

'''Methode 2:'''
float:left;
für das li Element + "Float nearly everything" Methode - d.h. das übergeordnete ul Element muß ebenfalls gefloatet werden, sonst werden die Listenpunkte nicht umschlossen.

CSS - Tipps & Tricks

2012-04-16T14:47:04Z

79.240.74.209:

Siehe auch

CSS - Snippets

CSS - Baukasten (Frameworks etc.)
== CSS Zugriff über Attribute (Attributselektoren)==
'''Beispiel'''

<pre>
input[type="button"],
</pre>

== 3-Spalter mit gleich langen Spalten ==
Normalerweise wird ein 3-Spalter mit gleichlangen Spalten simuliert, indem man im Wrapper div einen mehrfarbigen horizontalen Streifen als Hintergrundbild einfügt, das quasi die Spalten durchgängig erscheinen läßt.

Einen anderen einfachen Weg bietet die Eigenschaft table:

<pre>
#content-wrap{
display: table;
}
#wrap{
display: table-row;
}
#left,#middle,#right,#content{
display: table-cell;
vertical-align: top;
}
</pre>

Wir geben dem Umgebenden Wrap die Eigenschaft table und dem nächsten umgebenden Div die Eigenschaft table-row. Alles was sich darin befindet wird dann zu table-cell. Das war es schon nur funktioniert es im IE7 noch nicht. Deshalb die passenden Hacks:

<pre>
* html #left,
* html #middle,
* html #right,
* html #content{
margin-bottom: -10000px;
padding-bottom: 10000px;
float: left;
}

*+html #left,
*+html #middle,
*+html #right,
*+html #content{
height: 100%
float: left;
}
</pre>

== Größenbestimmung in flexiblen Layouts ==
Mit ein paar Standard - Tricks bei der Größendefinition wird es wesentlich leichter in flexiblen Layouts die Exakten Werte herauszufinden.

Ein Problem bei flexiblen Layouts ist die Vererbung der Größen. Wenn für den body z.B. 0.5em als Textgröße festgelegt werden und sich in diesem Body eine Tabelle befindet, dann ist die Größe in dieser Tabelle 0.5em von 0.5em, also 0.25em.

<pre>
* { font-size: 1em; /* do not edit */}
html { font-size: 62.5%; /* do not edit */}
body {font-size: 1.12em; /* edit here global font size - 1em is 10px */}
</pre>

Durch die Definition in * und html haben wir in allen Browsern in den Unterelementen eine Standardgröße von 10px auf 1em. Diese 'runde' Größe läßt sich hervoragend für die Größenbestimmungen der anderen Blöcken verwenden. Möchten wir z.B. eine Spaltenbreite von 52px in der Standardeinstellung des Browsers erreichen, dann entspricht das der Größe 5.2em. Wenn der Browser resized wird wächst so nicht nur die Schrift, sondern auch die Breite der Spalten und das genau Proportional.

== Formulare mit CSS ==

'''Formulare per CSS Layouten'''

Von Gerrit Kaiser, am 09.01.04

15.9.06 http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten

'''Das Formular'''

Für dieses Beispiel nehmen wir uns ein einfaches Formular, wie es auf vielen Websites anzufinden ist. Nehmen wir an, es handelt sich um ein Newsletter-Formular mit Eingabefeldern für Name, eMail-Adresse und einer Dropdown-Box zum auswählen, ob man ein- oder eingetragen werden soll.

'''Screenshot des Beispiel-Formulares'''

[[Bild:Formlayout_beispiel1.png]]

Doch diese Technik lässt sich auch auf andere Formulare übertragen. Und genau das ist der Vorteil: man hat dieselbe Struktur, dieselben Abstände. Und kann sie jederzeit ändern, in allen Formularen die das Stylesheet benutzen. Man muss nicht in den HTML-Code eingreifen dafür.

'''Die Struktur'''

Wenn man bedenkt, was ein Formular wirklich ist, woraus es besteht und nach der Maxime vorgeht, allen unnötigen HTML-Code wegzulassen, landet man bei etwas ähnlichem wie dem hier:

<form id="beispielform" method="post" action="">
<label for="name">Name</label> <input type="text" id="Name" name="Name" /><br />
<label for="name">eMail-Adresse</label> <input type="text" id="email" name="email" /><br />
<label for="name">Geburtsmonat</label>
<select id="Monat" name="Monat">
<option value="1">Januar</option>
<option value="2">Februar</option>
</select><br />
<input type="submit" id="submit" />
</form>

Dies ist der optimale Code. Er besteht lediglich aus den Formularelementen und ihren Bezeichnern. Nicht nur die W3C-Richtlinien zur Barrierefreiheit gebieten das Benutzen von <label>-Tags um die Beschreibungen, deren Benutzung verbessert auch die Struktur des Codes und bietet Vorteile beim Einsatz von CSS.

Gegenüber einer Tabellen-Lösung spart man einiges an Code, was die Seite wieder ein bisschen schneller Laden lässt und die Traffic-Kosten verringert.

Den Formularelementen muss sowohl das name, wie auch das id-Attribut mitgegeben werden. Das erste wird gebraucht, damit überhaupt Werte durch das Formular an den Server übermittelt werden. Das zweite ist notwendig, um die Labels an ihre Formularfelder zu binden (so wird z.B. durch einen Klick auf den Label-Text das Formularfeld ausgewählt). Durch die feste ID können aber auch einzelne Felder später individuell gestaltet werden. Mit Hilfe eines ID-Selektors könnte man z.B. dem eMail-Feld einen roten Hintergrund geben um es hervorzuheben.

Um aber Benutzern nicht CSS-Fähigen Browsern wie z.B. alten Netscape-Versionen oder PDAs nicht heilloses durcheinander zu präsentieren, müssen am Ende einer Formular-Zeile Zeilenumbrüche eingefügt werden. So erhält man sich die Abwärtskompatibilität. Diese <br>-Tags machen an dieser Stelle aber auch strukturell Sinn (im Gegensatz zu Ihrem Missbrauch als Absatz-Abstandhalter). Ausserdem spielen sie später für das CSS eine wichtige Rolle.

Wichtiger Hinweis:Der Beispiel-HTML-Code hier ist XHTML-Code. Er benutzt die /> Endung bei kurzen Tags um sie abzuschließen. Wenn man diesen Code in einem HTML4-Dokument benutzen will, sollte man diese Schrägstriche entfernen.

'''Nun zum layouten...'''

Das wichtigste hier ist es, die mittlere "Linie" herzustellen, an der sich sowohl der Label-Text als auch die Textfelder etc. ausrichten. Das erreicht man nur, indem man diesen Elementen eine feste Breite zuweist. Dies tuen wir im folgenden Beispiel, möglich wird es durch die Benutzung der Eigenschaft display: block;.

label, input, select { /* Alle Labels UND Formularelemente auswählen */
display: block;
float: left;
width: 100px; /* Breite.*/
}

form br { /* Alle Zeilenumbrüche in Formularen auswählen */
clear: left; /* das floating der labels und inputs aufheben */
}

input#submit { /* den Submit-Button */
float: none;
width: auto;
}

Die letzte Regel ist nötig, damit der Submit-Button nicht auf die gleiche Breite gestreckt wird wie die Textfelder. Die ideale Lösung für diesen Selektor wäre input[type="submit"], was automatisch alle Submitbuttons auswählt. Der Internet Explorer unterstützt dies jedoch noch nicht, daher muss ein Kompromiss eingegangen werden und dem Button eine eindeutige ID vergeben werden.

Die Abstände wurden in em definiert, damit sie sich in Relation zur Schriftgröße verhalten. Vergrößert man die Schrift, vergrößern sich auch die Abstände entsprechend.

'''Letzte Schritte'''
Jetzt wird noch ein wenig Abstand zwischen den Labels und den Feldern eingefügt sowie der Text der Labels rechts ausgerichtet.

label {
text-align: right;
padding-right: 1em;
}

Wollen wir das Formular nun noch visuell attraktiver gestalten und es dem Screenshot oben näher bringen, fügen wir noch eine Regel in das Stylesheet ein. Diese ist dann dem eigenen Site-Design anzupassen.

form {
background: #de2;
border: thin solid #ab0;
margin:0;
padding:.5em;
}

'''Fazit'''

Mit der hier vorgestellten Technik sind Tabellen auch für das Layout von Formularen überflüssig. Sie bietet aber auch Abwärtskompatibilität zu nicht-CSS-Browsern, und das ohne den Gewinn an Flexibilität durch den Einsatz von CSS zu schmälern.

==Horizontale und vertikale Zentrierung in XHTML Strict==
Das Attribut 'align' ist vom W3C als deprecated (missbilligt) eingestuft und im aktuellen XHTML Strict nicht mehr zulässig. Die bisher übliche Anweisung
<nowiki> <div align="center"> </nowiki>
zur horizontalen Zentrierung muß also ersetzt werden.

Die horizontale Zentrierung von Inline-Elemenen und Text in Paragraphen ist einfach:
<p style="text-align:center;">Dieser Text ist zentriert.</p>
<pre><p style="text-align:center;">Dieser Text ist zentriert.</p></pre>

Block-Elemente wie z.B. <div> oder Tabellen werden zentriert, indem man ihre linken und rechten Abstände gleich groß definiert, wozu man den Wert 'auto' verwenden kann:

<pre>
<div style="margin:auto; width:250px; padding:10px; border: 1px solid black;">
<p>Dieser Block sollte zentriert sein.</p>
</div>
</pre>

Dieser Block wurde bei Ihnen nicht zentriert angezeigt? Dann verwenden Sie einen Browser, der sich nicht an den CSS-Standard hält - vermutlich den Internet Explorer (der diese Anweisung ab Version 6 zwar kennt, aber nur im "standards-compliant mode" auch umsetzt). Um diesen Browser unabhängig von der Version oder dem Modus zur Zentrierung eines Blocklevel-Elements zu veranlassen, nutzen wir einen weiteren Fehler von ihm aus; er wendet nämlich das ausschließlich für Inline-Elemente zuständige Attribut 'text-align' auch auf enthaltene Blocklevel-Elemente an.

Hierdurch werden jedoch ebenfalls alle Inline-Elemente zentriert. Um nun z.B. die Blocklevel-Elemente <div> und <table> für alle Browser zu zentrieren, Texte in den Inline-Elementen <nowiki><p></nowiki> und in Tabellen jedoch weiterhin linksbündig ausgerichtet zu lassen, setzen wir die folgenden Style-Angaben zwischen <nowiki><head> und <body>:</nowiki>

<pre>
<style type="text/css">
body { text-align:center; }
div,table { margin-left:auto; margin-right:auto; }
p,th,td { text-align:left; }
</style>
</pre>

===Vertikale Zentrierung===

Die vertikale Zentrierung einer Textzeile ist einfach, wenn auch wegen der hierzu zweckentfremdeten CSS-Eigenschaft line-height nicht allgemein bekannt:

<pre>
<p style="line-height:5em; text-align:center; border:1px solid black;">Text</p>
</pre>
<p style="line-height:5em; text-align:center; border:1px solid black;">Text</p>

Blocklevel-Elemente sind schwieriger vertikal zu zentrieren, da margin:auto bei der Höhe dem Initialwert des Elements entspricht. Soweit jedoch die Höhe des Elements und seines umschließenden Elements bekannt sind, können die hierzu passenden margins angegeben werden:

<pre>
<div style="width:300px; height:80px; border:1px solid blue;">
<p style="width:250px; height:30px; margin:24px; border:1px margin:20px; border:5px solid black;">
zentrierter Absatz</p>
</div>
</pre>

Einen Haken hat diese Methode allerdings: der Internet Explorer zieht die Rahmenbreite fälschlich von der Größe der inneren Box ab, so daß die Zentrierung nicht ganz stimmt. Dies wird allerdings erst bei breiterem Rahmen sichtbar; testen Sie 5px.

Eine ganze Seite sollte man nur dann innerhalb eines zentrierten Rahmens darstellen, wenn hierdurch keine seiteninternen Scrollbalken provoziert werden. Eine mögliche Anwendung wäre (wie bei mir ab einer ins Fenster passenden Inhaltshöhe von 475px) eine Startseite mit einem begrenzten Inhalt:

<pre>
<style type="text/css">
@media screen, projection {
html { height:100%; padding:0; }
body { height:100%; margin:0; padding:0; }
#seite { height:80%; width:90%; position:absolute; top:10%; left:5%;
overflow:auto; border:1px solid black; }
#innen { padding:15px; }
}
</style>

...
<div id="seite"><div id="innen">
Seiteninhalt (der Innenabstand erfordert hier leider eine Schachtelung)
</div></div>
</pre>

Eine solche Definition ist meist nicht drucktauglich und sollte daher wie hier auch nur für die Bildschirmdarstellung gegeben werden.

Um ein Element mit festen Dimensionen wie die Tafelgrafik dieser Seite zentrieren zu können, ist absolute Positionierung erforderlich. Hierbei wird z.B. die obere linke Ecke des Elements in der Mitte positioniert und das Element über negative margins um die Hälfte seiner Breite nach links und die Hälfte seiner Höhe nach oben verschoben:

<pre>
<style type="text/css">
#Tafelgrafik {
position:absolute; top:50%; left:50%;
margin-left:-49px; margin-top:-43px;
width:98px; height:85px;
}
</style>
</pre>

=== Vertikale Zentrierung in Block Elementen mit unbekannter Höhe ===
Eine weitere schöne Methode funktioniert mit der Eigenschaft display: table-cell;

Damit kann man den von der Positionierung in Tabellenzellen bekannten Eigenschaft vertical-align auch außerhalb von Tabellen nutzen. Das funktioniert bei Standardbrowsern gut. Bei einigen IE nicht. Man kann aber ein paar Hacks nutzen. Ein ausführliches Beispiel hier:

<pre>
<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>
</pre>

== Infobox im Textbereich über CSS einblenden ==
aus http://www.1ngo.de/web/infobox.html 6 / 2006

Erklärungstexte können beim Überfahren eines Elements zwar über das title-Attribut angezeigt werden, jedoch ist dies nur für kurze Texte praktikabel, da diese nicht formatiert werden können und auch nur kurz eingeblendet werden. Eine Infobox mit formatiertem Inhalt kann über CSS auch ohne Verwendung von JavaScript angezeigt werden. Jedoch ist hierzu leider ein Link erforderlich, da der Internet-Explorer die Pseudoklasse :hover nur auf dieses Element anwenden kann.
Die Positionierung der Infobox im Textbereich relativ zu dem aktivierenden Element ist allerdings nicht ganz einfach. Das Element relativ zu positionieren und dadurch als Basis für eine absolute Positionierung der Infobox zu nehmen scheidet aus, da dessen Position im Fließtext unbekannt ist und zu nahe am Fensterrand liegen könnte, so daß die Infobox teilweise außerhalb des sichtbaren Fensters positioniert würde.

<pre>
<style type="text/css">
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
a.infobox:hover { cursor:help; color:#c30; background:white; }
a.infobox span { visibility:hidden; position:absolute; left:16em;
margin-top:1.5em; padding:1em; text-decoration:none; }
a.infobox:hover span { visibility:visible; border:1px solid #c30;
color:blue; background:white; }
</style>


...
<p>Dies können <a class="infobox" href="#INFO">AFAIK<span> <b>Infobox:</b><br />
englisch für: 'As far as I know' ('soweit ich weiß')</span></a> alle modernen Browser interpretieren:</p>
</pre>

Zur Unterscheidung von echten Verweisen erhält der Link die CSS-Klasse 'infobox' und wird mit einem gestrichelten unterem Rand formatiert; auch der im href-Attribut angegebene Anker sollte vorhanden und sinnvoll benannt sein, da er in der Statuszeile erscheinen wird. Im Zustand :hover wird für den Link ein weißer Hintergrund und ein Fragezeichen-Cursor definiert. Beachten Sie, daß mindestens eine dieser Änderungen erforderlich ist, damit der Internet Explorer die Infobox auch anzeigt; es würde sogar ausreichen, einem vorher mit background:#fff definierten Link background:#ffffff oder background:white zuzuweisen. ;-)

Der Inhalt der Infobox wird nach dem zu erklärenden Wort in ein weiteres inline-Element (<span>, da es kein semantisch passendes Element gibt) gesetzt und als 'unsichtbar' definiert.
Für die über ':hover' später 'sichtbar' gemachte Anzeige wird das Element absolut positioniert, wobei ich einen nicht ganz standardkonformen, aber funktionierenden Trick anwende: ich gebe über 'left:' den Abstand des Textbereichs zum linken Rand (hier vom <body>, da keine weiteren positionierten Elemente vorhanden sind) an und setze die Box über 'margin-top:' unter die aktuelle Zeile. Da keine Angabe zu 'top:' gemacht wurde, funktioniert das erfreulicherweise auch in fast allen Browsern.

Ein weiterer Trick ist der Verzicht auf eine Breitenangabe. Eigentlich müßte die Box nun die gesamte noch verfügbare Breite einnehmen, aber nur standardkonforme Browser wie Mozilla setzen dies so um. Wenn allerdings der Text der Infobox an geeigneten Stellen über <br /> umgebrochen wird, ist das zweite Ziel erreicht: alle Browser geben der Box eine zum Inhalt passende Breite und gleiche 'padding'-Angaben bewirken einen einheitlichen Abstand zum Rahmen der Infobox.

Alle Browser? Leider benötigt der Internet Explorer 5.x noch display:block zur Anzeige der Infobox. Dies hat jedoch in allen IEs zur Folge, daß die Infobox bereits beim wiederholten anmausen des eigentlich noch unsichtbaren Anzeigebereichs erscheint. Daher sollte diese "Hilfe" nur dem IE 5.x gegeben werden, z.B. wie hier über einen 'conditional comment'. Außerdem würden standardkonforme Browser die Infobox mit display:block eine Zeilenhöhe tiefer setzen als der IE.

Um in der Infobox Fließtext im Blocksatz anzuzeigen, ist eine Weite anzugeben, was allerdings auch display:block erfordert und zu den genannten Problemen führt. Wenn Sie dies inkauf nehmen wollen, nutzen Sie hierzu den folgenden CSS-Code: Infobox:
Diesmal im Blocksatz. Nicht nur der IE hat hier einen Fehler beim wiederholten Anzeigen der Infobox; Opera schneidet die Infobox leider oben und links etwas ab :-(

<style type="text/css">
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
a.infobox:hover { cursor:help; color:#c30; background:white; }
a.infobox span { display:none; position:absolute; left:16em;
margin-top:0.1em; padding:1em; text-decoration:none; }
a.infobox:hover span { display:block; width:20em; text-align:justify;
border:1px solid #c30; color:blue; background:white; }
</style>


== Listenpunkte positionieren ==
Besser als mit
ul {
list-style-image: url(bild.png);
}
lassen sich Listenpunkte mit
ul li.mithintergrund {
background: url(bild.png) 0 50%;
padding-left: [Breite der Grafik + Abstand]px
}
positionieren.

== Flexibler 2-Spalter mit gleichlangen Spalten ==
Dazu verwendet man ein relativ positioniertes Hintergrundbild

== Waagerechte Navigation mit einer Liste ==
'''Methode 1:'''
display:inline;

'''Methode 2:'''
float:left;
für das li Element + "Float nearly everything" Methode - d.h. das übergeordnete ul Element muß ebenfalls gefloatet werden, sonst werden die Listenpunkte nicht umschlossen.

CSS - Baukasten

2012-04-16T14:46:12Z

79.240.74.209:

Ziel des Abschnittes CSS-Baukasten ist es verschiedene CSS-Skripte vorzuhalten, die für verschiedene Projekte eingesetzt werden können.

Siehe auch:

[[CSS - Tipps & Tricks]]

[[CSS - Snippets]]
== Standard Layouts ==
[[Typo3 Standard-CSS mit YUI]]

== CSS-Grid Systeme ==
=== Links ===
http://www.tripwiremagazine.com/2009/06/45-css-grid-systems-layout-generators-and-tutorials-that-every-designer-should-know.html

hiervon sind die engl. Beschreibungen

=== 1140 grid ===
* optimiert für 1280px
* skaliert bei kleineren Bildschirmen (inkl. Bilder)
* css3 queries sorgen dafür, daß es bei smartphones funktioniert

http://cssgrid.net/

=== YUI Yahoo User Interface ===

=== 960gs ===
CSS Framework that worth a look. The download includes templates for Fireworks, Photoshops, Inkscape and etc. so that you can start designing your web template immediately. The PSD file that comes with guides ready save designers a lot of time.

=== Blueprint ===
Blueprint: A CSS Framework

Blueprint includes a CSS reset that eliminates the discrepancies across different browsers. There are a lot of external tools and templates to aid your web development with Blueprint. See some live Demos
http://www.blueprintcss.org/tests/

=== YAML ===
YAML is another bulletproof CSS Framework that has a very good documentation. You can easily get started by downloading the PDF documentation and the sample project from the official site. There are some tools that will help you on your development too. For example, the YAML Builder can visually create YAML-based CSS layouts.
=== Tripoli Framework ===

Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

=== BlueTrip ===

BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete Documentation and Demos.

Blueprint: A CSS Framework

Blueprint includes a CSS reset that eliminates the discrepancies across different browsers. There are a lot of external tools and templates to aid your web development with Blueprint. See some live Demos

=== 960 Grid System ===

[[960 Grid System (960gs)]]

CSS Framework that worth a look. The download includes templates for Fireworks, Photoshops, Inkscape and etc. so that you can start designing your web template immediately. The PSD file that comes with guides ready save designers a lot of time.

=== Tripoli Framework ===

Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

=== YAML – Yet Another Multicolumn Layout ===

YAML is another bulletproof CSS Framework that has a very good documentation. You can easily get started by downloading the PDF documentation and the sample project from the official site. There are some tools that will help you on your development too. For example, the YAML Builder can visually create YAML-based CSS layouts.

=== BlueTrip ===

BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete Documentation and Demos.

=== YUI Grid CSS ===

YUI Grids CSS support fluid-width layouts as well as fixed-width layouts. This is the advantage of YUI Grids CSS over the other CSS Frameworks. To get started with YUI Grids CSS, you can download the cheat sheet and YUI Grids Builder from the official site.

=== Elastic CSS Framework ===

Elastic provides a declarative language to define the layout structure and behavior. This is a young framework, and the best site to demo the usage of Elastic is the official site itself. The Elastic CSS Framework has a lot of classes and helpers that will aid in the process of webdesign.

=== SenCSS ===

SenCSS doesn’t include a layout system, but it does provide other things such as baseline, fonts, paddings, margins and more. It comes with a commented version and a minified version which suitable for production use.

=== The Golden Grid ===

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.

=== Content With Style ===

This is a fixed width layout and the zip files contains a few layouts such as vertical navigation with 1 content column, vertical navigation with 2 content columns, and etc.

===CSS-boilerplate===

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

=== Typogridphy ===

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.

=== Logicss ===
The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

* Common cross-browser rendering behavior approach (not a reset).
* Beautiful font stacks.
* Typography with text resizing capabilities and vertical baseline/rhythm.
* Three totally flexible layout grid templates, customizable with the toolset.
o Elastic layout using EMs.
o Liquid layout with percentages.
o Fixed layout using pixel dimensions.

== Bausteine für die CSS - Navigation ==
ToDo Bilder machen

Tipp ein umschließendes Div mit Klassen wie .nav-v, .nav-h etc. um die Code-Schnipsel leicht einbinden zu können
=== CSS-Navigation: Vertikale Liste ===
Beispiel 1 (basierend auf TYPO3)

<pre>

.nav-v {

float:left;
margin:0 0 0 -50px;
padding:0;
}
.nav-v #nav-sub{

}
.nav-v ul {
/*padding:0 0 10px 0;*/
/*ie8..*/
float: left;
width:180px;
background: url("../media/nav-divider.png");
background-repeat: no-repeat;
background-position: bottom;
/*padding-bottom: 1px;*/
font-size: 12px;
}

.nav-v li.first{

}

.nav-v li {
background: url("../media/nav-divider.png");
background-repeat: no-repeat;
font-weight:normal;
list-style-position:outside;
margin: 0;
padding: 0;
/* ie8 */
width:180px;
float: left;
}

.nav-v li.last {
margin-bottom: 1px;
}

.nav-v li a {
display:block;
height: 23px;
line-height:23px;
text-decoration:none;
}

.nav-v li a,
.nav-v li a{
color: #333;
}

.nav-v li a:hover,
.nav-v li.cur a,
.nav-v li.act a
{
color: #FFF;
background: url("../media/bg-over.png");
background-repeat: no-repeat;
background-position: 0 1px;
}

/* Level 2 */
.nav-v ul ul{
padding: 0;
}
.nav-v li li {
display: inline;
font-size:11px;
/* ie8 */
border-bottom: 0px;

}
.nav-v li li a{
border-top: 1px dotted #e4e5e6;
background:#014674;
height: 24px;
line-height: 24px;
}

.nav-v li.act li a,
.nav-v li.cur li a{
color:#e4e5e6;
}

.nav-v li li a:hover,
.nav-v li li.cur a:visited,
.nav-v li li.cur a:link
{
color: #FFF;
}
.nav-v li li.act a:visited,
.nav-v li li.act a:link{

}

.nav-v li li.act {
}
.nav-v li li.act a:link,
.nav-v li li.act a:visited {
}

</pre>
=== CSS-Navigation: Horizontale Liste ===
Beispiel

===CSS-Navi: Verschachtelte Rollover Liste===
aus: http://css.maxdesign.com.au/
<pre>
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
#navcontainer { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

#navcontainer ul ul li { margin: 0 0 1px 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.
</pre>

In Anlehnukng an YAML werden die Dateien möglichst Modular vorgehalten und über ein Zentrales Sylesheet eingebunden

== Konzept-Richtlinien ==
ToDo - evt. verwerfen erhalten bleibt das Konzept BAukastenmäßig das CSS zu verteilen. Evt. so daß man für sich funkionsfähige Skripte macht und diese durch einen Div Wrap später auf den Bereich beschränkt wo sie eingesetzt werden.
=== Struktur ===
/main.css
ToDo

== Zentrales Stylesheet base.css==

Hier werden die verschiedenen benötigten Dateien eingebunden und einige Grundeinstellungen definiert.
In einer späteren Ausbaustufe werden diese evt. ebenfalls ausgelagert
In Typo3 Projekten könnten die CSS-Dateien auch über TypoScript eingebunden werden dann entfällt die base.css
<pre>
/*
### "CSS-Baukasten (c)2006 Stephan Schlegel" ###
### Version: 0.1
### Datei : base.css
### Funktion : Zentrales Stylesheet, Grundeinstellungen + Einbindung der CSS-Module
*/

@import url(main/base.css);
@import url(mods/basemod.css);
@import url(mods/basemod_layout_xcol_xyz.css);
@import url(navi/nav_slidingdoor.css);
@import url(main/content.css);
@import url(print/print_003.css);
</pre>