 Menü 10-A Registerkarten 01
Variante eines horizontalen Menüs mit Registerkarten-Optik. Eine passende transparente Grafik, z.B. mit abgerundeter weißer Fläche, ist alles was sie benötigen. Hier werden Textlinks in einer Tabelle farblich hinterlegt. Über CSS-Anweisungen wird die Darstellung angepasst.
Dieses Beispiel demonstriert, wie man durch den Einsatz einer einzigen, winzigen Grafik farblich unterschiedliche Registerlaschen notieren kann. Für eine Menüleiste oder einen Iframe durchaus geeignet. Die Grafik wird für die weiße, abgerundete Ecke rechts oben benötigt.
Rechts die verwendete Grafik: 17 x 25 transparent / weiß vor einem gelben Hintergrund
dargestellt. Die Höhe von 25 Pixeln ermöglicht eine Menüleistenhöhe von max 25 Px. |
|
|
alte Technik mit Tabelle ohne CSS
Das Registerkartenmenü wird mit einer Tabellentechnik umgesetzt. Für jedes Tab benötigt man 2 Tabellenzellen. In Zelle 2, also in einer eigenen Tabellenzelle, wird eine passende transparente Grafik eingebunden.
|
|
Register 1
|
|
Register 2
|
|
Register 3
|
|
|
 Mit CSS-Techniken können sie heute dieses optische Erscheinungsbild geschickter umsetzen. Ein Beispiel in unterschiedlichen Varianten zeige ich hier auf.
neue Tabellentechnik mit CSS
Die Menüzeile der Registerkarten wird immer noch mit einer Tabellentechnik umgesetzt. Jede Registerlasche hat nur noch eine Tabellenzelle. Die Tabellenzellen können natürlich unterschiedliche Hintergrundfarben haben.
|
|
In einer Abfolge von aufgerufenen Seiten mit einem identischen Menü, könnte die aktive Auswahl durch Farbgebung des Hintergrundes gekennzeichnet werden. Beim Anklicken einer Registerlasche wird die Seite ja ausgetauscht und das im Kopf angezeigte Menü entsprechend dargestellt (siehe Beispiel unterhalb).
Wie ich die CSS-Technik umsetze
Für eine Tabellenzelle wird grundsätzlich eine Hintergrundfarbe bestimmt. Außerdem wird eine Hintergrundgrafik eingebunden, die in der oberen rechten Ecke der Zelle positioniert wird. Das alles geschieht mit einer einzigen Befehlszeile in CSS:
background:url(ecke02.gif) #CFCFCF no-repeat top right;
Weitere Anweisungen sorgen für den richtigen Innenabstand (Null), Textausrichtung, Abstand von links, Breite und Höhe der Zelle. All diese Anweisungen ordne ich einer eigenen CSS-Unterklasse zu.
margin:0px;
text-align:left;
padding-left:10px;
height:20px;
width:110px;
Durch die Definition mehrerer unterschiedlicher Klassen ist es möglich individuelle Formatierungen festzulegen. Legen sie die Breite und Farbe einzelner Tabs oder die Höhe der Leiste nach eigenen Bedürfnissen fest. Das alles ohne den Zwang, jedesmal eine neue Grafik erstellen zu müssen.
Beispiel der CSS-Anweisung und Zuordnung
.reg11 {
background:url(ecke02.gif) #A3DFA5 no-repeat top right;
margin:0px;
text-align:left;
padding-left:10px;
height:20px;
width:110px;
}
<td valign="middle" width="20%" align="center" class="reg11">
<a href="datei">Textlink</a>
</td>
Die Textlinks selbst formatieren sie in bekannter Weise z.B.:
a.nav1:link {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
color: #000000;
}
a.nav1:visited {
color: #000000;
}
a.nav1:hover {
color: #000000;
font-weight:bold;
}
Beispiel einer Anwendung
Die Tabelle der Menüleiste und Inhaltstabelle haben eine identische Breite. Die Inhaltstabelle hat eine CSS-definierte Hintergrund- und Randfarbe.
Kirschen
Kirschen sind nicht nur lecker, sondern auch gesund. Ein halber Liter Kirschsaft deckt den Vitamin-C-Bedarf eines ganzen Tages. Ein halbes Pfund Kirschen täglich kann den Harnsäurespiegel senken und vor Gicht schützen. Außerdem sollen die in den Kirschen enthaltenen Stoffe für eine schöne Haut sorgen und Entzündungen hemmen. Die Früchte werden zudem in der Naturmedizin als Mittel gegen Parodontose und Arthritis genutzt. Nach einer Studie lindert Kirschsaft auch den Schmerz und den Kraftverlust bei Muskelkater .
Der Kirschkern (der ja auf Grund der Zuordnung des Kirschbaums zur Gattung der Steinobstgewächse eigentlich Kirsch-Stein heißen müsste) ist annähernd kugelförmig und ca. 5 bis 8 mm groß. Kirschkerne enthalten einen geringen Anteil Blausäure. Zum Blindbacken werden Kirschkerne benötigt, die man statt Reis oder Bohnen benutzen kann. Im Backofen erhitzte Kirschkerne, eingeschlossen in einem Stoffbeutel, werden in der physikalischen Therapie (Wärmetherapie) eingesetzt.
(Wikipedia)
|
|
Home
Beispiel
ZURÜCK