Home Accessibility Courses Diary The Mouth Forum Resources Site Map About Us Contact
 
Python and Tcl - public course schedule [here]
Private courses on your site - see [here]
Please ask about maintenance training for Perl, PHP, Lua, etc
 
Cascading Style Sheets - laying out your page

Now that you're controlling text display, how can you further control page layout? The usage of floating objects and positioning makes a document more dynamic, enabling text to flow around another element or completely repositioning an element.

All of the XHTML elements are contained within a box, a box with margins, padding, and a border though sometimes not obviously apparent. CSS can be used to alter the properties of the box.

(insert image of a box model)

The illustration shows the components of an element's box, the amount of space it occupies. The background extends to the outer edge of the border, only margins (positive and negative), height and width may be set to "auto", and padding and borders default to 0. The containing box defines an element's display and manipulation of these properties will enhance your control over your document.

MARGINS

Margin properties that can be specified are the "top", "left","right" or "bottom".

body {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}

Shorthand can also be used. The above example abbreviated to:

body { margin: 5px; }

For setting all margins in shorthand, the four values of top, right, bottom and left are given in order of clockwise from the top:

body { margin: 10px 5px 10px 5px; }

This sets the top and bottom margins to 10 pixels with the left and right margins at 5 pixels.

If opposite paired margins are set to "auto", they are set to equal lengths and centered within the parent.

Padding
Padding is the space between the element box edge and the margin. This is set in the same manner as the margins, "top", "right", "bottom" and "left", using the same shorthand principles. Using negative value lengths is not valid.

img { padding: 4px; }

BORDERS

Borders are placed on the outer edge of the padding, with the element's background properties extending to the outside edge of the border. In these cases, the "dashed" or "dotted" border will show some of the element's background in its gaps. The shorthand version follows:

border: dotted 2px #000;

This will display a dotted border around an element and its padding, with a border width of 2 pixels, in black. To specify specific sides of an element's border for full border display control:

border-top: solid 2px #000;
border-bottom: solid 4px #000;

Further border styles are "hidden", "none", "dashed", "double" and "inset".

FLOATING OBJECTS

Floating objects rest against a margin. This is useful in using images and divs that align to one side and allowing the text or other elements to flow or wrap at the other side of the image carrying on to the bottom of the image and then back to the margin when the bottom of the image has been passed. Normally the text would start at the bottom of the image line, due to its inline nature. Floats ignore the normal flow. The float property can be set to "left", "right" or "none".

<html>
<head>
<style type="text/css">
img.left { float:left; }
</style>
<body>
   <p><img src="illustration.gif" class="left" />Donec vitae erat. Ut metus. Quisque quis diam. Cras justo mauris, placerat ac, faucibus ut, ultrices non, urna. Proin tristique ultricies erat. Morbi convallis nibh a dolor. Fusce quis justo. Mauris dignissim magna ac erat. Integer metus nisl, cursus at, posuere vitae, consequat nec, elit. Nulla facilisi.</p>
</body>
</html>

When you don't want text to float around an element, you need to set its "clear" property. This will make sure that the element is clear of a floated element. The values of the clear property can be set to "none", "left", "right" or "both". Adding the following to the above example would cause headings to start a new cleared line.

h1, h2, h3, h4, h5, h6 { clear: both; }

POSITIONING

There are four positioning methods, with keyword values of "static", "relative", "absolute" and "fixed". There is no inheritance by default so using "inherit" is another useful value. Then the offset value is specified with relational keywords, such as "left" or "top". The width and height of these element blocks can also be specified. It is important to remember that the properties of "min-width" and "max-height" are not available for some browsers such as IE6 and lower, however javascript can be used to achieve the same results.

 * Static positioning is the default document flow method if none other is specified.
 *Relative positioning moves the element from it's default position by a relative measurement.

p.pushright {
position: relative;
left; 25px;
}

