WMP Webstandards

Zehn kurze Tipps

zurück zur Übersicht

In diesem Artikel werden einige bekannte oder weniger bekannte Tipps vorgestellt, die praktisch oder experimentell sein können.

Nach oben

Zwei Klassen zusammen angeben

Was viele nicht wissen: Man kann zwei Klassen aufeinmal für dasselbe Element angeben - damit spart man sich oft eine Menge Schreibarbeit.

<p class="abstand gruen">Beispieltext</p> .abstand{
    margin-left:2em;
}
.gruen{
    color:green;
} Nach oben

Den Anfangsbuchstaben gestalten

Beliebtes Gestaltungsmittel für Printmedien ist die Hervorhebung des Anfangsbuchstabens bei Texten. Zum Beispiel in Form von verzierten Lettern bei alten Büchern oder einfach nur hervorgehoben durch eine Vergrößerung zur Einleitung eines neuen Kapitels bei modernen Texten. Dies kann man natürlich auch einfach mit CSS für das Web umsetzen.

Beispieltext, der mit Hilfe des Selektors ":firstchild" formatiert wurde

<p class="text">Ich bin eine Copy für Anzeigen und ich erkläre den Superwitz aus Headline und Bild da oben. Meistens mach ich noch ein paar Bemerkungen darüber, wie toll das Produkt ist aber heute hab ich dazu überhaupt keine Lust.</p> p.text{
    color:black;
}

p.text:first-letter{
    font-size:30px;
    float:left;
    padding:0 10px 0 0;
}

Beispieltext, der mit Hilfes des span-Elements formatiert wurde

<p class="text"><span>I</span>ch bin eine Copy für Anzeigen und ich erkläre den Superwitz aus Headline und Bild da oben. Meistens mach ich noch ein paar Bemerkungen darüber, wie toll das Produkt ist aber heute hab ich dazu überhaupt keine Lust.</p> p.text span{
    font-size:30px;
    float:left;
    padding:0 10px 0 0;
}

Beispieltext mit Bild, statt Anfangsbuchstaben:

<p class="text"><span>I</span>ch bin eine Copy für Anzeigen und ich erkläre den Superwitz aus Headline und Bild da oben. Meistens mach ich noch ein paar Bemerkungen darüber, wie toll das Produkt ist aber heute hab ich dazu überhaupt keine Lust.</p> p.text span{
    background:url(bild.jpg) no-repeat left;
    display:block;
    height:30px;
    width:30px;
    text-indent:-9999px;
    float:left;
    padding:0 10px 0 0;
}

Hier kann man sich die Beispiel dazu ansehen

Nach oben

Bilder ersetzen

Es ist immer ratsam, reguläres Markup statt Bilder zu verwenden, wenn Informationen übermittelt werden sollen. Bilder, die Bestandteil des Design sind, haben im Quelltext nichts zu suchen und sollten per CSS eingebunden werden, etwas was schließlich auch der Zugänglichkeit dient.

So sollte man Bilder nicht einbinden:

<h2><img src="ueberschrift" alt="Überschrift" /></h2>

Dies ist nicht nur für Textbrowser katastrophal, auch Suchmaschinen werden dsicher das alt-Attribut nicht so bewerten wie den Text einer Überschrift.

Schon besser wäre dies:

<h2 id="headline">Dies ist eine Überschrift</h2>

Aber was ist, wenn man einen ganz speziellen Font in seine Seite integrieren möchte und man unsicher ist, dass die Besucher diesen auch installiert haben?

Der Trick ist, man bindet ein Hintergrundbild mit dem Text der Überschrift in der gewünschen Schrift per CSS ein und blendet den Text der Überschrift mit einem großen negativen Texteinzug aus.

#headline{
    text-indent:-9999px;
    background:url(headline.jpg) no-repeat;
} Nach oben

Cursor wechseln

Manchmal bietet es sich bei bestimmten Elementen an, den Cursor zu wechseln. Zum Beispiel bei einem Link "FAQ" oder bei einem Submit-Button

Beispiel: Link

<p><a class="help" href="#">FAQ</a></p>

Anmerkung: Für Links ist cursor:pointer; voreingestellt.

a.help{
  cursor:help;
}

Beispiel: Button

Für Input-Elemente ist cursor:text; voreingestellt, was bei einem Button verwirrend wäre.

<p><input class="submit" type="submit" id="Submit" /></p> input[type=submit], input.submit{
    cursor:pointer;
}

Weitere Werte für cursor findet man auf css4you.de.

Nach oben

Grafische Aufzählungspunkte

Wenn man die vorgegenen Listenpunkte nicht mag, kann man auch leicht per CSS grafische Listenpunkte erstellen

<ul>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul> ul{
    list-style-image:url("bild.gif");
}

Eine andere Möglichkeit ist, den Listentyp zu entfernen und ein Hintergrundbild statt dessen einzufügen.Der Vorteil davon ist, dass man dann bessere Ausrichtungsmöglichkeiten hat.

ul{
    list-style:none;
}
ul li{
    background:url(bild.jpg) no-repeat top left;
    padding-left: 20px;
} Nach oben

Innenabstände ohne padding erstellen

Da der IE 5.x und IE 6 im Quirksmode den Innenabstand padding nicht in die Größenberechnung mit einbezieht (fehlerhaftes Boxmodel), kommt es bei CSS-Layouts oft bei diesen Browsern zu Darstellungsfehlern.

Um dies zu beheben, greift man oft auf allerlei Hacks zurück, die Schwachstellen in der Implementierung älterer IE Versionen sich zu nutze machen. Es geht jedoch eleganter: Man vermeidet padding im Zielelement und benutz statt dessen margin für alle Tochterelemente.

Folgende Ausgangsstruktur:

<div id="mutterelement">
    <h2>Überschrift</h2>
    <p>Text</p>
</div>

Der Bereich "Mutterelement" soll einen Innenabstand von 20px auf beiden Seiten bekommen, ohne dass sich die Gesamtbreite von 500px ändert.
Man wendet einfach margin per Universalselektor auf alle Tochterelemente an (betimmte Abstände kann man nachträglich korrigieren, die einem nicht passen):

#mutterelement{
    width:500px;
}
#mutterelement *{
    margin-left:20px;
    margin-right:20px;
} Nach oben

Abstände und Ränder zurücksetzen

Da Browser teilweise unterscheidliche Standardabstände für Elemente besitzen, ist es ratsam die Abstände für alle Elemente zu entfernen und sie nach Bedarf wieder hinzuzufügen.

Das Entfernen aller Abstände erreicht man leicht mit dem Universalselektor:

*{
    padding:0;
    margin:0;
}

Störend ist meist auch der voreingestellte Rand für Bilder, daher ist es nicht schlecht, wenn man diesen anfangs ebenfalls entfernt. Man sollte aber nicht border:0; in den Universalselektor mit hineinnehmen, da man sonst auch die Ränder von Formularelementen entfernt, die man sicher benötigt.

img{
    border:0;
} Nach oben

Transparenz per CSS für Mozilla, Safari und IE

Im Folgenden wird gezeigt, wie man für Mozilla, Safari und den IE mit CSS transparente Bereiche definieren kann.

Ausgangsstruktur

<div id="box">
    <div id="transparent">
          <p>ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text </p>
    </div>
</div>

Der Bereich mit der ID "transparent" soll, wie der Name schon verrät, transparent werden, jedoch dessen Tochterelemente nicht.

Für Safari und Mozilla ab Version 1.7b verwendet man die CSS3 Eigenschaft opacity, für ältere Mozilla Versionen -moz-opacity und für den IE den alpha-Filter.

Außerdem wird gesagt, dass Safari 1.1 zur Darstellung von Transparenz -khtml-opacity benötigt.

Damit die Tochterelemente nicht dir Transparenz vererbt bekommen, muß der Bereicht mit der ID "transparent" relativ positioniert werden. Die Formatierungen sehen dann zum Beispiel so aus:

#box{
    width:300px;
    height:300px;
    padding:20px;
}
#transparent{
    position:relative;
    opacity: 0.5;
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    filter:alpha(opacity=50);
    background:white;
}
#transparent *{
    color:black;
}

Achtung: Die drei Eigenschaften opacity, -moz-opacity, -khtml-opacity und der alpha-Filter sind nicht CSS2 valide, wobei zu bemerken ist, dass opacity valides CSS3 ist.

Nach oben

Ein Select-Feld gestalten.

Im Folgenden wird gezeigt, wie man Selectfelder ein wenig mit CSS aufpeppen kann.

<form name="Beispiel">
<select name="selectname" size="1">
        <option class="eins">Option eins</option>
        <option class="zwei">Option zwei</option>
        <option class="eins">Option eins</option>
        <option class="zwei">Option zwei</option>
</select>
</form>

Die Formatierungen dazu:

option {color:white;}
option.eins {background: blue;}
option.zwei {background: red;} Nach oben

Scrollbare Bereiche - Iframe Nachbildung

Oft werden Iframes trotz ihrer Nachteile verwendet, um kleinere scrollbare Bereiche zu schaffen. Dies kann man jedoch auch ohne Frames mit CSS erreichen.

Beispielmarkup

<div class="scroll">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

Für den Bereich mit der Klasse "scroll" muss eine Breite oder Höhe angegeben werden. Entscheident ist die Eigenschaft overflow mit dem Wert auto.

Beispiel CSS

div.scroll {
    height: 400px;
    width: 300px;
    overflow: auto;
    border: 1px solid black;
    background: #ccc;
    padding: 10px;
}

Kommentare







10.08.2005 Löschen

fphilipe

Die Methode mit text-indent: -9999px; wird ab CSS3 nicht mehr nötig sein, denn dann kann man die neue Farbmethode rgba (a steht für alpha) verwenden:
rgba(0,0,0,0);

15.08.2005 Löschen

pberndt

"Bei Hover Cursor wechseln" ist Unsinn: Den Cursor sieht man ohnehin nur, wenn sich die Maus über dem Objekt befindet. Lässt man also das :hover weg, funktionierts genau so - nur auch im IE.

15.08.2005 Löschen

Twisting

Stimmt. Ich nehm's mal raus...aber warum fällt das jetzt erst auf? ;)

25.11.2005 Löschen

Der Kommentator

Hallo,
gute Tips die du da hast. Allerdings würde ich die Text-indent -9999px Ausblend-methode über einen <span> Container lösen, der den Text dann mit display:none, ausblendet.

25.11.2005 Löschen

Twisting

@Kommentator: Jedem das Seine...spans würden unnötiges Markup produzieren ohne Bedeutung.

18.12.2005 Löschen

bl@cksmily

@ Transparenz per CSS für Mozilla, Safari und IE
Im FF sieht das ganze verdammt gut aus, aber im IE (Version 6.0 mit SP 1), gibt es keine Transparenz, ab welcher Version ist denn eine Transparenz erkennbar oder muss man die Werte noch anpassen?

16.01.2006 Löschen

inoX

und wieso verschwindet der hintergrund bei visibility:hidden;? das macht für mich keinen sinn, zumal man ja auchnoch display:none; zur verfügung hat. das text-indent:-9999; oder rgba(0,0,0,0); halte ich zumindest für keine sinngemäße lösung. dann bau ich lieber n <span class="hide"> um den text.

07.03.2006 Löschen

Mastershrimp

Das mit den 2 Klassen hat mal eben mein Weltbild veränder ;-)
Wusste ich noch nicht. Mal schaun wann ichs brauchen kann.
Gilt das eigentlich nur für 2 Klassen, oder auch für >2?

21.10.2006 Löschen

noname

@Mastershrimp
Es geht auch bei mehreren

Von paul. Letzte Änderung am 15.08.2005