Clarifying CSS

I know the main point of CSS is to format websites without tables, but I would like some clarification on the steps designers take when setting up their websites.
I’ve been wanting to get into website design so in order to practice I decided to make mock-up designs in Photoshop and then learn by experience by trying to code them.
I don’t want to develop bad habits though, so I wanted clarification on how websites are laid out.

When designing a website do coders simply make containers for every element of the design and then place the image/text in them?

It’s really hard for me to explain so I’ll provide a diagram.


I doubt they are called containers, but that’s the only word I could really think of.
Is my idea of how websites are laid out correct? If not, please correct me to the best of your ability.

No it’s not. Read this:

Thanks a lot. I guess I really need to start from the beginning.
I don’t have a teacher or anything so this seems like a great place to start.

Yes, it is :slight_smile:
And there are some real css experts in this forum too, so I’m sure they’ll get you on the way :smiley:

You should logically think before you start a website (if needed, for beginners, you should. Even I take a few minutes just to realize what code I’ll need. It really does increase my time.) about what structure you will need. Just by looking at the quick mockup, you’ll need a headder, with a nav inside that, then a wrapping element that will contain 2 floated columns and then finally a footer.

Use <div>'s to layout your site because they are divisions in the page. They structure your site. Use proper semantic elements that fit the needs of your page. Just take it one step at a time :).

That’s the general idea, but don’t make more elements than necessary. That’s the rule: use as many elements as necessary, but don’t add any frivolous ones. There are no HTML 4 semantic layout tags (all DIVs are all the same).

Some exercises that you want to try include trying different combination of n-column layouts, fixed and liquid layouts, and putting the content before the navigation (that might be a challenge).

My advice is to sit down with a good book on CSS and get the whole picture. A good one is Stylin’ with CSS. The good thing about a book is that it’s carefully worked out from beginning to end, so that you don’t inadvertently miss steps along the way.

A lot of questions appear here because people have learned in a haphazard way without a proper overview of what tool to use for what purpose.

I’ve been wanting to get into website design so in order to practice I decided to make mock-up designs in Photoshop and then learn by experience by trying to code them.

Practice is a good way to learn :slight_smile:

However, you do need to understand the basics first so that you can start coding in the correct manner.

One of the hardest concepts that beginners fail to grasp is that a web page is not the same as a printed page and you can’t just stick something here and then something there and expect the rest of the page to avoid it.

In most cases you need to control the flow of the page above all else.

One element should follow another element logically and in the flow of the document so for example if you go back at a later date and change the content in the header then the rest of the page automatically re flows to accommodate.

Use minimal absolute positioning and only use it in controlled situations where you can account for it without upsetting the flow of the document. Most times you will just use static elements and use margins to maintain spacing between them. For horizontal alignment use floats and make sure that they are cleared when you want to regain the flow of the document.

This document flow concept is the most important to grasp because it allows websites to breathe and accommodate changes easily.

Use correct and semantic elements for the job in hand. I navigation is suaually a list so use a ul structure (no need for a div). Headings should be heading elements and paragraphs should be p elements and so on…

Use divs to logically divide a page into sections but as mentioned above don’t over-use them. Only add when needed or to make a layout more robust or to give a logical structure.

If you have a two column layout then create two div containers for each column and then float the whole columns and stack your elements inside. Don’t create multiple left and right elements as that will fail.

Most pages have a defined structure that can bee seen without getting too detailed about it. e.g. Page wrapper, Header, 2 main floated columns and footer. You can create these elements first and then work on the finer detail of the inner elements working from the top of the page and downwards.

Once you’ve practised on a few layouts you will run into most of the issues that you will always come across so try to remember all the bugs and fixes you run into (or write them down to instil them into your brain).

During development validate the css and html at regular intervals and not at the end to weed out any inaccuracies before you build a whole page on something invalid. Also during development get as many browsers as you can locally and check in each as you develop. Don’t wait until the end because that will always result in a shock and then will be too late or too hard to make the changes needed.

Thanks for all the great advice, I’ll definitely look into some of these suggestions.

Generally it’s a case of using only the elements and properties you need, as and when you require it. No-one likes padding or unnecessary code (one of the reasons why we moved from tables to CSS), what I personally recommend to beginners is to add your content to the page and stuff like navigation… all the bits and pieces you want to appear, THEN you start using HTML and CSS to mark everything up (alongside styling it to appear as you require). If you find yourself needing a container to get an effect, add one. It’s pretty much that simple, just work from the ground up and start by marking up the content and building up the style attached to that HTML layer by layer and level by level, it’ll make your life a heck of a lot easier in the long run :slight_smile: