michaelsinterface.de

horizontal.scrollBox

  • Eine CSS-Box, deren Inhalt horizontal scrollfähig ist.

    Über die Vorschaubilder kann in der Scroll-Box navigiert werden.
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>::: horizontal.scrollBox :::</title>

<style type="text/css">
<!--
/* .demoWrapBox */
div.demoWrapBox {
width:600px;
margin:30px auto;
}
div.demoWrapBox * {
margin:0;
padding:0;
}


/* .scrollBox */
div.scrollBox {
position:relative;
height:300px;
width:100%;
border:1px solid #b5bfca;
overflow:hidden;
overflow-x:scroll;
white-space:nowrap;
}
div.scrollBox ul {
position:absolute;
top:15px;
list-style:none;
white-space:nowrap;
}
div.scrollBox ul li {
display:inline;
}
div.scrollBox ul li img#first {
margin-left:15px;
margin-right:15px;
}
div.scrollBox ul li img {
margin-right:15px;
}


/* .scrollBox-nav */
ul.scrollBox-nav {
list-style:none;
margin-top:25px;
padding-top:15px;
border-top:1px solid #b5bfca;
}
ul.scrollBox-nav li {
float:left;
margin:0 16px;
}
ul.scrollBox-nav li a img {
border:0;
}


/* .clearfix */
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div class="demoWrapBox">
 <div class="scrollBox">
      <ul>
          <li><a name="pic01"><img id="first" src="img/pic01.jpg" alt="" /></a></li>
          <li><a name="pic02"><img src="img/pic02.jpg" alt="" /></a></li>
          <li><a name="pic03"><img src="img/pic03.jpg" alt="" /></a></li>
          <li><a name="pic04"><img src="img/pic04.jpg" alt="" /></a></li>
          <li><a name="pic05"><img src="img/pic05.jpg" alt="" /></a></li>
          <li><a name="pic06"><img src="img/pic06.jpg" alt="" /></a></li>
          <li><a name="pic07"><img src="img/pic07.jpg" alt="" /></a></li>
      </ul>
 </div><!-- end DIV#scrollBox -->
 <ul class="scrollBox-nav clearfix">
     <li><a href="#pic01"><img src="img/pic01_th.jpg" alt="" /></a></li>
     <li><a href="#pic02"><img src="img/pic02_th.jpg" alt="" /></a></li>
     <li><a href="#pic03"><img src="img/pic03_th.jpg" alt="" /></a></li>
     <li><a href="#pic04"><img src="img/pic04_th.jpg" alt="" /></a></li>
     <li><a href="#pic05"><img src="img/pic05_th.jpg" alt="" /></a></li>
     <li><a href="#pic06"><img src="img/pic06_th.jpg" alt="" /></a></li>
     <li><a href="#pic07"><img src="img/pic07_th.jpg" alt="" /></a></li>
 </ul><!-- end UL#scrollBox-nav -->
</div><!-- end DIV.demoWrapBox -->

</body>
</html>