In this post we will have a look at layout and navigation options available in CSS3.

Layout

There are majorly two approaches for designing the layout of the page: fixed layout and fluid layout.

Fixed Layout – This type of layout is easier to implement as in this layout the size of the content does not changes with the size of the browser. So no matter what our page occupies the same size at any point of time irrespective of the resolution or size of the browser.

Fluid Layout – This type of layout requires more work as whenever the size of the browser changes then our page has to respond to changes by adjusting the page layout and size.

How to design the layout of our page

  • Identify your content
  • Add the content to the web page
  • Arrange the content inside the boxes
  • Use float to make the user interface fluid

Currently our page looks like the image shown above. Let us redesign our page into column based layout and to that we will move the About CSS3 section to a column in the right.

* One important thing to remember is that if want some content in a column then it should be defined before the main content.

So let us take the aside which has About CSS3 content and move it above the article itself. The next step is to assign a class .sidePanel to the aside.

Now we add another section just below the previous one.

Currently our page looks something like below.

 

Layout

Layout

Now let us create a new class .sidePanel that we assigned to our aside.

 

However our page still does not look like we would want it to. We have the main content and side panel running into each other and the main content getting distorted because of the side panel.

 

Layout

Layout

To work around with issue we will do 2 things:

  • We will add a class .mainPanel which will have the right margin greater than the width of the right panel.

 

  • Reduce the height and width of the image so the that it fits nicely.

 

So finally the code for our webpage looks something like below

And the page looks like

Layout

Layout

Navigation

In a website navigation is generally done by the use of links and these links do nothing but take to a different webpages.

To create a navigation bar we will start off with an ul with the list of links that we want to use in the navigation bar. So let us create a list of links just above the main div.

 

We have added 4 links and these will appear at the top of the page. So this how our page looks now. We see the background styled because of the ul styles that we have specified before.

Navigation

Navigation

Now we will remove the bullet style form the li. We will add a new style for ul.mainMenu and reset the list style to none and will make the bullets disappear.

Let us remove the padding and margins as well.

 

And now the looks much better

Navigation

Navigation

Now let us take the block level ul tag and make it into an inline tag so that there no new line between each entry. So now all the links will appear in one line.

Navigation

Navigation

 

We can now style each li to look like buttons so let’s go ahead and style the li with color, border, etc.

 

And now this is how our page looks like

 

 

Navigation

Navigation

 

The code for this post can be found here or @ mirror

Any questions, comments or feedback is most welcome.