Home arrow Style Sheets arrow Page 5 - CSS: Dimensions
STYLE SHEETS

CSS: Dimensions


So far in this series we have covered the basic syntax of CSS, how to work with backgrounds, text, fonts, borders, outlines, margins, cell padding, lists, and tables. Starting in this tutorial we will cover some of the more advanced CSS techniques, beginning with using the various dimension properties. There are quite a few, and hopefully we will cover all of them in this article.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
April 07, 2008
TABLE OF CONTENTS:
  1. · CSS: Dimensions
  2. · Setting the Width with Pixels
  3. · Setting the Maximum Height and Minimum Height
  4. · Setting the Space Between Lines
  5. · Scrollbars in CSS

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
CSS: Dimensions - Scrollbars in CSS
(Page 5 of 5 )

Since there is a little bit of space available and we have finished our discussion of dimensions in CSS, I figured I would throw in a brief example of working with scrollbars. Try the following example:


<html>

<head>

</head>

<body>

<style type="text/css">

.scroll{

display:block;

border: 1px solid blue;

padding:5px;

margin-top:5px;

width:200px;

height:100px;

overflow:scroll;

}

.auto{

display:block;

border: 2px solid red;

padding:5px;

margin-top:5px;

width:300px;

height:150px;

overflow:auto;

}

</style>

<p>This is a scroll:</p>

<div class="scroll">

My favorite cereals are: Apple Jacks, Cheerios, Fruit Loops, Pops, Cookie Crisp, and Peanut Butter Captain Crunch even though it cuts up the roof of my mouth. It is worth it though.

</div>

<br />

<p>With an auto value:</p>

<div class="auto">

My least favorite cereals are anything healthy. I mean, who needs that. It's all about the sugar. In fact, I have never tried a cereal that was really healthy for you, and if I did, I added so much sugar to it that it wasn't even funny. </div>

</body>

</html>

Well that's all the time we have for now. I will cover how scrollbars work in our next exciting episode, so stick around.

Till then...


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 3 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials