bravemouse

CSS Positioning Intro Part 1: Why use CSS Positioning?

klip — Tue, 11 Aug 2009 12:18:44 +0000

This is the first post in a short series on how to use Cascading Style Sheets to control the layout of HTML web pages. To get the most out of this series, you should already know some basic HTML & CSS, which you will find in the HTML & CSS Day Course.

CSS Positioning is the art of using Cascading Style Sheets to control the layout of a web page. You may already have come across CSS positioning, if you have ever tried to edit your own blog template. Once you understand the basics of CSS positioning you will be able to edit your own blog template to create a unique look and feel.

In previous posts, we saw that CSS can be used to control some aspects of your web site's "look". You can use CSS to specify the size of text, the font used, background colours and so on. The post "why use CSS" explained how CSS can achieve a level of control not possible with other methods. And the real power of CSS is in using it to control the entire look of your site, including the layout – CSS Positioning.

Before CSS Positioning came along, people used tables to set the layout of a web page. Many people still do. But with CSS Positioning, you can achieve effects that are impossible with tables. Plus – you can change the layout an entire website by editing a single document – your external CSS document. You may find it confusing at first but once you get used to the level of control and flexibility, you wont want to go back to table based layouts.

You may want to read a little bit more about "table-less layouts". Not everyone agrees with this view that "tables are old fashioned". Here is an article that looks at the question.

Or the other side of the argument: CSS Zen Garden is a site that exists solely to exhibit the benefits of CSS Positioning. Their site states: "There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation." Have a look, and in particular, try out the "select a design" links on the right to see CSS in action.

So lets get on with it then! The next post in this series deals with the first concept you have to master: "The HTML Box model".

CSS Positioning Intro Part 2: The Box Model

klip — Tue, 11 Aug 2009 12:18:43 +0000

Before leaping straight into how to use CSS to control your page layouts, we first need to have a closer look at how an HTML page is constructed. I'm talking about something called the "HTML box model". Sound intimidating? Its actually ridiculously simple. Understanding the box model is both essential to everything else that follows and incredibly straight forward.

What is the Box Model?

The box model is just another way of explaining the structure of an HTML page. According to the HTML box model, every tag can be expressed as a box. Each box can contain other boxes (in other words, other tags), or content like text or pictures.

Lets use the following HTML page as an example:

poem

Kitten

The only problem with a kitten is that
it eventually becomes a cat.

So in the above example, the biggest box of all is the tag. Inside that, is another "box", the tag. This contains yet another box, the tag. And so on. Its easier to understand if you draw each tag as a box, like this: Simple, no? This is the single biggest secret to understanding CSS Positioning. When constructing a page – before you do anything else – draw a HTML box model diagram of that page. If you get that right, the rest will fall into place much more easily. We arent quite ready to jump into using CSS Positioning yet. <a href="http://www.bravemouse.com/2009/08/11/css-positioning-intro-part-3-the-div-tag/">First we need to look at a special tag – the div tag.</a> </article> <article> <h1>CSS Positioning Intro Part 3: The DIV tag</h1> klip — Tue, 11 Aug 2009 12:00:47 +0000 <a href="http://www.bravemouse.com/2009/08/11/css-positioning-intro-part-2-the-box-model/">In the previous post,</a> we looked at how an HTML page structure could be expressed as a series of boxes. In this post I want to show you a new HTML tag that is used a lot in CSS Positioning: The div tag. CSS Positioning at its simplest, consists of two tasks: <ol> <li>Use html to Divide each document up into sections .</li> <li>Use CSS to create styles for these sections that will define where on the page they appear, and what they will look like.</li> </ol> The div tag helps you with the first step; dividing the content of a page into separate sections, ready to be styled. Lets look at this example again: <blockquote><html> <head> <title> poem

Kitten

The only problem with a kitten is that
it eventually becomes a cat.

Even without any CSS, your browser will display the content of the

