Euro PC Solutions Blog

HTML / CSS – Site Layout (Part 2/2)

In the first part of the "site layout" lesson we saw the CSS properties that let you change the appearance and size of blocks. As a quick summary, we saw :

• How to change the size of blocks
• How to change the borders on blocks
• How to change margins on blocks

In this second part, we’ll see how to position them. We still need to learn how to say "I want my menu to be on the left, the content on the right, the logo of my site at the top of the page" etc…
Just to make things clear, positioning in CSS is not the easiest thing in the world… there’s theory, and there’s reality. In this chapter, we’ll only be seeing the theory (it’s a needed passage), and in the next chapter we’ll do the real thing (which will be more interesting for you !).

One thing is for sure, and you’ll need to get this straight, you’ll never make a site that’ll show up the same a pixel close on every browser. We’ll learn to make sites show up more or less correctly on every browser, which isn’t a bad place to start

Transforming Inlines To Blocks (And Vice Versa)

Now I’m going to teach you to defy the laws of physics modify the laws of CSS (brrr…).

Images (<img />) are inline tags, would you prefer them to be blocks ? No problem !
Titles (<h1>) are block tags, would you prefer them to be inline ? Still no problems !

There is a very powerful CSS property called display (to use with caution, if not you might destroy everything ).
This property can take the following values :

• block : the concerned tag will become a block
• inline : the concerned tag will become an inline

In fact display can take a lot of other values, but I’m only going to show you the 2 most used ones.

To transform an inline tag into a block, you must type :
display: block;

For example, if I want ALL of my images to be blocks I would write this :

Code : CSS

img {
     display: block;
}

Be careful, after doing this all of your images will automatically show up on a new line, like other block tags do.

Nobody said that ALL of your images had to become blocks though. I hope that you’ve already understood that you can use class on a tag so that it can have a different presentation.
For example :

Code : HTML

<img src="image.png" alt="This image is normal (inline)" />
<img src="image.png" class="imageblock" alt="This image is modified (block)" />

…and of course you’ll need the following CSS code to make the second image into a block :

Code : CSS

.imageblock {
     display: block;
}

I hope I’m not teaching you anything new about the use of class, if so return to the first chapter of the second part

And the other way ? How do you transform a block into an inline ?

Well, it’s the same thing, but you use display: inline
I’m not going to redo an example code, I think you’re good enough now to do it yourselves

A quick comment : Generally we transform inline tags to blocks but the inverse is rarely done. That’s because block tags have quite a lot of advantages : you can modify their size, margin, border etc… Well, you already know all that

Floating

The first technique we are going to see is floating. It’s a bit of a strange name, I agree, but it’s not that hard to understand.
So that you can see what we’re going to do, here’s an example of what we’re going to learn :

This allows us to "surround" an element (here an image) with text. It creates a nice presentation easily.

I imagine that the question you’re asking yourself is "But which magic property makes things float ?!".
The answer is…float. This property can take 2 values, which you can probably guess :

• left : the element will float to the left
• right : the element will float to the right

Using float is very easy, so easy that we tend to complicate things unnecessarily. In fact, there are only 2 things to do :

1. Apply a float to a tag
2. Then continue to write text after it as normal

You can use the property float on block tags & inline tags, you’ll see…

Floating Images

Here we’ll learn how to make an image float (which is inline). Here’s the image we’ll be using. Copy it into your images folder :

Here’s the XHTML code we need to write to get started :

Code : HTML

<p><img src="../images/flash.gif" class="floatingimage" alt="Floating Image" /></p>

<p>This is a normal paragraph text, written after an image, but which will <q>surround</q> it because the image is floating<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mollis scelerisque nulla. Donec feugiat augue et sem. Nulla ut purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla volutpat leo quis magna. Donec accumsan lobortis ligula. Donec nec ante eu wisi tempus dictum. Sed nulla est, laoreet nec, consequat quis, iaculis non, tortor. Nunc sed purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis non erat et orci viverra mollis. Sed lacinia velit a magna. Etiam aliquam, felis eu imperdiet auctor, ante augue dignissim odio, a pharetra tellus neque vel urna. Cras gravida adipiscing lectus. Nullam lorem ipsum, convallis eleifend, congue placerat, dictum non, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

A common mistake people make is putting the image after the text. No, you shouldn’t, the image should be before the text whether it’s floating on the left or the right.
If you try putting <img /> after the paragraph, you’ll see that it doesn’t work.

All that you need to understand now is that we only need to modify the CSS of the image, and not of the paragraph. The paragraph doesn’t need modifying, it will automatically be placed as needed.
Here’s the only bit of CSS code we need to make the image float to the left :

Code : CSS

.floatingimage {
     float: left;
}

You can also have fun floating the image to the right, just put float: right, and it’s done !

Create An Illuminated Letter (exercise)

Sometimes I have a nightmare. I imagine that I’m writing a long lesson on floating in CSS and everyone is yawning, falling asleep, getting bored. Brrr… This vision gives sends chill down my spine every time.

So, to avoid my worst nightmare coming true I decided to make you work a bit on a small exercise.

Do you know what an illuminated letter is ? No.
Well it’s not that complicated

An illuminated letter is the first letter of a paragraph written a lot bigger than the rest. You see them quite often in books (if you read books !). Here’s what you need to try and do :

The only guidelines are that you must use the following code and you’re not allowed to modify it.

Code : HTML

<p>The viewers of Euro PC Solutions want to learn how to make websites. They have already read 12 chapters on coding in XHTML and CSS but still haven't learnt to make a complete site ! However of this will soon change. After this rather long chapter on block tags and inlines they will do a complete exercise to build a website from a design made in Photoshop !</p>

Your objectives are to make a CSS file that will make in illumainated letter at the beginning of the paragraph. You can’t modify the HTML but in CSS every move is possible : you can use the properties you wish. If you’re having trouble remembering how to change the first letter just go back to the chapter on pseudo formats.

Get to work !
…
…
…
Brrriiiiinng!!! It’s time to stop what you’re doing !
You had to use float:left; evidently, but how do you make the first letter change ? Without modifying the XHTML ?
If you found out by yourselves that you had to use the pseudo element :first-letter then well done ! It was the only real difficulty, after everything else is easy and you can do what you want.
You need to think mainly of using the property font-size: so that it changes size and takes…let’s say 3 times more place than usual. For this I’ve put the value 3em (= 3 lines in height), but if you write 300% it’s the same thing ! However you should avoid putting something like 50px because we don’t know the size of the text in the paragraph, it can change.

Here’s the code I used to make the illuminated letter :

Code : CSS

p:first-letter {  /* I want to modify the first letter of the paragraph */
     float: left;  /* Float to the left */
     font-size: 3em;  /* Use Arial if possible */
     font-family: Arial, Georgia, "Times New Roman", Times, serif;
     font-weight: bold;  /* Put the letter in bold (it's more visible) */
     margin-right: 5px;  /* Put a 5 pixel margin to stop the text from sticking too close to the illuminated letter */
}

But there’s no need to stop there ! Nothing’s stopping you from writing the letter in white on a black background or even using a background image ! Just use your imagination

Stopping A Float

When you use a float, the text surrounds it, that’s understood.
But what do you do if you want to stop the float and make the text go underneath the floated element ? You could use several <br /> one after the other but it’s neither practical nor very clean from a code point of view…

Here’s what we would like to do :

There exists a CSS property which allows us to say : "Stop, this text needs to be underneath the float, not next to it". It’s the property clear which can take 3 values :

• left : the text goes underneath a left float
• right : the text goes underneath a right float
• both : the text goes underneath any float

To simplify things we’ll use clear:both all the time, which works after float:left; and float:right; (it works all the time).
To see how it works we’ll use the following XHTML code :

Code : HTML

<p><img src="images/flash.gif" class="floatingimage" alt="Floating Image" /></p>
<p>This text is written next to a floating image</p>
<p class="underneath">This text is written under a floating image</p>

Code : CSS

.floatingimage {
     float: left;
}

.underneath {
     clear: both;
}

And that’s all you need to do
You just apply a clear:both; to the paragraph you want to continue under the floating image !

Absolute, Fixed & Relative Positioning

Apart from floats there are 3 different ways to change the position of a block :

