Fail:CSS Raamide imitatsioonid overflow a.png

overflow: visible; ning overflow: hidden;

Ekraanipilt võetud Mozilla brauserist, koos pildiga:

Piltide loomiseks kasutatud kood:

CSS:

body { font: xx-small Verdana, sans-serif }
p { 
    margin: 0.5em 0.5em; 
    text-indent: 1.5em 
}
div { 
    height: 108px; 
    border: solid 1px #336633; 
    width: 300px; 
    background: #99cc66; 
    margin: 1em 0;
}
#visible { overflow: visible }
#hidden { overflow: hidden; margin-top: 12em }
#scroll { overflow: scroll }
#auto { overflow: auto }

HTML:

<div id="visibe">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tellus arcu, 
porttitor a, commodo eu, congue in, nibh. Integer quis lectus. Vestibulum et 
ipsum. Nullam sit amet mauris. Nulla faucibus porttitor tellus. Donec 
condimentum dolor in eros. Vivamus neque mauris, sodales sit amet, imperdiet 
vitae, scelerisque ac, velit. Maecenas hendrerit tempus sapien. In porttitor, 
lacus sit amet hendrerit ornare, lorem mauris ultrices felis, eu adipiscing 
augue lorem ut nisl. Vestibulum turpis. Quisque bibendum ante quis est. 
Vestibulum aliquam molestie eros. Phasellus dignissim diam et nisl. Nulla 
facilisi. Sed sed magna. Ut dolor. Praesent tempor leo vitae risus. In hac 
habitasse platea dictumst. Aenean sed sem eu erat volutpat consectetuer. Mauris 
vel wisi venenatis purus dignissim laoreet.</p>
</div>

<div id="hidden">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tellus arcu, 
porttitor a, commodo eu, congue in, nibh. Integer quis lectus. Vestibulum et 
ipsum. Nullam sit amet mauris. Nulla faucibus porttitor tellus. Donec 
condimentum dolor in eros. Vivamus neque mauris, sodales sit amet, imperdiet 
vitae, scelerisque ac, velit. Maecenas hendrerit tempus sapien. In porttitor, 
lacus sit amet hendrerit ornare, lorem mauris ultrices felis, eu adipiscing 
augue lorem ut nisl. Vestibulum turpis. Quisque bibendum ante quis est. 
Vestibulum aliquam molestie eros. Phasellus dignissim diam et nisl. Nulla 
facilisi. Sed sed magna. Ut dolor. Praesent tempor leo vitae risus. In hac 
habitasse platea dictumst. Aenean sed sem eu erat volutpat consectetuer. Mauris 
vel wisi venenatis purus dignissim laoreet.</p>
</div>

<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tellus arcu, 
porttitor a, commodo eu, congue in, nibh. Integer quis lectus. Vestibulum et 
ipsum. Nullam sit amet mauris. Nulla faucibus porttitor tellus. Donec 
condimentum dolor in eros. Vivamus neque mauris, sodales sit amet, imperdiet 
vitae, scelerisque ac, velit. Maecenas hendrerit tempus sapien. In porttitor, 
lacus sit amet hendrerit ornare, lorem mauris ultrices felis, eu adipiscing 
augue lorem ut nisl. Vestibulum turpis. Quisque bibendum ante quis est. 
Vestibulum aliquam molestie eros. Phasellus dignissim diam et nisl. Nulla 
facilisi. Sed sed magna. Ut dolor. Praesent tempor leo vitae risus. In hac 
habitasse platea dictumst. Aenean sed sem eu erat volutpat consectetuer. Mauris 
vel wisi venenatis purus dignissim laoreet.</p>
</div>

<div id="auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tellus arcu, 
porttitor a, commodo eu, congue in, nibh. Integer quis lectus. Vestibulum et 
ipsum. Nullam sit amet mauris. Nulla faucibus porttitor tellus. Donec 
condimentum dolor in eros. Vivamus neque mauris, sodales sit amet, imperdiet 
vitae, scelerisque ac, velit. Maecenas hendrerit tempus sapien. In porttitor, 
lacus sit amet hendrerit ornare, lorem mauris ultrices felis, eu adipiscing 
augue lorem ut nisl. Vestibulum turpis. Quisque bibendum ante quis est. 
Vestibulum aliquam molestie eros. Phasellus dignissim diam et nisl. Nulla 
facilisi. Sed sed magna. Ut dolor. Praesent tempor leo vitae risus. In hac 
habitasse platea dictumst. Aenean sed sem eu erat volutpat consectetuer. Mauris 
vel wisi venenatis purus dignissim laoreet.</p>
</div>