tag in a larger font, and will place a line break before and after content contained within a
tag. Its as though these tags come with their own inherent styles. You can over-write these inherent styles easily, by re-defining the tag with a CSS definition. For example, you could re-define the h2 tag by using the following CSS definition, which will make the text appear smaller:

h2{font-size:8px; }

But it would be awkward if all the tags had inherent style that had to be over-written in this way. That is why there are some neutral tags that exist purely to indicate the beginning and end of a section, and carry no inherent style. One such a tag is the div tag.

I could mark up the content in the HTML example above with a div tag like this:

poem

Kitten

> The only problem with a kitten is that
it eventually becomes a cat.

My first problem is: how can I get the heading ("Kitten") to display bigger than the content ("The only problem…")? One way would be to re-define the div tag with a CSS rule like this:

div{font-size:14px }

Then all the content in all div tags on the page will be styled by the same rule – in this case, both the heading and the content will appear bigger. This is a problem, as I want only the heading to be bigger, and the body copy of the poem to be formatted quite differently.

So a rule that re-defines the tag does not work for me. Instead, I should define my own class, and then I can apply the class to any tag, as I see fit. You can read more about defining your own class here.

In this example, I create my own classes by writing the following CSS definitions:

.larger{font-size:14px }

.smaller{font-size:10px }

Then I put the references to my new classes into the appropriate div tags in the HTML document like so:

class = "larger"> Kitten

class = "smaller"> The only problem with a kitten is that
it eventually becomes a cat.

The div tag is useful because it does not carry its own inherent style. You can use it to divide your content, ready to be styled.

So you know about the HTML box model, and you also know how to use div tags to mark up your content. In the next post we are going to do some actual CSS Positioning.

CSS Positioning Intro Part 4: Width and Background Colour

klip — Tue, 11 Aug 2009 11:30:52 +0000

In this post we are finally going to do some CSS positioning. We will start by creating a simple page that looks like this:

OK – very simple layout indeed! But we are starting with basics here. Soon things will get more complicated. For the moment, what we are trying to achieve is to have two poems, each with a box around it. We will specify what the width of the box is, and what its background colour should be.

You've got to crawl before you walk!

You can download all files used in this exercise here.

The HTML for this page looks like this:

A Poem

"redbox">

"heading">Peas

poem"> I eat my peas with honey

I've done it all my life

It makes them taste quite funny

but it keeps them on my knife.

"bluebox">

heading"> Horse

"poem">The horse bit his master

How came this to pass?

It heard the good pastor say:

"All flesh is grass"

And the CSS looks like this:

.redbox {width:400px;
background-color:#DC143C;
}

