Web Development – Div & CSS Layout Number 1

0
8

Hi, Today I am going to run through a more complex Div and CSS layout, I will provide you with all the code required at the beginning of the post and then summarize it for you.

This layout will include:

– Top Header

– Vertical Navigation Bar

– Left Side Bar

– Content Area

– Footer

This will allow you create a template extremely quickly and effectively, also I will run through a couple of tricks to change the layout extremely quickly.

Okay here is the complete code with no external style sheet or images.

EpicWebs Template!

#header {

width: 960px;

margin: auto;

height: 130px;

}

#wrapper2 {

width: 960px;

margin: auto;

padding: 10px;

background-color: red;

}

#wrapper {

width: 940px;

margin: auto;

padding: 10px;

background-color: blue;

}

#navigation {

width: 940px;

height: 50px;

background-color:green;

}

#content {

width: 940px;

min-height: 500px;

background-color: black;

}

#footer {

width: 960px;

height: 50px;

line-height: 50px;

text-align: center;

background-color: yellow;

}

#sidebar {

width: 200px;

float: left;

min-height: 500px;

background-color: yellow;

}

Header Information

Now lets break the code down and look at how everything works. First of we have our basic html tags like the head, body and title tags. We also have whats known as an embedded style sheet, between the tags.

We start off by first laying out the DIV tags, nested between each other where necessary. For example the wrapper DIVs contain all of the other DIVs to keep them in position. We assign ids to our DIV tags so now we can reference them in the embedded stylesheet.

The stylesheet will reference each tag and set a height and width except for the DIVs which will need to expand once content is inserted, for example the content DIV. If you copy and paste the code into a notepad file and save it as index.htm you will now see exactly what layout this gives us, if you have any more questions regarding this layout/tutorial then please leave a comment below.

Quick Tricks

– If you switch the #sidebar css property, float: left to float: right, this will allow you to have a right sidebar.

– If you take the header div tag and switch it below the navigation tag you can have a top navigation, or you can copy and past the navigation above the header to have a dual navigation.

Good luck with your adventure in web design or development and remember to keep trying things and edit your website to keep up with the latest trends.

Source

Leave a Reply