What are the essential concepts you need to be good with laying out webpages?

HTML & CSS
1

Hello All,

I don’t quite know how to ask this. What are the essential concepts you need to understand to become good with Web page layout?
(example: Floats absolute and relative positioning.)

2

That’s rather a broad question :slight_smile:

The first thing you need is a basic understanding of css and how it works.

Then you need to know how elements with various properties interact with each other (e.g. static, relative, absolute and fixed positioning schemes, floats, display:table/cell etc, or any of the new css3 features such as flex and columns). Once you understand how things work then you can decide on what approach to use to create the layout in hand.

The most important aspect of all the above is what effect the properties you are using have on controlling the ‘flow’ of the page as controlling the flow of the page is the key to a good layout. That means basically that one element follows the next in a logical order and moving one element has an effect on the elements before and after. This allows you to increase or decrease content without having to re-code the whole page.

For that reason absolute positioning is only used in small doses and in controlled situations. Most of the time you will be using static (non positioned elements) and then using floats, inline-blocks or display:table-cells when you want horizontal alignment. Relative positioning is something beginners will rarely need in order to move things around but adding position:relative to an element is mainly used when you need to control stacking levels as z-index only applies to positioned elements.

Whichever property you choose will be based on the requirements of the job in hand so there is no one right way to do something but here is often a wrong way to do something.

If you are just beginning then perhaps you should first study floats, float containment and float clearing as they still make up a major part of horizontal layout these days (although that will be changing in the future with better css3 methods on the horizon).

The best approach is to study a little and then practice,practice and more practice :slight_smile:

3

It’s also worth mentioning that you need to understand the actual content in a document in order to be able to come up with a “layout” that enables visitors to understand and follow it.

Think of typical scenarios you may need to cater for such as:

  1. A product detail page
  2. A list of products
  3. An article page (eg news or blog) that has several components such as strapline, story, a video, a photo gallery, related links, author details and so on
4

Good point, I should have mentioned that :slight_smile:

5

Ah but you did all the more detailed stuff :wink:

6