.bluebox {width:400px;
background-color:#1E90FF;}

.heading{font-size: 2em;
font-family:Arial;
font-weight:bold;}

.poem{font-size:1.5em;
font-family:Arial}

Notice the following:

In the HTML document:

In the head section of the HTML, you find the reference to the external CSS style sheet. From this, you can see that all the CSS styles have been saved in an external style sheet with the file name style1.css
The HTML text has been carefully divided by div tags, according to how it will be displayed.For example: Since the heading of each poem must look different from the rest of the text – a bit bigger and bolder – it was necessary to create separate div tags for each heading. If the plan was that the headings should look just like the rest of the poem – we could have created a single div tag around the heading and the poem.
Each div tag has been linked to a

CSS Positioning Intro Part 5: Margins and Padding

klip — Tue, 11 Aug 2009 11:20:51 +0000

In the previous post you learned the bare bones basics of how to specify the width of an element. It did not look great. For one thing, the text looked uncomfortably squashed right up to the edge of each box. Lets insert some breathing space for the text. We will also complicate things a bit more by adding another element – a framing box. The example page will look like this:

We will need two new CSS properties to create this "breathing space" – margin and padding.

You can download the files used in this exercise here.

Margin

Remember the html box model? Each set of tags is like a box. Each tag-box can be nested inside other tag-boxes, or have tag-boxes nested inside them.

The "margin" property specifies the distance that a tag-box must be from the tag-box it is inside of.

For example – if I had HTML like this:

The "red" div tag is nested inside the "black" div tag, right?

If I wrote a CSS definition for the "red" div tag like this:

.red{margin:5px; }

This CSS definition gives the "red" box a margin of 5 pixels wide.

That specifies the distance that the "red" box must be positioned from its containing element – the "black" div.

Without a margin, the red box would sit right up against the edge of the black box. The margin property ensures that there is a certain distance between the outer edge of the red box and the black box it is inside of. Like this:

Padding

"Padding" specifies how much distance there should be between and element and whatever it contains. Lets look at a slightly different example:

text

If we wrote the following CSS definition:

.red{
margin: 5px;
padding:5px;
}

We know that the padding property specifies the distance between an element ("red") and whatever it contains (some text). Padding would look like this:

Applying Margin and Padding in your own example

Back to the example layout. We are attempting to achieve a layout like this:

We have quite a few boxes (remember, each tag set is considered to be a box).

The HTML for this page looks like this:

A Poem

Peas

I eat my peas with honey

I’ve done it all my life

It makes them taste quite funny

but it keeps them on my knife.

"bluebox">

heading"> Horse

"poem">The horse bit his master

How came this to pass?

It heard the good pastor say:

"All flesh is grass"

The CSS sheet looks like this:

.container{
width:450px;
background-color:#000000;
padding:10px;
}

.redbox {
background-color:#DC143C;
padding:5px;
margin:10px;
}

.bluebox {
background-color:#1E90FF;
padding:5px;
margin:10px;
}

.heading{font-size: 2em;
font-family:Arial;
font-weight:bold;
}

.poem{font-size:1.5em;
font-family:Arial;
}

Note the following (you may want to compare this with the previous example):

In the HTML document: there is a new div tag ("container"). This is to create the black area that encloses both "redbox" and "bluebox". I included this simply to demonstrate margins and padding more clearly.
You did not have to specify the width of the red or blue boxes. That is because you did specify the width of the black box that contains both of them. They will expand to fit inside the black box.
Two new properties have been used in the CSS definitions: Margin and Padding.
The "container" class has a padding property. The elements inside the "container" div (like "redbox" for example") have a margin property. This means that the total distance between the edge of the "container" div and the elements inside it, is the sum of their padding and margin properties like so:

Next we look at how to create a simple layout with columns.

CSS Positioning Intro Part 6: Calculating Columns

klip — Tue, 11 Aug 2009 11:10:36 +0000

This series has covered some of the CSS properties that control the layout of a page. We looked at how to set the width of a page element and how to set margins and padding to create space between page elements.

But so far we can only set up the most basic of layouts – rows that appear one below the other. What about columns? How do you make a picture or paragraph appear next to another page element?

In this post, we will create a basic layout with one row and two columns:

Calculating the widths:

Before we write any CSS, we first need to calculate the widths and other measurements that this page must have.

The layout above already has the following properties:

The outside black box has a width of 450 px and a padding of 10px.
The blue and green columns have margins of 10px each.

All that is left is to figure out how wide each column should be so that they fit exactly inside the black box.

We can do it like this:
Take the width of the outside box (450 px) . Subtract from that all the margin and padding properties added together (450 px – 60 px = 390px). Divide the result in two, because there are two columns (390 px /2 = 195 px) .

To fit exactly inside the black container box, each of the columns should be 195 px wide.

Before we plug those values into a CSS definition, lets have a quick look at what the HTML looks like:

The HTML

The HTML for this page looks like this:

A Poem

Peas

I eat my peas with honey

I've done it all my life

It makes them taste quite funny

but it keeps them on my knife.

Horse

The horse bit its master.
How came this to pass?
It heard the good pastor say
"All flesh is grass".

Justice

The rain, it raineth every day
Upon the just and unjust fella
But it raineth more upon the just

Because the unjust hath the just's umbrella.

The CSS

If we put the width we calculated into the CSS definitions, we get this:

.container{
width:450px;
background-color:#000000;
padding:10px;
}

.redbox {
background-color:#DC143C;
padding:5px;
margin:10px;
}

.bluebox {width:195px;
background-color:#1E90FF;
padding:5px;
margin:10px;
}

.greenbox {width:195px;
background-color:#009966;
padding:5px;
margin:10px;
}
.heading{font-size: 2em;
font-family:Arial;
font-weight:bold;
}

.poem{
font-size:0.8em;
font-family:Arial;
}

This will result in a layout like this:

Which is not what we want. Yes, the boxes are all the right widths, but that green box needs to pop up next to the blue box. To do that, we will use a new property – the "float" property – which is explained in the next post.

CSS Positioning Intro Part 7: Float and Clear

klip — Tue, 11 Aug 2009 11:00:29 +0000

This is the last post in the "Introduction to CSS Positioning" series. We look at two new properties that will help us create layouts with columns: "float" and "clear".

You can download the files used in this exercise here.

The Float Property

Floats take a bit of getting used to. They are counter-intuitive and can be confusing. In this post we will apply them without delving too much into the theory behind them – lets learn by doing.

The float property makes an element move as far as it can to the right or left side of whatever contains it.

So lets try it out. You may think the thing to do is to make the green box "float" to the right – but actually, we are going to float both the blue and the green boxes to the left, and the result will be two perfect columns. Wait and see.

First – we float the blue box to the left like this:

.bluebox {width:195px;
background-color:#1E90FF;
padding:5px;
margin:10px;
float:left;
}

Let's see what effect his has on the layout:

Yikes! That's not quite what we had in mind. The green box has shifted up, but it has slipped in behind the blue box. Why is that?

When you float a page element, it acts as though it has been partially "lifted" out of the html box model, and this changes the way other page elements interact with it. In this case the green box behaves as though the blue box is no longer there – it moves to the left just as it would if you had deleted the blue box. (Notice that the text inside the green box still moves down to make space for the blue box.)

So obviously there is more work to be done here before we have our nicely floating column layout. To get the green box to sit next to the blue box, we will float it as well. In this example, we will float it left by adding the same property to the .greenbox style rule:

.greenbox {
width:195px;
background-color:#009966;
padding:5px;
margin:10px;
float:left;
}

But this is still not perfect, as it gives us the following result:

The "container" div tag now behaves as though the .greenbox and .bluebox div tags are no longer inside it, and has snapped up. We would like it to stretch down to surround those two div tags.

The simplest way to do this, is to add one last, empty div tag below the .greenbox div tag, and use CSS to style this new div tag so that the float attributes of the two div tags above it is "cleared". Since this last div tag does not have a "float" attribute, the .container div tag will stretch down to contain it, and so also contain any div tags that appear above it in the HTML structure.

So – in the .html file, we add the following div tag below the .greenbox div, but still inside the .container div:

Justice

The rain, it raineth every day
Upon the just and unjust fella
But it raineth more upon the just

Because the unjust hath the just's umbrella.

And in the CSS, the following rule:

.stretch{
clear:both;
}

And that should result in a layout like this:

Flash: Create a Spotlight Effect with a Mask Layer

klip — Thu, 06 Aug 2009 07:53:55 +0000

A while ago, I wrote a post about Mask Layers. Here is the answer to the second challenge in that post: Create a Spotlight Effect using a mask layer. (Click on the play button below to see the animation.)

Create the Images

First you need two versions of the same image. Use an image editor like Photoshop to make the one a bit darker than the other, like this:

Setting up the Layers

Create three layers.
Turn the top layer into a Mask layer
- Right click on the little "page" icon next to the layer's name.
- Tick "Mask" from the drop down menu.
- You should see the icon of that layer change, and (this is important) the one below it as well.
- The top layer is the "Mask" layer,and the one below the "Masked" layer.
- The layer just below the masked layer is a normal layer (In the screenshot below its called "dark")
Put the lighter image in the masked layer.
Put the darker image in the normal layer just below the mask layer. Make sure they are exactly lined up above one another.

Making the Mask

Create a shape in the mask layer. In this example I've used a simple disk.
The shape must have a fill – strokes don't work in a mask.
Your movie will look something like the screenshot below, with the red disk being the mask:

Test the mask by locking the mask layer and the masked layer:

click on the little dot next to the layer name, under the "lock" icon to lock a layer.
With both the mask and masked layers locked, you will be able to preview the spotlight masking effect:

Animate the mask: You can create animation in the mask layer. In the example below, I used a motion tween, but you can use classic or shape tweening as well.

This tutorial was adapted from a tip in Russel Chun and Joe Garraffo's "Macromedia Flash MX Advanced" which is an excellent book for learning actionscript. There is a more up to date version as well.

Flash: Create a Scribble Effect with a Mask Layer

klip — Mon, 03 Aug 2009 07:30:10 +0000

I promised to reveal how to create a "scribble effect" using mask layers in Flash. If you don't know what a mask layer is yet, have a look at this post on Mask Layers.

So how do you use mask layers to create animated writing like the example below? ( press the play button to see the animation)

You can download the files used in this example here.

Create the layers:

Create two layers.
Turn the top layer into a Mask layer:
- Right click on the little "page" icon next to the layer's name.
- Tick "Mask" from the drop down menu.
- You should see the icon of that layer change, and (this is important) the one below it as well.

Your layers should look something like the screen shot below. The top layer is the "Mask" layer,and the one below the "Masked" layer.

Notice that both these layers are locked. Click on the little lock icons to unlock both layers.

Create the writing:

In this example, I've re-named the layers. The top "mask" layer is called "mask". The "masked" layer at the bottom, is called "scribble".

Click on the first frame of the layer named scribble – in other words, the lower, "masked" layer.
Write or type out the entire phrase you want to appear.
Insert some frames to stretch this layer. It should look something like this:

Gotcha: If you are using the Type tool to create the writing you will need to break it apart. Go to Modify > Break Apart. Do this TWICE. This changes the editable text created by the Type Tool into normal vector shapes.

Create the mask animation:

Select the first frame of the "mask" layer.
Use the Brush tool, and paint a small patch of colour covering up the bit of writing that you want to appear first.
You dont need to be very neat – remember, the mask layer will (eventually) be invisible.

In this example, the mask layer is indicated in red:

Insert a new keyframe in the "mask" layer.
Make a splotch of colour over the next part of writing that must be revealed:

If you lock both the layers, you will see the mask in action already. Notice how it does not matter much how "messy" your mask is, as long as you cover all the bits of text you want to have revealed:

Carry on inserting keyframes in the mask layer. At each keyframe, add another patch of colour, gradaully covering up all of the text.
When you are done, your layers should look something like this:

Test it (Control > Test Movie) and see. Did you get it working?

You can download the files used in this example here.

Flash: Painting with selections

klip — Thu, 30 Jul 2009 10:08:24 +0000

Once you get the hang of it drawing in Flash can be a lot of fun. Especially if you take advantage of the "Brush Mode" menu.

You will find the Brush Mode like this:

Select the Brush Tool
Have a look at the bottom of the Tool palette. (You may have to expand the palette a bit to see all the buttons.)
Look for the "Brush Mode" button:

My favourite brush mode is "Paint Selection":

First I draw a basic shape:

Then I select one of the colours. In the example below, the orange area is selected, and the black and brown eyes and nose are not selected:

I set the "Brush Mode" to "Paint Selection". This means that I can scribble over the entire canvas, and the brush will only paint onto the selected areas:

They eyes and nose are protected from editing, so I can scribble right over them. I dont have to worry about staying inside the shape either.

Now I can select the new colour, (for example, the stripes on the cat) and paint only on that.

The "Paint Selection" mode is a quick and easy way to improve your Flash drawing.