This will move the p element 25 pixels further from the left than where it would have been normally placed.
You can use relative positioning in controlling layers with either positive or negative values. If no background colour for the overlapping element is defined, it will be transparent allowing the underlying layer to show.

 * Absolute positioning uses absolute measures for positioning in relation to the user agent view and removes them from the normal flow of the document as though they weren't present and making the element a top layer in display. The value specifies the initial positioning of the element when the document is loaded, when the user scrolls the element will move as well. This can be used to move an element's display from where it normally flows in the code, such as from the bottom of the code to the top of the display. This is often used as a tool for search engine optimisation of documents.

h1.absolute {
position: absolute;
top: 10px; left: 25 px; }

 * Fixed positioning is similar to absolute positioning, except in that scrolling does not affect the display, it stays fixed to its position in the view window when the user scrolls, with other non-fixed elements scrolling upward behind it.

ol.menu {
position: fixed;
top: 0px; left: 0px;
}

This will place the ol element in the upper left corner of the window where it will stay even if the page is scrolled.

OVERFLOW

Overflow is the property of content that may be larger than its containing element. You can control the display of content that doesn't fit the container with the values of "visible", "hidden", "scroll" or "auto".

div#sidebar {
position:absolute;
top: 0; left: 0;
width: 15%;
height: 10em;
overflow: scroll;
}

This will cause the overflowed content to be hidden with scrollbars available to view.

VISIBILITY

You can also control the visibility of an element. This is quite useful for elements that you would want to hide from specific media, such as a printer, or a handheld.

img.noprint {
visibility: hidden;
}

By including the above in your printer styles, any images of the class "noprint" will not be displayed or printed in the document output.

But what about all those overlapping layers?

To control the stacking order of the layers, a property of z-index is available. The z-axis runs from front to back. It's values can be a number, "auto" or "inherit". An element with a higher number will be closer to the front of the stack. Positive and negative numbers can be used.

p.first {
z-index: 1000;
}


See also Web Site techniques

Please note that articles in this section of our web site were current and correct to the best of our ability when published, but by the nature of our business may go out of date quite quickly. The quoting of a price, contract term or any other information in this area of our website is NOT an offer to supply now on those terms - please check back via our main web site

Related Material

Web and Intranet - Page layout with cascading style sheets
  [1017] css - handling white space and pre - (2007-01-01)
  [1016] Modernising from tables to cascading style sheets - (2006-12-31)
  [994] Training on Cascading Style Sheets - (2006-12-17)

Web and Intranet - Introduction to Cascading Style Sheets
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1016] Modernising from tables to cascading style sheets - (2006-12-31)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)
  [993] Positioning with Cascading Style Sheets - (2006-12-16)

Web and Intranet - Elements of cascading style sheets
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [1998] Text on a background image - (2009-01-16)
  [1831] Text formating for HTML, with PHP - (2008-10-11)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1019] span and div tags - a css comparison - (2007-01-02)
  [1017] css - handling white space and pre - (2007-01-01)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)

Web and Intranet - Cascading style sheets - putting it all together
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [2223] CSS Style Diagrams - working out where attributes come from - (2009-06-08)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [996] Setting your colour theme through PHP - (2006-12-17)
  [994] Training on Cascading Style Sheets - (2006-12-17)
  [565] Using PHP to output images, XML, Style sheets, etc - (2006-01-15)
  [501] .css - using PHP to make dynamic style sheets - (2005-11-21)

resource index - Deployment
Solutions centre home page

You'll find shorter technical items at The Horse's Mouth and delegate's questions answered at the Opentalk forum.

At Well House Consultants, we provide training courses on subjects such as Ruby, Lua, Perl, Python, Linux, C, C++, Tcl/Tk, Tomcat, PHP and MySQL. We're asked (and answer) many questions, and answers to those which are of general interest are published in this area of our site.

You can Add a comment or ranking to this page

© WELL HOUSE CONSULTANTS LTD., 2019: Well House Manor • 48 Spa Road • Melksham, Wiltshire • United Kingdom • SN12 7NY
PH: 01225 708225 • FAX: 01225 793803 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho

PAGE: http://www.wellho.net/solutions/general- ... -page.html • PAGE BUILT: Wed Mar 28 07:47:11 2012 • BUILD SYSTEM: wizard