|
Menüeinbau mit CSS in einer XHTML - Seite.
Das Menü wird als Listenelemente eingegeben und per CSS gewandelt in eine wagerechte Zeile.
|
Im CSS:
.gelbmenu ul{font: bold 13px arial;padding-left: 0;margin-left: 0;height: 20px;}
.gelbmenu ul li{list-style: none;display: inline;}
.gelbmenu ul li a{padding: 2px 0.5em;text-decoration: none;float: left;color: black;background-color: #FFF2BF;border: 2px solid #FFF2BF;}
.gelbmenu ul li a:hover{background-color: #FFE271;border-style: outset;}
.gelbmenu ul li a:active{border-style: inset;}
|
Im Body
<div class="gelbmenu">
<ul>
<li><a href="index.html">Seitendesigns</a></li>
<li><a href="csstest.html">CSS Style</a></li>
<li><a href="xhtml-css-seite">XHTML - CSS Seite</a></li>
<li><a href="/">Portal Home</a></li>
</ul>
</div>
|
|
|
Im CSS:
.redmenu ul{font: bold 13px arial;padding-left: 0;margin-left: 0;height: 20px;}
.redmenu ul li{list-style: none;display: inline;}
.redmenu ul li a{padding: 2px 0.5em;text-decoration: none;float: left;color: black;background-color: #FCA1A1;border: 2px solid #FCA1A1;}
.redmenu ul li a:hover{background-color: #F94242;border-style: outset;}
.redmenu ul li a:active{border-style: inset;}
|
Im Body
<div class="rotmenu">
<ul>
<li><a href="index.html">Seitendesigns</a></li>
<li><a href="csstest.html">CSS Style</a></li>
<li><a href="xhtml-css-seite">XHTML - CSS Seite</a></li>
<li><a href="/">Portal Home</a></li>
</ul>
</div>
|
|
|
Im CSS:
.blaumenu ul{font: bold 13px arial;padding-left: 0;margin-left: 0;height: 20px;}
.blaumenu ul li{list-style: none;display: inline;}
.blaumenu ul li a{padding: 2px 0.5em;text-decoration: none;float: left;color: black;background-color: #9496F9;border: 2px solid #9496F9;}
.blaumenu ul li a:hover{background-color: #1D21F7;border-style: outset;color: #ffffff}
.blaumenu ul li a:active{border-style: inset;}
|
Im Body
<div class="blaumenu">
<ul>
<li><a href="index.html">Seitendesigns</a></li>
<li><a href="csstest.html">CSS Style</a></li>
<li><a href="xhtml-css-seite">XHTML - CSS Seite</a></li>
<li><a href="/">Portal Home</a></li>
</ul>
</div>
|
|
|
Im CSS:
.blackredmenu ul{font: bold 13px arial;padding-left: 0;margin-left: 0;height: 20px;}
.blackredmenu ul li{list-style: none;display: inline;}
.blackredmenu ul li a{padding: 2px 0.5em;text-decoration: none;float: left;color: black;background-color: #000000;border: 2px solid #000000;color: #3BFF00}
.blackredmenu ul li a:hover{background-color: #660000;border-style: outset;color: #ffffff}
.blackredmenu ul li a:active{border-style: inset;}
|
Im Body
<div class="blackredmenu">
<ul>
<li><a href="index.html">Seitendesigns</a></li>
<li><a href="csstest.html">CSS Style</a></li>
<li><a href="xhtml-css-seite">XHTML - CSS Seite</a></li>
<li><a href="/">Portal Home</a></li>
</ul>
</div>
|
|
|
| Unsre XHTML - Beispiel und Testseite.
|
| |
