topical media & game development
lib-flow-example-files-scrollable-minimal.css / css
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
div.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 660px;
height:90px;
/* custom decorations */
padding:10px 0;
border:1px outset #ccc;
background-color:#efefef;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a super large width to accomodate scrollable items.
it's enough that you set width and height for the root element and
not for this element.
*/
div.scrollable div.items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
/* decoration */
margin-left:10px;
}
/* single scrollable item */
div.scrollable div.items div {
float:left;
/* custom decoration */
text-align:center;
width:110px;
padding:25px 0px;
font-size:30px;
font-family: 'bitstream vera sans';
border:1px outset #ccc;
background-color: #ddd;
margin-right: 20px;
-moz-border-radius:5px;
}
/* active item */
div.scrollable div.items div.active {
border:1px inset #ccc;
background-color:#fff;
}
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.