Heute werden Navigationsmenüs in (X)HTML-Dokumenten mit Listen und CSS erstellt. Das Tutorial gibt einen Überblick über die Methoden zum Erstellen und Formatieren vertikaler Menüs und erklärt, wie man diese schnell in horizontale Menüs umwandelt.
Tipps: Werbeflächen
An
<style type="text/css">
/* Start bambam77.de headermenue code CSS 001*/body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
text-align: center;
margin-right: 0px;
margin-left: 0px;
background-color: #999999;
}
#headermenue {
font-size: 80%;
background-color: #00c;
width: 758px;
padding: 5px 0;
border: 1px solid #fff;
margin: 0 auto;}
#headermenue ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#headermenue li {
display: inline;
margin: 0px;
padding: 0px;
}#headermenue li a, #headermenue li a:link {
text-decoration: none;
padding: 0 5px;
color: #fff;
}
#headermenue li a:visited {
color: #0c0;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
color: #ff3;}
</style>
<!-- End bambam77.de headermenue code css--><!-- Start bambam77.de headermenue code html -->
<div id="headermenue">
<ul>
<li><a
href="#">Hyperlink 1</a></li><li><a
href="#">Hyperlink 2</a></li><li><a
href="#">Hyperlink 3</a></li><li><a
href="#">Hyperlink 4</a></li><li><a
href="#">Hyperlink 5</a></li><li><a
href="#">Hyperlink 6</a></li><li><a
href="#">Hyperlink 7</a></li><li><a
href="#">Hyperlink 8</a></li>
</ul>
</div>
<!-- End bambam77.de headermenue code html-->