Viele Möglichkeiten zur Listenformatierung zeigt Max Design. Wenn Dein Interesse geweckt wurde, findest Du dort viele Ideen.
Gruß hpvw
Gruß hpvw
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
div#Navi {
float: left;
width: 15em;
}
div#Navi div.Top { /* 10 x 33 Pixel */
background: url(bg/navi-top-bg.jpg) repeat-x;
height: 33px;
}
div#Navi div.Top div.TopLeft { /* 22 x 33 Pixel */
float: left;
background: url(bg/navi-top-left.jpg) no-repeat;
width: 22px; height: 33px;
}
div#Navi div.Top div.TopRight { /* 83 x 33 Pixel */
float: right;
background: url(bg/navi-top-right.jpg) no-repeat;
width: 83px; height: 33px;
}
div#Navi div.Center div.CenterLeft { /* 12 x 30 Pixel */
float: left;
background: url(bg/navi-left.jpg) repeat-y;
width: 12px; height: 180px; /* height = Anzahl Links * 30px */
}
div#Navi div.Center ul { /* 10 x 30 Pixel */
background: url(bg/navi-bg.jpg);
}
div#Navi div.Center ul li {
height: 30px;
}
div#Navi div.Center div.CenterRight { /* 13 x 30 Pixel */
float: right;
background: url(bg/navi-right.jpg) repeat-y;
width: 13px; height: 180px; /* height = Anzahl Links * 30px */
}
div#Navi div.Bottom { /* 9 x 23 Pixel */
background: url(bg/navi-bottom-bg.jpg) repeat-x;
height: 23px;
margin-top: -3px;
}
div#Navi div.Bottom div.BottomLeft { /* 12 x 23 Pixel */
float: left;
background: url(bg/navi-bottom-left.jpg) no-repeat;
width: 12px; height: 23px;
}
div#Navi div.Bottom div.BottomRight { /* 83 x 23 Pixel */
float: right;
background: url(bg/navi-bottom-right.jpg) no-repeat;
width: 83px; height: 23px;
}
<div id="navi">
<h2>Navigation:</h2>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<ul>
<li>Startseite</li>
<li><a href="#">Platzhalter für einen Link</a></li>
<li><a href="#">Platzhalter für einen Link</a></li>
<li><a href="#">Platzhalter für einen Link</a></li>
<li><a href="#">Platzhalter für einen Link</a></li>
<li><a href="#">Platzhalter für einen Link</a></li>
</ul>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
div#navi {
position: relative;
width: 250px; /* statt 15em */
height: auto;
background: transparent url(bg/navi-bg.jpg) repeat scroll 0px 3px;
} /* Mit den background-position-Werten so lange rumspielen bis das Karomuster stimmt! */
div#navi h2 {
display: none; /* H2-Überschrift ausblenden */
}
div#navi ul {
list-style-type: none;
background: transparent url(bg/navi-left.jpg) repeat-y scroll top left;
}
div#navi li {
height: 30px;
padding-left: 20px; /* Abstand zw. Schrift und li. Containerrand */
line-height: 30px;
background: transparent url(bg/navi-right.jpg) no-repeat scroll top right;
}
div#navi .top {
position: relative;
width: 100%;
height: 33px;
background: transparent url(bg/navi-top-bg.jpg) repeat-x scroll left;
}
div#navi .top .left {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 33px;
background: transparent url(bg/navi-top-left.jpg) no-repeat scroll left;
}
div#navi .top .right {
position: absolute;
top: 0;
right: 0;
width: 83px;
height: 33px;
background: transparent url(bg/navi-top-right.jpg) no-repeat scroll right;
}
div#navi .bottom {
position: relative;
width: 100%;
height: 23px;
background: transparent url(bg/navi-bottom-bg.jpg) repeat-x scroll left;
}
div#navi .bottom .left {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 23px;
background: transparent url(bg/navi-bottom-left.jpg) no-repeat scroll left;
}
div#navi .bottom .right {
position: absolute;
top: 0;
right: 0;
width: 83px;
height: 23px;
background: transparent url(bg/navi-bottom-right.jpg) no-repeat scroll right;
}