michaelsinterface.de

list.showcases

  • In dieser horizontal ausgerichteten Aufzählungsliste <ul> fungieren ihre Listenpunkte <li> als "Schaukästen" (engl. showcases), in denen besondere Informationen hervorgehoben werden können.

    Selbstverständlich lässt sich das Listenelement auf dem konventionellen Wege im Textfluß vertikal ausrichten, um es in einer Seitenspalte einzubetten. Die CSS-Eigenschaftsangaben float:left und display:inline entfielen in diesem Fall für das <li>-Element.

  • Showcase 1

    In diesem Schaukasten können Sie beispielsweise Hinweise oder wichtige Infos für den Seitenbesucher platzieren.

  • Showcase 2

    Sie möchten Ihren Gästen bzw. Kunden einen bevorstehenden Event ankündigen? Dann immer herein damit!

  • Showcase 3

    Solch ein Schaukasten eignet sich auch hervorragend, um darin aktuelle Nachrichten einzublenden.

Quellcode  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: list.showcases :::</title>

<style type="text/css">
<!--
div.demoWrapBox {
width:600px;
margin:50px auto;
}
div.demoWrapBox ul.showcase {
width:100%;
min-height:9em;
text-align:center;
list-style-type:none;
margin:0;
padding:0;
}
div.demoWrapBox ul.showcase li {
margin:0 1.5%;
border:1px solid #cfcfcf;
width:30%;
height:auto;
background:#fcfcfc;
float:left;
display:inline;
}
div.demoWrapBox ul.showcase h3 {
margin:0;
display:block;
padding:2px 3px;
background:#cfcfcf;
}
div.demoWrapBox ul.showcase p {
font-size:0.9em;
padding:0;
margin:10px;
}
-->
</style>

</head>
<body>

<div class="demoWrapBox">
 <ul class="showcase">
     <li>
         <h3>Showcase 1</h3>
         <p>Inhalt in Schaukasten 1.</p>
     </li>
     <li>
         <h3>Showcase 2</h3>
         <p>Inhalt in Schaukasten 2.</p>
     </li>
     <li>
         <h3>Showcase 3</h3>
         <p>Inhalt in Schaukasten 3.</p>
     </li>
 </ul>
</div>

</body>
</html>