 03 CSS-Formatierung Beispiel 01
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 a
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:180px;
margin-top:3px;
padding:2px
|
HTML-Code im Body
<table cellpadding="0" border="0" cellspacing="1" width="180">
<tr>
<td style="border: 1px solid #000000; font-size:12px;color:#FFFFFF"
align="center" bgcolor="#8080FF" height="25">
Menü 03 a</td>
</tr>
<tr><td width="100%">
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</a>
<a class="nav3" href="#">Textlink CSS formatiert</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 a */
a.nav3:link {
display:block;background-color:#EAF4FF;
color:#0060FF;font-family:Verdana,Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #8080FF; margin-top:3px;padding:2px;text-transform:none;
width:180px;height:14px;text-align:center;vertical-align:middle;
}
a.nav3:visited {
display:block;background-color:#EAF4FF;
color:#0060FF;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #8080FF; margin-top:3px;padding:2px;text-transform:none;
width:180px;height:14px;text-align:center;vertical-align:middle;
}
a.nav3:hover {
display:block;background-color:#6C6CFF;
color:#FFFFFF;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #8080FF; margin-top:3px;padding:2px;text-transform:none;
width:180px;height:14px;text-align:center;vertical-align:middle;
}
a.nav3:active {
display:block;background-color:#EAF4FF;
color:#000000;font-family:Verdana, Helvetia,sans-serif;
font-size:11px;text-decoration:none;
border: 1px solid #8080FF; margin-top:3px;padding:2px;text-transform:none;
width:180px;height:14px;text-align:center;vertical-align:middle;
}
-->
</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 03a 
ZURÜCK