17 Apr, 2009

Scrollable div

Categoriën: box |crossbrowser |solution |Xhtml Strict

Soms heb je weinig plaats en moet je toch veel inhoud laten zien, dan komt de eigenschap overflow die je met CSS kunt bepalen goed van pas op alle block-elementen.

HTML

<div class="terms">
  <h3>titel</h3>
  <h4>subtitel</h4>
  <p>You do hereby
  <strong>acknowledge</strong>
  that</p>
<ul>
  <li>een</li>
  <li>twee</li>
  <li>drie</li>
  <li>vier</li>
  <li>vijf</li>
  <li>zes</li>
  <li>zeven</li>
  <li>acht</li>
</ul>
</div>

CSS

div.terms {
   width:600px;
   height:200px;
   border:1px solid #ccc;
   background:#f2f2f2;
   padding:6px;
   overflow:auto;
}
div.terms p,
div.terms li {font:normal 11px/15px arial;color:#333;}
div.terms h3 {font:bold 14px/19px arial;color:#000;}
div.terms h4 {font:bold 12px/17px arial;color:#000;}
div.terms strong {color:#000;}

Gerelateerde Snippets

Geen reacties op "Scrollable div"

Reactie formulier


Demo: Scrollable div:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.