 |
WEB DESIGN SKILLSModule Study Guide
|
Session 9
Style sheet positioning
On this page:
Using style sheets for positioning
You should already be aware that the layout produced by standard HTML is fairly simple. More interesting layout possibilities may be achieved by using tables as layout tools. This is still commonplace on many web pages. However, the 'approved' way of realising a particular layout is to use the features of style sheets to do it. This corresponds with the aim of putting layout information into the style sheet, and the content into the web pages themselves.
We have already seen how we can define a 'class' or an 'id' in a style sheet and apply certain attributes to this. Up to this point we have restricted ourselves to controlling the text attributes such as font-family, font-size and so on. But it is also possible to apply other attributes which set the position of the element on the page.
Consider the following fragment of code from a style sheet:
#peach
{
position: absolute;
height: 100px;
width: 120px;
top: 60px;
left: 20px;
}
This defines an id (#peach) as having a certain position on the page, namely 60 pixels from the top and 20 pixels in from the left. It also limits the element as being 100 pixels in height and 120 pixels in width. Any element in a web page which has this id will appear at that position on the page. So in the HTML code you might see:
<div id="peach">
<p>
This section of text will appear at the appropriate point on the page
</p>
</div>
Clearly there are some issues to be considered here. Firstly, you must make sure that you don't use the 'peach' id twice on a single page, otherwise you may get two elements trying to take up the same space. Secondly, how can you be sure that an area of 100x120 pixels (in this case) is going to be big enough for all that you want to fit into it?
Of course, you don't have to specify height, width, top and left in each case. If, for example, you missed out the 'height', the resulting area would take up the height necessary to accomodate all the text (or images, or whatever) that you put into it.
Neither do you have to specify the sizes in terms of pixels. You might want to use percentages (%), which are proportional to the available window. (Note that although you are using 'relative' measurements, the 'position' is still 'absolute'.)
(Actually, 'absolute' does not necessarily refer to the position on the page. The measurements relate to the position of the element with respect to its 'parent' element, which is often the 'body' but may be some other element further down the hierarchy such as a 'div'.)
Positional CSS in Dreamweaver code view
To use this system in your own web page(s), the first thing to do is to sit down with a piece of paper (!) and draw out where all the elements of your page are going to be. Decide what the proportions are, and whether you want to specify your dimensions in pixels or percentages.
Then invent names for each of the areas on the page, and work out what the numbers are going to be. Each area will need a 'top' and a 'left' at the very least, and also possibly a 'width' and 'height'. If you have decided to work in pixels (a good idea if you have a number of images, as these will not scale if the user decides to shrink the window), then decide on a pixel width for the page. (800 would be fine, but you might decide that 1024 would be better.) Your diagram might look like this:
Assuming that the content of the page begins in the top left-hand corner, the positional definitions for the various sections here would be:
.banner
{
position: absolute;
height: 100px;
top: 0px;
left: 0px;
width: 800px;
}
.col1
{
position: absolute;
height: 700px;
left: 0px;
width: 160px;
top: 100px;
}
.col2
{
position: absolute;
height: 700px;
width: 160px;
top: 100px;
left: 160px;
}
/* (similarly for .col3 to .col5) */
.adv1
{
position: absolute;
height: 160px;
width: 320px;
top: 640px;
left: 480px;
}
('Classes' have been used here but 'ids' will work just as well.)
Link: See a dummy page laid out like this.
Note that borders, margins and padding will add on to the height and/or width of the elements, so allow for this when converting your diagram into code. Also, every section will need some content for it to appear on the page, so when testing add some dummy content to make it visible.
Other types of positioning
Apart from 'absolute', the other types of positioning available include 'relative' and 'fixed'. These work as follows:
relative: elements defined as 'relative' are positioned "relative to where they would be if the positioning were not present", which is complicated but essentially means that you can position an element relative to other elements on the page.
fixed: elements which are 'fixed' occupy a fixed position on the screen, i.e. they do not move up and down when the user scrolls. (See the 'top' link on this page.)
More information
To find out more about CSS and how it works, see http://www.westciv.com/style_master/hands_on_tutorial_sm/index.html
Warning: Although the use of CSS for positioning is widely held to be the way forward by all web design gurus, the implementation in various browsers is especially dodgy in this area. You should test your code on several browsers, not just Internet Explorer.
Exercises
- Draw up a paper layout diagram similar to the one shown, but using your own preferred areas.
- Convert this into CSS code and make a style sheet which implements this.
- Create a page which will use this layout and incorporate some suitable content.
- Make a second page with different content but using the same style sheet.
- Experiment with 'relative' and 'fixed' positioning.
