Thursday, 26 September 2013

Posted by Muhammad Naeem On Thursday, September 26, 2013

The Design

Below is the design we will be using as the basis of this tutorial. Our mission is to slice this puppy up using nothing but XHTML, CSS, and a few images:
First we need to identify the main structural elements of the design, so that we know how to structure our HTML document.
The web is very heavily based around rectangles, and we need to remember that when dividing up our design. These main divisions we make will end up being <div> tags. A <div> is basically a rectangular container that we can position using CSS.
The diagram below shows how we will divide the design.
We have identified 5 major elements:
  • Main Navigation
    The primary navigation for this website.  The images will change on hover (when the mouse cursor is on top of it).
    Width: 760px
    Height: 50px
  • Header
    The website header includes a background image (purely for aesthetics), and the company name.
    Width: 760px
    Height: 150px
  • Content
    The bulk of the website’s content will go here.
    Width: 480px
    Height: Changes depending on content
  • Sidebar
    This will have second-tier content that isn’t as important as the main content.
    Width: 280px
    Height: Changes depending on content
  • Footer
    Copyright information, credits, and an alternative text navigation.
    Width: 760px
    Height: 66px
This site will also be centered in the browser window.  We now have all the info we need to start.


Creating a CSS layout from scratch

Creating a CSS layout from scratch Creating a CSS layout from scratch Creating a CSS layout from scratch Creating a CSS layout from scratch

you are reading : Creating a CSS layout from scratch

Amazing content i did not see before thanks..
Naeem Sagar
Date published: 10/13/2015
4.8 / 5 stars
How this Post..

0 comments :

Post a Comment

Write some thing Good for us...........

Note: only a member of this blog may post a comment.