CSS - Tipps & Tricks
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 <div align="center"> zur horizontalen Zentrierung muß also ersetzt werden.
Die horizontale Zentrierung von Inline-Elemenen und Text in Paragraphen ist einfach:
Dieser Text ist zentriert.
<p style="text-align:center;">Dieser Text ist zentriert.</p>
Block-Elemente wie z.B.
<div style="margin:auto; width:250px; padding:10px; border: 1px solid black;"> <p>Dieser Block sollte zentriert sein.</p> </div>
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.
<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>
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 (, 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
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
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.
