:: Free article content
Authors: Maximum article exposure. Publishers: Reprintable article content.
Featured Articles
Recently Added Articles
Most Viewed Articles
Article Comments
Advanced Article Search
Submit Article
Check Article Status
Author TOS
RSS Article Feeds
Terms of Service

Web Design for Beginners: CSS Layouts
Home Computers & Technology Internet
By: Nick Thomas Email Article
Word Count: 819 Digg it | it | Google it | StumbleUpon it


It can be very confusing and often times difficult for someone new to HTML and CSS, equipped with an HTML editor such as Dreamweaver, to design a website on their own. There are many resources online that give advice, tips and methods for developing a website, but as most have realized that have tried implementing this information, it is not always correct or accurate. With this article, hopefully some of the confusion regarding the layout of a website - which is the foundation and the most important aspect of the site - can be cleared up so you can move onto the more exciting aspects of web design: inserting the content.

Frustration can arise when you start using the applications of your HTML editor to design your site and when you preview it in the browser, or publish it to the server, the text overlaps the background, the navigation is shifted up or down from where it's supposed to be, or the footer is floating up near the head - which in itself is not where it should be. These common errors are simply a result of improper website layout.

When I was beginning web design and experiencing these issues, I quickly realized that my best bet would be to learn to code HTML and CSS by hand, and not rely on any of the interfaces that the editors offer as "convenience". This was a daunting task at first, but very quickly it became apparent that HTML was a very simple coding language to learn. After a couple days of going over the syntax of tables, forms and contextual tags, I began designing my own layouts by hand - not using tables, but using DIV's...this was like finding the holy grail for website layouts.

Apply an id to a DIV, set the attributes of that DIV in CSS, and the simplicity of web design layouts was realized. Of course there is a bit to learn with CSS and how to position those DIV tags, but once you understand floats, margins, padding and positioning, you'll be able to design a website layout in about 20 minutes and be confident that everyone will see it pretty much the same as you, regardless of the browser they're using or resolution their monitor is set at.

Take an outside-in approach with the layout. If you're going to have a centered design, make sure that the width of the outermost container is set to a width that most screen resolutions will support without making the visitor scroll from left to the right. This typically is about 950 - 975 pixels. Once you set the width, simply apply "auto" to the left and right margin in the CSS style sheet associated with that DIV id, and like magic the site is centered...pretty simple. And of course if you really wanted to play it safe, you could set the width as a percent - such as 90% - but in that case, you need to make sure that the content within can expand and retract as needed without overlapping and without making the footer climb up to the middle of the page. So my advice would be: use pixels as an outermost width when using a centered layout until you're knowledge of padding and margins is at a more advanced level.

Page 1 of 2 :: First | Last :: Prev | 1 2 | Next

NTR Imagescapes is a Chicago area web design company which specializes in developing affordable websites for small to medium sized businesses looking for online portfolios, affiliate pages, shopping carts, membership systems and content management systems.

Article Source:

This article has been viewed 559 times.

Rate Article
Rating: 0 / 5 stars - 0 vote(s).

Article Comments
There are no comments for this article.

Leave A Reply
 Your Name
 Your Email Address [will not be published]
 Your Website [optional]
 What is two + five? [tell us you're human]
Notify me of followup comments via email

Related Articles

Copyright © 2020 by All rights reserved.

Terms of Service | Privacy Policy | Contact Us | Submit Article | Editorial