CSS:

* {
margin: 0;
padding: 0;
}

body {
font-family: arial,sans-serif;
font-size: 100.01%;
}

p {
margin: 10px 0;
}

ul {
margin: 0px auto;
width: 720px;
}

#cssmenu li {
list-style-type: none;
float: left;
}

#cssmenu a{
width: 120px;
color : black;
background-color: #FFF5E6;
text-align: center;
text-decoration: none;
border-top: 3px solid red;
border-bottom: 3px solid black;
padding: 2px 0;
display: block;
}

#cssmenu a:hover {
border-top: 3px solid black;
border-bottom: 3px solid red;
background: #FFCC80;
}

#content {
width: 656px;
margin: 30px auto;
padding: 15px 30px;
border: 10px solid #8B4500;
background-color: #FFF5E6;
}

HTML - ohne Clear:

<body>

<ul id="cssmenu">
<li><a href="#">Testlink 1</a></li>
<li><a href="#">Testlink 2</a></li>
<li><a href="#">Testlink 3</a></li>
<li><a href="#">Testlink 4</a></li>
<li><a href="#">Testlink 5</a></li>
<li><a href="#">Testlink 6</a></li>
</ul>

<div id="content">

Content-Inhalt

</div>

</body>

HTML - mit Clear:

<body>

<ul id="cssmenu">
<li><a href="#">Testlink 1</a></li>
<li><a href="#">Testlink 2</a></li>
<li><a href="#">Testlink 3</a></li>
<li><a href="#">Testlink 4</a></li>
<li><a href="#">Testlink 5</a></li>
<li><a href="#">Testlink 6</a></li>
</ul>

<div style="clear: both;"></div>

<div id="content">

Content-Inhalt

</div>

</body>

zurück zur Anleitung
zur Startseite

Homepage Zähler