topical media & game development

talk show tell print

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.