Oct 21, 2011

281 notes

Layering: A web design essential!

There are multiple essential skills that you have to master to create a great web app. In this post I’m going to tell you about one of them: layering/positioning in HTML. Some (or most) of you may already know about them, for the other: This is a must read for you!

Layers in HTML are very useful for all sorts of things. A short list of what you should be able to do after reading this: 

I’ll try to go into the theory a bit, so you can apply the basic techniques to make your own implementations.

» Relative positioning

Let’s play a bit with positioning elements relative, no parent <div>’s or stuff like that yet. We’ll make a link, that’s positioned higher than the rest of the inline elements. 

(example1.html)

This is the markup, very simple:

And the styling:

We simply set the position of all <a> tags to relative, allowing it to overlap other elements. Then, setting top:-3px; we place the element 3px up, relative from where it was.

» We’ll continue with a simple image overlay

We’ll create a border effect for an image, that can be applied to every image. This will be the result:

(example2.html)

What we have to do, is place the <img>, then place another <div> above it, with the .png of the painted border: 

This can be done by placing the overlay <div> above the <img> in the .html document, then set the overlay <div> to position:absolute; This is our markup:

Then define the overlay class. 

We set the position to absolute, to remove the element from the normal document flow. The document will be rendered with <div class=”overlay”> at the position it’s supposed to be, but the next element in the flow will be rendered as if the <div class=”overlay”> isn’t there. The following <div> containing the <img> tag will therefore be rendered under the <div class=”overlay”>.

With background: url(overlay.png); we set our overlay image. The overlay image used is 400x200px, just like the image. We set the image as a background, to disable ‘Save image as’ (or something like that), via the right-click context menu. If you would use an <img> tag and the user clicks ‘Save image as’, the user only gets to see the overlay image. That’s usually not what you want.

We define a width and height, because the <div> is actually empty, but we want to whole background image to be visible.

» A square to display a date

Now, let’s try something just a little bit more difficult: create a square to display a date. For you blog post for example.

(example3.html)

To do this, we need to re-position our date <div> relative to it’s current position. Our markup:

And the definition of our .date class: 

We use two <div>’s - one with position:absolute; and one position: relative; instead of just one with position:relative; Setting the position of a <div> to relative will allow you to position it relative to it’s original location using left, right, top and bottom. However it doesn’t remove the element from the document flow! The document flows as if the <div> with position:relative; is rendered at it’s original location. If we used no inner <div> in the date <div> and style it with position:relative; this would be the result: 

If you set left and top for an absolute positioned <div>, the <div> will be placed relative to it’s first parent <div> that’s not set to position:static (which is the default). In this case, without using an inner <div> in the date <div>, but one <div> that’s positioned absolute, setting left:-20px; top:10px; places the date <div> 20px to the left, relative from the left side of the browser viewport (actually the side of <body>) and 10px down from the top of the viewport.

We use left and top to reposition the <div>. If you use left, the <div> is repositioned using the left side of the <div> as origin. Right does the same, but with the right side of the <div> as origin. Same goes for top and bottom. 

Setting the inner <div> of date to position:absolute; will work too, since it’s positioned relative to the parent <div> (that one’s not set to position:static;)

» Finally, we’ll create a popup window

Which is not even that difficult!

(example4.html)

Markup:

Styling: 

We set position:fixed; to place the element relative to the viewport of the browser. We then set left and top to 50%. We then set a negative margin, equal to half of the width and height of the popup <div> plus it’s padding! We’ve not defined the height, but we use an estimate of how large to box will be if it contains a regular message. In my case I’ve used an estimated value of 150px.

You can control which element overlaps which, setting the z-index. 1 represents the lowest depth. A <div> with z-index:10; will overlap a <div> with z-index:2; 

That was it. Now get to it!

  1. peeke posted this
About
Creative Blog by Peeke Kuepers

You can contact me at peekuep@gmail.com You can subscribe via RSS.