~~SLIDESHOW~~
Olde Case-study 1: Last given on Tuesday 15th February, 2011.
Lecturer: Dr Chris P. Jobling.
In this case study we shall demonstrate the positioning features of CSS by theming a WordPress blog. We will no longer be doing this exercise, instead I have made it and some additional tutorials and resources for WordPress theming available as an optional case study.
At the end of this case-study you should be able to answer these questions:
position
property.Web Application “Theming” (or “Skinning”) and DHTML relies on element positioning features of CSS 2.
position
, left
, and top
position
are absolute
, relative
, and static
<!DOCTYPE html> <!-- absPos.html Illustrates absolute positioning of elements --> <html lang="en"> <head> <meta chaset="utf-8" /> <title> Absolute positioning </title> <style> /* A style for a paragraph of text */ .regtext { font-family: Times; font-size: 14pt; width: 600px } /* A style for the text to be absolutely positioned */ .abstext { position: absolute; top: 25px; left: 50px; font-family: Times; font-size: 24pt; font-style: italic; letter-spacing: 1em; color: rgb(102,102,102); width: 500px } </style> </head> <body> <p class = "regtext"> Apple is the common name for any tree of the genus Malus, of the family Rosaceae. Apple trees grow in any of the temperate areas of the world. Some apple blossoms are white, but most have stripes or tints of rose. Some apple blossoms are bright red. Apples have a firm and fleshy structure that grows from the blossom. The colors of apples range from green to very dark red. The wood of apple trees is fine-grained and hard. It is, therefore, good for furniture construction. Apple trees have been grown for many centuries. They are propagated by grafting because they do not reproduce themselves. </p> <p class = "abstext"> APPLES ARE GOOD FOR YOU </p> </body> </html>
<p style = "position: relative;
left: 5px; top: 10px;">
top
and left
properties are specified, the element is placed exactly where it would have been placed if no position property were giventop
and left
properties are given, they are offsets from where it would have placed without the position property being specified<!DOCTYPE html> <!-- relPos.html Illustrates relative positioning of elements --> <html lang="en"> <head> <meta charset="utf-8" /> <title> Relative positioning </title> </head> <body style = "font-family: Times; font-size: 24pt;"> <p> Apples are <span style = "position: relative; top: 10px; font-family: Times; font-size: 48pt; font-style: italic; color: red;"> GOOD </span> for you. </p> </body> </html>
Case-study is by John Godley, WordPress Theme Guide, Urban Giraffe.com published on Apr 22, 2005
I have prepared a cheat sheet for myself which summarizes the design steps.
At the end of this case-study you should be able to answer these questions: