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>
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<style type="text/css">
body { text-align:center; }
div,table { margin-left:auto; margin-right:auto; }
p,th,td { text-align:left; }
</style>
Vertikale Zentrierung
Die vertikale Zentrierung einer Textzeile ist einfach, wenn auch wegen der hierzu zweckentfremdeten CSS-Eigenschaft line-height nicht allgemein bekannt:
<p style="line-height:5em; text-align:center; border:1px solid black;">Text</p>
Text
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:
<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>
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:
<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>
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:
<style type="text/css">
#Tafelgrafik {
position:absolute; top:50%; left:50%;
margin-left:-49px; margin-top:-43px;
width:98px; height:85px;
}
</style>
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.
