Bearbeiten von „CSS - Tipps & Tricks“

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>
<!--[if IE 5]><style type="text/css">
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
</style><![endif]-->

...
<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>
 <!--[if IE]><style type="text/css">
  a.infobox2:hover span { margin-top:1.5em; width:22em; }
 </style><![endif]-->

== 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.