COLLAGE LAYOUT CODING TUTORIAL

This is a tutorial for a collage layout. This is NOT for preppy layouts.

In this tutorial, you'll be not only coding a layout, but splitting it into header, footer, style.css, and index pages for using php includes. This is how stylesheets are split too. This will save you time in the end.

CLICK HERE to learn more about php includes (it's a php includes tutorial of mine) if you don't already know about them than it might confuse you at first. They are amazing.

This tutorial should all make sense by the end. Try not to give up cause this sh!t isn't easy at first and it takes time and patience.

CLICK HERE for the finished layout. You can use this as a visual reference as you go.

THE STEPS: STYLE.CSS

1. Create a file called style.css This page will have the styling (like h1, affies, elites, so on) of your coding in it and the placement of your sections (header, content section, sidebar, footer, so on)

Start putting in each piece of coding I give you below. I will explain each piece too!

----------- We will start out with the main body of your layout. -------------------

body{
text-align: left;
background-color: #b0b0b0;
background-repeat: repeat;
background-attachment:fixed;
font-family: calibri;
font-size: 12px;
color: #888;
}

text-align: left : This places the text to the left.

background-color : This is the background color of the layout. You need a background color only if you don't have a background image.

background-repeat: repeat : This means the background image will be repeated both vertically and horizontally.

background-attachment:fixed : The background is fixed. It will NOT scroll with the container of the layout.

font-family : This is the main font for your layout. Do not use a pixel font for this, ever! You can google different fonts (like arial and verdana)

font-size : This is the size of the font you chose.

color : This is the color of the font you chose.

------------- This is the container of your layout. This is the ENTIRE layout, not just the individual sections like the content and sidebar sections. Basically the point of this is to keep the layout centered on a screen. ------------

position: relative;
margin: 0 auto;
width: 900px;

position: relative : The element is positioned relative to its normal position. If you don't understand this than it's ok. I'm keeping everything simple, but this part I can't explain simply. You can google and find more info on positioning

margin: 0 auto : This will make the layout sit centered on the page.

width : This is the width of the entire container.

-------------- Now we're on to the header part of the coding. { click here for example of header } ---------

#header {
position: relative;
top:0px;
left: -7px;
}

position: relative : This was explained already

top : This is how far down from the top of the screen your header will be. So for example, if you set this to 50px than the header will move DOWN the page.

left : This is how far from the left side of the screen your header will be. So for example, if you set this to 50px than the header will move to the RIGHT.

---------- Now we're on to the sidebar section of the layout { click here for example of sidebar } -----------

#sidebar {
position:absolute;
text-align: left;
padding: 2px;
background-color: #bbb;
top:470px;
left:659px;
width:245px;
}

position:absolute : I can't think of the words to explain this without confusing you. I'm keeping everything simple, but this part I can't explain simply. You can google and find more info on positioning

text-align: left : This was explained already

padding : Area inside an element. This is how much space you'll have between the sides of the sidebar and the text. For example, if your padding is 10px than you'll have 10px of space between your text and the edges of the sidebar

background-color : This background color will change the background color of the sidebar

top : This was explained already

left : This was explained already

width : This is how wide your sidebar will be.

---------- Now we're on to the content section of the layout { click here for example of content section } -----------

position:absolute;
background-color: #bbb;
top:590;
left:-7px;
width:656px;
padding: 2px;

I shouldn't need to explain any of this. If you've been following this tutorial than you should understand the pieces to this section.

♥------------------------------------------------------♥

CLICK HERE for PART TWO of this tutorial

♥------------------------------------------------------♥