Book Title: Cascading Style Sheets: Separating Content from Presentation
Authors: Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson with contributions from Dave Shea, John Simons, Michael Switzer, Dan Rubin, Michael Pick, Cornelia Lange
Year written/published: 2004
My Comments: This is not my first book on CSS, hence I zoomed into chapters 5,6,8-12. Especially the chapter on Boxes!
Contents page:
- Foundation Concepts
- Overview of Presentation
- Markup with Meaning
- Fundamentals
- Rules
- Attaching CSS to your Markup
- Typography
- Boxes, Boxes, Boxes
- Styling Tables with CSS
- Cross-Browser CSS
- Troubleshooting
- CSS Design Projects
Some extracts:
default positions of division boxes…
<body>
<div class=”wee”>1</div>
<div class=”wee”>2</div>
<div class=”wee”>3</div>
<div class=”wee”>4</div>
</body>.wee{
padding:10px;
margin: 5px;
border: 1px solid #000;
}
relative positioning
The offset value is inserted where declared by the property. Hence, top:25px means that 25 pixels are inserted above the <div> to push it down from the static position and right: 25px pushes the <div? 25 pixels to the left.
<body>
<div class=”different”>1</div>
<div class=”wee”>2</div>
<div class=”wee”>3</div>
<div class=”wee”>4</div>
</body>.different{
position: relative;
top: 25px;
right: 25px;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width:20%;
}
Absolute Positioning…
Absolute positioning completely removes the <div> from the document flow. It’s positioned in relation to its containing lock, and other elements act as if it isn’t there.
position: absolute;
Fixed Positioning…
Fixed position is asolute position with a difference: The containing block is now the viewpoint, not the <html>. This means that as you scroll a document, the <div> stays put on the screen.
position: fixed;
Float
float is a property itself, not a value of the position property. Floated elements are taken out of normal flow, ut not removed from it entirely, and other elements remain aware of the floated element. A floated element literally ‘floats’ up in the flow, and then over in whichever direction is stated in the property.
.wee{
float: left;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 20%;
}p{
margin: 5px;
padding: 10px;
}
Clear Property…
If the wrapping ehaviour isn’t a desired effect, then you have the option of applying the clear property to the following effect.
p{
clear: left;
margin: 5px;
padding: 10px;
}
A series of floated boxes horizontally…
float: left;
float:right;
Z-index…
CSS lets you declare how <div>s are positioned left and right and up and down on a screen, and it also lets you control how they’re stacked when overlapping. In geometry, positioning right or left is commonly referred to as along the x-zxis. and up and down is along the z-axis; in our case, the apparent position between your eyes and the screen.
Setting the z-index declares what elemet will e on top in an overlap. The basic idea is pretty straightforward: An element with a lerger number will be closer to you than an element with a smaller number.
z-index: 4;
Centred simply box…
#content{
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right:auto;
margin-left: auto;
width: 70%;
}
2 Columns..
#content{
padding: 10px;
margin: 5px 122px 5px 5px;
}#menu{
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
margin: 5px;
width: 90px;
}3 columns…
#left{
position: absolute;
top: 0px;
left: 0px;
margin: 5px;
padding: 10px;
width: 90px;
}#middle{
margin: 5px 122px 5px 122px;
padding: 10px;
}#right{
position: absolute;
top: 0px;
margin: 5px;
padding: 10px;
width: 90px;
}
