Hilfe

SiteMap - Alle 27 CSS Bausteine anzeigen

• Wasserzeicheneffekt - Hintergrundbild fixieren [IE|M|O|G]

So bleibt Ihr Logo wie ein Wasserzeichen immer an der selben Stelle im Hintergrund:


<style type="text/css">
/* Wasserzeicheneffekt - Hintergrundbild fixieren */

body {
 background-image: url(bild.jpg);   /* Adresse des Hintergrundbildes */
 background-attachment: fixed;    /* Hintergrundbild fixieren */
 background-position: center;       /* Hintergrundbild Position */
 background-repeat: no-repeat;   /* Hintergrundbild ohne Wiederholung */
}
</style>

• Hintergrundbild absolut positionieren [IE|M|O|G]

Hiermit können Sie ein Hintergrundbild absolut auf Ihrer Webseite positionieren.


<style type="text/css">
body {
 background-image: url(bild.jpg);   /* Adresse des Hintergrundbildes */
 background-repeat: no-repeat;   /* Hintergrundbild ohne Wiederholung */
 background-position: 30pt  75pt;
 /* Erste Zahl Position von Links.  Zweite Zahl Position von oben */
}
</style>

• Zeilenumbruch bei Links verhindern [IE|M|O|G]

<a href="privat.htm" style="white-space: Nowrap;">Meine privaten Seiten</a>

• Link farbig unterstreichen [IE|M|O|G]

Mithilfe von CSS, können Hyperlinks zweifarbig dargestellt werden.
Viele weitere Beispiele wie Sie Hyperlinks, mit Hilfe von CSS ver-
ändern können finden Sie unter:

CSS Hyperlinks


<style type="text/css">
/* Link farbig unterstreichen */

.test {
 border-bottom: solid 1px #0000FF;
}
a.demo {
 color: #FF0000;
 text-decoration: None;
}
</style>

<a href="#" class="demo test">DEMOLINK</a>

Beispiel: DEMOLINK

• Texteingabe nur in Großbuchstaben zulassen[IE|M|O|G]

Großbuchstaben: <input type="text" style="text-transform: uppercase;">

Kleinbuchstaben: <input type="text" style="text-transform: lowercase;">

Beispiel:
Großbuchstaben:
Kleinbuchstaben:

• Seitenrand der Webseite ändern[IE|M|O|G]

Dieser CSS-Code erzeugt einen Seitenrand von 15 Pixel.


<style type="text/css">
/* Seitenrand der Webseite ändern */

body {
 margin: 15px;
 padding: 0px;  /* Zusätzlich für Opera */
}
</style>

• CSS kürzen (Effizientes CSS)[IE|M|O|G]

CSS bietet uns die Möglichkeit, bestimmte Anweisungen zusammenzufassen und sie auch
verkürzt niederzuschreiben. Das macht die Datei um einiges kleiner und übersichtlicher.

Um einen Rahmen um ein Objekt zu zeichen, schreiben Sie anstelle von:


<style type="text/css">
div {
 border-color: #000000;
 border-width: 1px;
 border-style: solid;
}
</style>

Die folgende Anweisung ist kürzer und hat den gleichen Effekt.


<style type="text/css">
div {
 border: solid 1px #000000;
}
</style>

Weitere Beispiele

Rahmen:


<style type="text/css">
div {
 border-top-width: 12px;
 border-right-width: 7px;
 border-bottom-width: 9px;
 border-left-width: 5px;
}
</style>

<style type="text/css">
div {
 border: 5px 12x 7px 9px;
}
</style>

Reihenfolge des Rahmens im Uhrzeigersinn:
    border: 5px 12x 7px 9px;
 =  border: top right bottom left;

Hintergrund:


<style type="text/css">
div {
 background-image: url(bild.gif);
 background-repeat: no-repeat;
 background-position: left bottom;
}
</style>

<style type="text/css">
div {
 background: url(bild.gif) no-repeat left bottom;
}
</style>

Ein weiteres Beispiel für den Hintergrund:


<style type="text/css">
body {
 background-color: #dddddd;
 background-image: url(bild.png);
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: top left;
 color: #000000;
}
</style>

<style type="text/css">
body {
 background: #ddd url(bild.png) fixed no-repeat top left;
 color: #000;
}
</style>

Margin und Padding:


<style type="text/css">
div {
 padding-top: 11px;
 padding-right: 16px;
 padding-bottom: 12px;
 padding-left: 19px;
}
</style>

<style type="text/css">
div {
 padding: 19px 11px 16px 12px;
}
</style>

Reihenfolge von Padding im Uhrzeigersinn
    padding: 19px 11px 16px 12px;
 =  padding: top right bottom left;

• Bildergröße über em autom. an der Textgröße anpassen[IE|M|O|G]

1em entspricht ca. 100%

<img src="logo.png" style="width: 3.9em; height: 1.2em;">

• Kommentare bei CSS-Anweisungen[IE|M|O|G]

Auch bei CSS ist es wichtig die Anweisung zu kommentieren,
zum Beispiel wenn die Anweisung nur für einen bestimmten Browser gilt.


<style type="text/css">
.rundung {
 -moz-border-radius: 20px; /* Nur für den Firefox */
}
</style>

• Abstand von Text (oder Bilder) nebeneinander verändern[IE|M|O|G]

<div>Beispiel 1 <div style="display: inline; position: absolute; left: 200px;">
 hier! </div> </div>

<div>Beispiel 2 <div style="display: inline; position: relative; left: 200px;">
 hier! </div> </div>

<label style="display: inline-block; width: 200px;">Beispiel 3</label> 
hier!<br>

Beispiel 1

hier!

Beispiel 2

hier!

Beispiel 3 hier!

• Uhrzeitanzeige mal anders![IE|M|O|G]

22<span style="vertical-align: super; font-size: 75%; text-decoration: underline;">
07</span> 
Uhr

Beispiel: 2207 Uhr

• Button mit Hintergrundbild[IE|M|O|G]


<style type="text/css">
.button {
 background: transparent;
 background-image: url(ok.gif);
 background-repeat: no-repeat;
 background-position: center left;
 border: solid 1px #000000;
}
</style>

<input type="submit" value="   Anmeldung" class="button">

ok.gif
14 x 9 Pixel
110 Byte

Beispiel:

• Textfeld mit variabler Breite[IE|M|O|G]

Dieses Textfeld ändert die Größe je nach Breite des Browserfensters.

<textarea style="width: 75%;" rows="5"></textarea>

[1] CSS Bausteine 2