Wrap it up! (part 2/2)

Now, I am going to teach you how to go beyond the limits of physics change the rules of CSS (brrr...).

Pictures ( <img /> ) are inline elements. You would prefer them to be blocks? No problem!
Headers ( <h1> ) are block type elements and this has always bothered you. You would prefer them to be inline elements? No problem!

There exists a powerful CSS property, called display (handle it carefully, otherwise the whole thing will blow up ).
This property can take the following values:

• block: the element will be displayed as a block-level element.
• inline: the element will be displayed as an inline one.

Actually, display can take maaaany other values (that is to say how powerful this property is ) but I will just teach you the two most used ones for now.

To change an inline element into a block one, you will have to type:
display:block;

For instance, if I wanted ALL my pictures to be at block level, I would write this:

Code: CSS



However, all your images do not HAVE to be at a block-level, okay? I hope you will remember this: it is possible to use the "class" attribute on a tag so it is displayed differently.
For instance :

Code: HTML

Of course, you will have to write the following CSS code for the second picture to be at block level:

Code: CSS

I hope that you are not learning anything new about how the class attribute works, otherwise you should read the first chapter of part II again... slowly this time!



Well it is the same thing except that this time we will use display:inline;.
I will not show you another example, you are surely smart enough to guess how it works by yourself!

By the way: we usually change inline elements into block-level ones, but the opposite is seldom done. Actually, block elements have many advantages: you can modify their size, borders, margins, etc. Anyway you already know all this.

The first method we will see is called floating. I admit it is is a peculiar name, but it will not be hard to understand.
In order for you to see what we are dealing with, this is a picture of what we will learn to do:



It allows you to wrap text around an element (a picture in this case): it makes it look better.

