 03 CSS-Formatierung Beispiel 02
Für einige Menüs habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen.
Noch was fürs Auge
Wenn sie den Menüs einen anderen 'Look' verleihen möchten, reichen dazu wenige Veränderungen im CSS-Code. So können sie die Vorlagen leicht an ihr Projekt anpassen.
Menü 03 b
Das Menü steht innnerhalb einer Tabelle. Verwendet werden CSS formatierte Textlinks. Für die Linkformatierung wurde die Unterklasse 'nav3 ' festgelegt (Breite, Höhe; Rand, Textfarbe, Textgröße, ... ). Die Formatierung des Tabellenrands und der Tabellenzelle der Überschrift wird ebenfalls mit CSS umgesetzt.
|
|
width:160px;
margin-top:3px;
padding:2px
|
HTML-Code im Body
<table cellpadding="0" border="0" cellspacing="1" width="160">
<tr>
<td style="border: 1px solid #A400A4; font-size:12px;
color:#FFFFFF" align="center" bgcolor="#FF80FF" height="25">
Menü 03 b</td>
</tr>
<tr>
<td width="100%">
<a class="nav2" href="javascript:void(0)">Greifvögel</a>
<a class="nav2" href="javascript:void(0)">Adler</a>
<a class="nav2" href="javascript:void(0)">Bussarde</a>
<a class="nav2" href="javascript:void(0)">Falken</a>
<a class="nav2" href="javascript:void(0)">Geier</a>
<a class="nav2" href="javascript:void(0)">Habichte</a>
<a class="nav2" href="javascript:void(0)">Milane</a>
<a class="nav2" href="javascript:void(0)">Sperber</a>
<a class="nav2" href="javascript:void(0)">Weihen</a>
<a class="nav2" href="javascript:void(0)">habichtartige</a>
<a class="nav2" href="javascript:void(0)">falkenartige</a>
</td>
</tr>
</table>
CSS-Anweisungen im Head
<style type="text/css">
<!--
a.menuitem{
text-decoration:none;
font-size:10px; color:#000000;
text-transform:none;
}
a.menuitem:visited{color:#000000;}
a.menuitem:hover{color:#FF0000;}
/* Menü 03 b */
a.nav2:link {
display:block;background-color:#FFDDEE;
color:#E80074;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #A400A4; margin-top:3px;padding:2px;
width:160px;height:14px;
text-align:center;vertical-align:middle;text-transform:none;
}
a.nav2:visited {
display:block;background-color:#FFDDEE;
color:#E80074;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #A400A4; margin-top:3px;padding:2px;
width:160px;height:14px;
text-align:center;vertical-align:middle;text-transform:none;
}
a.nav2:hover {
display:block;background-color:#FFA8FF;
color:#CE00CE;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #A400A4; margin-top:3px;padding:2px;
width:160px;height:14px;
text-align:center;vertical-align:middle;text-transform:none;
}
a.nav2:active {
display:block;background-color:#FF8CFF;
color:#000000;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #A400A4; margin-top:3px;padding:2px;
width:160px;height:14px;
text-align:center;vertical-align:middle;text-transform:none;
}
-->
</style>
Zur allgemeinen Erklärung zu CSS-formatierungen lesen sie mehr in der Rubrik CSS unter dem Menüpunkt 'CSS-Einführung'. Dort gibts 13 Seiten zum Thema
 CSS-Einführung
|
WWW.WEB-TOOLBOX.NET
Quelltext 03b 
ZURÜCK