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