• Absolute positioning : allows us to position a block anywhere on the page (top left, bottom right, center etc…).
• Fixed positioning : same as absolute positioning but the block is always visible, even if you scroll the page. It’s a bit like background-attachment: fixed; (if you can still remember )
• Relative positioning : The most complicated. Lets us position the block in relation to its normal position.

As with float, absolute, fixed & relative positioning also work on inline tags such as <img /> However you’ll see that they’re used most often on block tags.

First of all you need to choose the method you want to use. To do this we use the CSS property position followed by one of the following :

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

We’ll have a look at all these methods one by one.

Absolute Positioning

You know that to use absolute positioning you need to write :
position: absolute;

However that is not enough

You’ve said that you want to use absolute positioning but you still need to say where you want the block to be placed on the screen.
For this we will use 4 CSS properties that you’re probably starting to know quite well by now :

• left : position in relation to the left of the screen
• right : position in relation to the right of the screen
• top : position in relation to the top of the screen
• bottom : position in relation to the bottom of the screen

You can give the values in pixels, like 14px, or as a percentage, like 50%.

If it’s not very clear to some of you, here is a diagram that should help you understand :

With that, you should be able to correctly place your block

We need to use the property position followed by at least one of the above properties (top, right, left, bottom). For example if you write :
position: absolute;
right: 0px;
bottom: 0px;
…your block will be placed at the bottom right of the screen (0 pixels from the right and 0 pixels from the bottom).

For this example we will use a universal tag <div> (block). I will write a paragraph and will place two or three words in the block :

Code : HTML

<p>
     This is a normal paragraph.<br />
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Cras dolor. Quisque quis odio eget justo pulvinar aliquet. Morbi luctus mi. Fusce leo. Integer eleifend condimentum felis. Phasellus vitae nibh. Mauris pellentesque porta magna. Quisque at turpis. Praesent semper odio eget risus. Praesent bibendum imperdiet massa. Quisque ac arcu ac augue dapibus vestibulum. Pellentesque gravida. Mauris turpis. Aenean molestie. Praesent at quam et ligula pellentesque luctus.
</p>

<div>Placed Block</div>

At the moment you’ll notice that nothing extraordinary has happened. You can just see a paragraph followed by a couple of words.
Now let’s add some CSS to position the div block :

Code : CSS

div {
     background-color: yellow;
     border: 1px solid green;

     position: absolute;
     left: 35px;
     top: 50px;
}

I’ve put in a yellow background and green border so that you can see the block better.

As you can see the block goes over the paragraph; it masks the paragraph. It’s one of the main advantages and defaults of absolute positioning, there is no control, you can really put the block where you want on the page, but be careful not to mask your text.

Here’s another example to show you that you can really put the block anywhere :

Code : CSS

div {
     background-color: yellow;
     border: 1px solid green;

     position: absolute;
     right: 50%;
     bottom: 20px;
}

Here’s a small technical precision for those who want to go further (the others can ignore it): if you want to use absolute positioning on block A, and inside this block you want to use absolute positioning on a block B, the positioning will be in relation to the top left corner of block A and not of the screen.
Ahhh…the joys of positioning in CSS

Fixed Positioning

This works in exactly the same way as absolute positioning, however this time the block will always stay in the same place on the screen, even if you scroll.

Fixed positioning works on every browser apart from Internet Explorer 6 and earlier. On these versions the block won’t be placed at all.

Instead of writing position: absolute; we need to write position: fixed; in our CSS. Like before we use top, left, right and bottom to place the block where we desire.

position: fixed; can be particularly useful to make a menu that is always visible :

Code : HTML