I guess the question you are asking yourself is: "Which magic CSS property can make things float like that?"
The answer is...float (surprising, isn't it?). This property can take two values, which you should have guessed by now.

• left: the element will float on the left.
• right: the element will float... on the right! Yes, good job!

Using the floating method is such a simple thing than one often makes it more complicated (and I know what I am talking about). Actually, there are only two things to do:

1. You set a float for a tag.
2. Then you write text as usual.

Making a picture float

Let's learn how to make a picture float (a picture being an inline tag, as you may remember). First of all, this is the xHTML code you have to type:

Code: HTML



Now let's only change the picture's CSS code but not the paragraph's: the text will automatically be displayed correctly.
This is the simple CSS code that we have to type to make the picture float to the left:

Code: CSS


You can also try to make the picture float to the right: just set float:right; and that's it!

Making a drop cap (exercise)

Sometimes, I have an horrible nightmare. I imagine myself making a long tutorial about floating elements in CSS and everyone is yawning, falling asleep, in other words everyone is bored to tears. Wow... It always gives me the chills.

So, in order to avoid my nightmare to come true, I decided to create a fun exercise for you (at least I hope it will be fun. ).

Do you know what a drop cap is? No, I bet.
Ok, never mind.

A "drop cap" is the first letter of a paragraph when it is written bigger than the rest of the paragraph. It can often be seen in newspapers.



The only rule is to use the following xHTML code. You may not modify this code.:
Code: HTML

(It comes from James Joyce's Ulysses: I told you you could not change any bit of it. )

You have to make a CSS file which will display this text with a drop cap. You cannot modify the xHTML file but you can do everything you want inside the CSS file: all properties are allowed.

Come on, get to work!

...
...
...

Okay,that's it! Correction time!
Of course, you had to use float:left. But how can it affect the first letter only?
If you found by yourself that you had to use :first-letter, then congratulations! That was the only difficult thing and the rest is easy, you could set the properties you wanted.
You could use font-size to set the font on... three lines high, I would say. For that, I put the "3em" (= 3 lines high) value, but "300%" works as well! However, it is not a good idea to set a size with pixels because the height of a line is not always the same.

This is the code I wrote to make a drop cap:

Code: CSS


Do not stop here! You can write the drop cap in white with a black background, or even use a background picture. Just do tests!

Breaking a float

We have seen that a floating element is surrounded with text.
But how to make the text continue under the floating element? We can use several <br />, but that would neither be easy nor clean.

In short, we would like to do this :



Actually, there is a CSS property (no kidding) which allows us to say: "Stop, I want this text to be under the floating element". That is the clear property. It can take three values:

• left: the text continues under after a float:left
• right: the text continues under after a float:right
• both: the text continues under after a float:left or a float:right

To make things a little easier, we will always use a clear:both because it works with both float:left and float:right (always, actually).
Let's use the following xHTML code to use this property:

Code: HTML

Code: CSS

There we are
We only need to apply a clear:both; on the paragraph we want to be continued under the floating picture. And that's it!

There are three ways of positioning a block with CSS (except floats):

• Absolute positioning: a block can be set anywhere on a page (top-left corner, bottom-right corner, middle, etc.)
• Fixed positioning: it's almost the same as absolute, except the block doesn't move when you scroll down the page, like when you use background-attachment:fixed;. (if you still remember that one )
• Relative positioning: it's the most complicated positioning method. A block can be moved from its original position.

First, you must choose a positioning method with the "position" CSS property:

• absolute: absolute positioning.
• fixed: fixed positioning.
• relative: relative positioning.

We're going to study them one after the other.

Absolute positioning

You already know you have to type that to make an absolute positioning:
position:absolute;

But that's not enough!
Indeed, we said we wanted to make an absolute positioning but we haven't said where we want the block to be yet.
To do so, we'll use four CSS properties you've already seen a lot of times:

• left: positioning from the left of the page.
• right: positioning from the right of the page.
• top: positioning from the top of the page.
• bottom: positioning from the bottom of the page.

We can set a pixel value of like "14px" or a percent value like "50%".

If you don't understand very well, this scheme may help you:



Now you should be able to position your blocks correctly

So you have to use the position property and at least one of the four previous properties (top, left, right or bottom). For instance, if we write that:
position:absolute;
right:0px;
bottom:0px;
... that means the block is positioned in the bottom-right corner of the page (0 pixels from the right, 0 pixels from the bottom).

This time, we'll use the <div> universal tag (block tag). I'm going to write a paragraph, and then I'll put a few words inside the <div> tag.

Code: HTML


That's no magic. There are just a paragraph and a div tag.
Now, let's add some CSS code to position our div tag:

Code: CSS


I put a yellow background and a border so we can see the div better.

As you can see, the block is positioned over the paragraph. The blocks are overlayed; that's one of the greatests assets and also one of the greatests inconveniences of absolute positioning: a block can be positioned anywhere on a web page, but you must be careful because it may hide some text.

Here is another example of the possibilities you have with absolute positioning:

Code: CSS

Fixed positioning

It works exactly the same as absolute positioning, but your block stays fixed this time, even if you scroll down the page.



Instead of writing position:absolute;, we'll write position:fixed; inside our CSS code. We'll use top, bottom, left and right to position our block, just as before.
The position:fixed; property is very useful to make a menu you can always see:

Code: CSS


If your menu appears at the bottom of the page and it's not working, that means you're using Internet Explorer (an old version of it)
Because of that problem, people usually don't use fixed positioning to create a menu on their webpage: they use absolute positioning instead.

Relative positioning

That's a bit more complicated than the other methods. Actually, I don't use that one very often. It's only useful to make "fits".

For instance, let's take an important text, inside a <strong> tag.
First, I'll put a red background so it's more attractive:

Code: CSS


This time, the scheme I showed you doesn't work anymore. Why? Because the origin is different: the point which has the (0,0) coordinates is not at the top-left corner of your page as before. Indeed, that point is now at the top-left corner of the element.
Strange, isn't it? Yes, it's relative positioning. This scheme should help you to understand how it works:



So, if you put position:relative and apply one of the properties top, bottom, left, right, the text with a red background will be moved from its original position.

I told you it was strange. Actually, we should test it to understand it better.
Let's take an example: I want my text to be shifted 55 pixels to the right and 10 pixels lower. So I will set it 55 pixels from the "left corner" and 10 pixels from the "top corner".

Code: CSS


The text moved from its original position, like that:



That's the way it works. Now that you can use it, you have to find where