Erkenntnisse und Weisheiten

Knowledgebase > Cascading Sytle Sheets

Cascading Style Sheets (CSS)

CSS-Anweisung

Auswahlbedingung { Deklaration }

Form der Deklaration: Eigenschaft: Definition;

Box Model: Ein Kasten pro HTML-Element


Alle Werte setzen: Angabe der Werte hintereinander im Uhrzeigersinn (clockwise):
oben (top), rechts (right), unten (bottom), links (left)

Nur zwei Werte angegeben: oben (top)/unten (bottom), rechts (right)/ links (left)


Alle Werte gleichsetzen: ohne Postfix top, right, bottom, left


+----------------------------------+
| Rand (margin) m m m m m m m m m m|
|m +----------------------------+ m|
|m | Rahmen (border) b b b b b b| m|
|m | +------------------------+ | m|
|m | | Polsterung (padding) p | | m|
|m | |p +------------------+ p| | m|
|m | |p | Inhalt (text) t t| p| | m|
|m | |p +------------------+ p| | m|
|m | |p p p p p p p p p p p p | | m|
|m | +------------------------+ | m|
|m | b b b b b b b b b b b b b b| m|
|m +----------------------------+ m|
|m m m m m m m m m m m m m m m m m |
+----------------------------------+

Vertikales Navigations-Menü

Bullet-Symbole entfernen:

#menue {
list-style-type: none; /* Keine Aufzaehlungszeichen (Bullets) */
}

Aussenabstand (Alle, Oben, Rechts, Unten, Links)

#menue {
...
margin: 0.5em; /* Rand (Aussenabstand) für alle Seiten gleich */
}

Innenabstand (Alle, Oben, Rechts, Unten, Links)

#menue {
...
padding-left: 0.5em; /* Polsterung (Innenabstand) linke Seite */
}

Menüeinträge als Schaltfläche

#menue a {
background-color: #DEE; /* Hintergrundfarbe dunkler */
/* 3D-Effekt -> Button */
border-right: #666 solid 1px; /* rechter Rand als duenne graue Linie */
border-bottom: #666 solid 1px; /* unterer Rand als duenne graue Linie */
}

Schaltflächen auf gleiche Länge bringen

#menue a {
...
display: block; /* Fuer alle Schaltflaechen gleiche Laenge */
}

Abstand zwischen Schaltflaechen hinzufügen

#menue a {
...
padding: 2px 8px; /* Polsterung (Innenabstand) oben/unten und rechts/links */
margin-bottom: 6px; /* Rand (Aussenabstand) unten */
}

Breite der Buttons begrenzen

/* Behaelter fuer Menue */
#menue-container {
width: 150px; /* feste Breite */
padding-bottom: 6px; /* Polsterung (Innenabstand) unten */
}

Horizontales Menue

Horizontale Anordnung der Listenpunkte

#menue li {
display: inline; /* Anzeige in einer Reihe (Textumfluss) */
padding: 2px 8px; /* Polsterung (Innenabstand) oben/unten und rechts/links */
/*
background-color: #DEE; /* Hintergrund dunkler */
*/
}

Alle Listenpunkte gleich breit machen

#menue li {
...
float: left; /* Blockelemente nebeneinander (Textumfluss) */
margin: 0px 5px; /* Aussenrand oben/unten recht/links*/
width: 100px; /* einheitliche Breite */
list-style-type: none; /* Keine Aufzaehlungszeichen (Bullets) */
}

Link auf kompletten Hintergrund ausweiten

#menue a {
display: block; /* Anzeige: Block */
width: 99%; /* Breite der Links für IE definieren */
padding: 2px 8px;
/* Polsterung (Innenabstand) oben/unten und rechts/links */
}
/* CSS-Hack: Alle Browser ausser IE setzen Breite wieder zurueck */
html>body #menu a {
width: auto;
}

Menütexte ohne Unterstreichung

#menue a {
...
text-decoration: none; /* keine Unterstreichung (Text-Auszeichnung) */
}

3D-Schalflaechen

#menue a {
...
/* 3D-Effekt -> Button */
border-right: #666 solid 1px; /* Rahmen rechts, Grau */
border-bottom: #666 solid 1px; /* Rahmen unten, Grau */
}

Separate Gestaltung für die vier möglichen Zustaende der Links

/* unberuehrte und besuchte Links */
#menue a:link,
#menue a:visited {
color: #666; /* Textfarbe: Dunkelgrau */
background-color: #ACC; /* Hintergund: Grau-Blau */
}
/* Link bei Mausberuehrung */
#menue a:hover {
color: #000; /* Textfarbe: Schwarz */
background-color: #DA7; /* Hintergund: Braun */
}
/* aktiver Link */
#menue a:active {
color: #ACC; /* Textfarbe: Grau-Blau */
background-color: #999; /* Hintergund: Mittel-Grau */
/* 3D-Effekt -> Button gedrückt*/
border-left: #000 solid 1px; /* Rahmen links, scwarz */
border-top: #000 solid 1px; /* Rahmen oben, scwarz */
border-right: none; /* Rahmen rechts ausblenden */
border-bottom: none; /* Rahmen unten ausblenden */
}

Referenzen