<p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dapibus, purus et suscipit nonummy, nisl sapien varius velit, a dapibus velit diam a magna. Ut bibendum, velit ut ultricies blandit, metus tortor bibendum diam, vitae aliquet magna ligula id diam. Etiam id diam. Cras volutpat ligula vel arcu. Aenean ullamcorper mauris ultrices neque. Praesent blandit nunc a lectus. Aliquam leo tellus, dictum feugiat, pharetra sed, fringilla non, dui. Cras tincidunt. Proin in dui nec risus tristique porttitor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In posuere interdum quam. Nam sed dolor.<br />
     Vivamus a dolor a erat dapibus pretium. Aliquam pulvinar neque id sem. Vestibulum ut pede. Aliquam scelerisque, wisi volutpat accumsan accumsan, diam diam sagittis elit, at tempor orci tortor ac urna. Aliquam dapibus arcu id libero. Praesent pharetra. Aliquam erat volutpat. Morbi lorem lorem, varius nec, venenatis sit amet, scelerisque et, lacus. Vivamus eget erat eleifend est laoreet ullamcorper. Morbi erat elit, tincidunt non, imperdiet ac, viverra ut, tellus. Cras ipsum risus, consectetuer malesuada, pulvinar non, posuere in, mauris. Cras erat tellus, mollis in, ullamcorper vel, semper ut, mauris. Pellentesque nonummy libero eu pede. Praesent quam pede, tincidunt quis, rutrum at, accumsan at, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vel est placerat velit vestibulum tempus. Integer sollicitudin rutrum neque. Integer pretium nulla. Proin a mi. Integer suscipit vestibulum ligula.<br />
     Quisque vitae purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ultricies interdum tortor. Fusce pellentesque urna sed turpis. Maecenas sit amet enim et enim aliquet semper. Morbi risus. Pellentesque varius erat vitae mi. Integer sapien dolor, tempus a, fermentum et, viverra eu, leo. Sed vitae felis. Proin enim. Donec tincidunt pede sed urna. Sed in velit. Sed gravida ultricies dolor. Aenean tortor nibh, cursus quis, vestibulum vehicula, semper non, nunc. Etiam fermentum, mauris ut rhoncus hendrerit, pede nunc mattis felis, eu molestie lacus metus id eros. In hac habitasse platea dictumst.<br />
Vestibulum non leo in purus convallis auctor. Praesent quis arcu. Nunc magna. Vestibulum vel dolor. Curabitur diam. Suspendisse ut justo. Sed at quam quis massa viverra iaculis. Suspendisse eget augue nec arcu condimentum molestie. Vivamus tincidunt mauris vitae ante. Cras metus turpis, ullamcorper eu, consectetuer a, commodo feugiat, metus. Donec sit amet sem. Nunc blandit nibh. Curabitur eros libero, sagittis id, accumsan vel, dignissim id, orci. Donec eleifend erat ac tellus. Integer in nunc vitae quam aliquet interdum. Pellentesque blandit, ante ac ultricies varius, nibh eros vulputate justo, sit amet facilisis sem enim sit amet nunc. Maecenas at ligula vel mauris laoreet placerat. Integer pulvinar libero sit amet nulla. Praesent nibh turpis, sagittis vitae, congue non, malesuada sed, dui. Nunc et mauris.
</p>

<div>
     <p>Menu</p>
     <ul>
          <li>Home</li>
          <li>Forum</li>
          <li>Guest Book</li>
     </ul>
</div>

Code : CSS

div {
     background-color: yellow;
     border: 1px solid green;
     width: 150px;
     height: 250px;

     position: fixed;
     right: 40px;
     top: 60px;
}

p {
     width: 300px;
}

Relative Positioning

A bit more delicate to use, relative positioning can rapidly become very tricky if you’re not careful.
Let’s take for example some important text, situated between <strong> tags.

To start I’ll put a red background on it to make it more visible.

Code : HTML

<p>There's no doubt, <strong>this text is important</strong> if you want to correctly understand relative positioning.</p>

Code : CSS

strong {
     background-color: red;  /* the background is red */
     color: yellow;  /* the text is yellow */
}

When you use position: relative; and you apply top, left, right, bottom properties the text on the red background will be moved in relation to its original point.

I did say it was more complicated You just need to do a few tests to understand it.
Let’s take an example : I want the text to move 55 pixels to the right and 10 pixels down. I will therefore ask the left side to move over by 55 pixels and the top to move by 10 pixels :

Code : CSS

strong {
     background-color: red;
     color: yellow;

     position: relative;
     left: 55px;
     top: 10px;
}

The text is moved in relation to its original position :

That’s the main idea. It’s up to you to decide if you need it or not but at least you know how it works

Now that you know that, you’re ready for the next chapter…
But what was the next chapter again ?…Ah yes! It’s a practical exercise
The next chapter will not teach you anything new, but will interest you a lot : I’ll be showing you how to code a design from A to Z with what we’ve learnt