Return to site

How to Build a Basic CSS Layout

CSS Layout

· css layout,css tutorial,basic css,css template,css layout build
basic-css-layout-tutorial

Given the benefits described in my previous post, designing without tables by using CSS templates is quickly becoming the new norm on the Web. Web browsers used in these days are now able to efficiently render web sites. I will attempt to create a simple 2 column CSS style in this article which you can use for future design projects.

1. Divide the website into parts - you can build different divisions on your web page with the div I d tags. They are marked as having a special I d. You may then apply a template (CSS selector), which refers explicitly to the I d's column. Note to use the DOCTYPE (to correctly render the content in the browsers) and meta tags (allows search engines to crawl the pages).

Wrapper: is the div that wraps the site items around all the other divs like a jar.

Header: Sets the top of the list banner

Main: Sets the home page material

Nav: Defines web navigation

Footer: specifies page footer and sub-navigation

2. Creating the CSS code - The CSS code styles the website as a 2 column CSS interface based on a navigation bar and a footer. The div#wrapper design produces the clustered box that serves as a shield for the material on the rest of the web. The width: the law of 80 percent determines the div range. The background-color:#FFFFFF rule for div produces a white backdrop.

Fixing margin-left: default and margin-right: default is the proper way to center a block-level feature with CSS. This instructs the user to measure equal margins on both sides automatically, thereby centering the div. The boundary: thin solid rule # 000000 adds a ring across the outer div. The remainder of the CSS code styles the header, footer, nav, and key element divs.

The styles of div#header and div#footer set the margins and padding for those divs. Additionally, div#header includes the text-align: center rule for centering the header text, and div#footer includes the border-top: thin solid # 000000 rule to produce a border across the top edge of the div to fill the horizontal rule above the foot in the table-based layout.

3. T-h-e div#nav and div#main types build the two columns in the central box halfway through. The float: left rule in the div#nav form moves the div to the left side of its parent item (the wrapper div), and the width: 25 percent rule limits the div's length at 25 percent of the object.

With the nav div floating to the left and restricted to a fixed distance, the main div allows space to push up to the right of the nav div, thereby providing the two-column impact. The div#main form contains the margin-left rule: to keep the main text placed in a tidy column instead of extending below the nav column by 30 percent. The left margin of the main div is set to a value which is marginally greater than the nav div distance.

If links are put elsewhere on the list, the same property would be inherited as above .. a blue relation that hovers to red. What if you want to create another series of ties that are a different color that is highlighted as you run your cursor over them.

4. Build the bottom navigation - I use div#footer and code each link accordingly, to include this in the page section. I use display: inline to make the list go horizontally; now that I've done making my style sheet, I want to simplify the code on a page by comparing it to my style sheet outside. This is how to:

1. Create an alternative style sheet - copy and paste all the CSS code in the notepad (without such tags:) and mark it as "style sheet." Place this style sheet in between your web page head tags.

It will lower the code on your website so it will load faster plus the search engines will crawl your web page more effectively.

2. Add content to your page - You can add more content to it after you have your page looked correctly. Simply editing one style sheet will quickly make changes to every theme on the website (or the web site).

3. Upload your files - ensure your web pages and style sheets are imported to your server's root directory.

4. Be sure to verify the file XHTML: http:/validator.w3.org/ and CSS file: http:/jigsaw.w3.org/css-validator/ and create corrections where appropriate.

5. Check browser stability and screen size - test if the website is fine for common browsers (IE6, NN7, Firefox).

If you start with CSS tutorial templates then gradually enforce by making minor improvements to your pages, i.e. having a style sheet only for your key headers and fonts. When you become more familiar with CSS, CSS templates can gradually be used to construct all your potential pages.