How to Build a Basic CSS Layout


basic-css-layout.jpeg


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.








Location: Noida, Uttar Pradesh, India

Comments

Post a Comment

Popular posts from this blog

SEO Page Analysis - Check Your Website SEO

Image
Every time new algorithm updates get released in the field then it has been seen that the businesses are left scratching their heads with the unpredictability and the uncertainty as to what will happen next to their existing rankings. While for some of the websites this can be good news as they can rank higher and for some of the websites it becomes bad news as who knows it can make them grow or make them collapse in the ranking of SERPs. SEO Page Analysis However, there is no need to panic as there are various options that are available to analyze the pages of a website. These are often called the page SEO analyzer. These are basically the analysis tools that are used for information and guidelines in order to make your website better. Here are some of the tools of the SEO analyzation that are available on the web that can be used to improve the SEO strategies of your website.  1. Google Webmaster Tools Google wants to see the user’s site progress rather than
Read more

Laravel Tutorial

Image
Laravel Tutorial Point for Beginners Laravel is generally known as an open-source PHP framework that is famous to be robust and extremely easy to understand. This is known to follow a model-view-controller design pattern that is known to be extremely frequent in this type of framework.  Laravel Tutorial Point Querying databases helped by the help of various simple chain methods, Laravel tutorial for beginners will let you known very important things about it like it is known to incorporate a query builder.  It usually delivers the ORM (Object Relational Mapper) and ActiveRecord implementation that is very commonly known as Eloquent. This framework focuses on the end-user first which simply means that its focus is on simplicity, clarity, and most importantly on getting the work done. The web application that is designed is more structured and pragmatic. A rich set of functionalities is offered by this framework that is known to incorporate the basic features of
Read more

JavaScript Tutorial Guide for Beginners

Image
Introduction JavaScript is generally a programming language developed by Netscape business. In recent months, the language has gained quite a lot of attention because it helps web developers to change user behavior as well as site content in such a way that it is not possible to use standard Markup software or even CSS at all. Using JavaScript on a web page allows the author to track how his client responds and operates on particular user behavior, inspects the application elements shown on the client, validates the form options before uploading them, reviews native browser information, sets cookies for different operations, applies date and time to the page, and even embeds basic mini-games on the website. If you have a fundamental understanding of OOPS definitions and HTML, the full vocabulary is easy to grasp and understand. Software and Knowledge Needed Until starting with the new vocabulary, you need to have a good understanding of the HTML head and body
Read more