CSS Layout (1 Column)

[size=1][font=geneva]In this tutorial I am going to try my best to teach you guys how to make a layout depending pretty much souly on css and div ids while also trying to explain the meaning of all of these complications x.X

Requirements of knowledge and mind (or else this will be damn hard for you to get due to small things)

Photoshop/image creating program
a logical weigh of porportions
patience
some css

part one:
create your image and slice it


all of thes images below were sliced from this image i
created in photoshop


use: repeating bg image for body (i like to make these cause color codes look diff in diff comp and browsers but if you use an image it is all the same)


width: 800px
height: 284px
use: header image



width: 800px
use: repeating bg for the "main"


width: 800px
height: 30px
use: footer image

I placed all of these images into a folder titled "layout" that was in the root folder that i was working in

part two
coding the first part of your layout:

okay so basically your html is going to be this after this part of the tutorial:



now the hard part is the CSS for the bit

The css will consist of (for right now):
body

and your div ids:
div#wrap
#header
#main
#footer

Now, this is the css code broken up into pieces:

This is the code for you body, make sure the min. width is the width of the layout image you created and sliced


the div wrap is what is going to keep your layout together and not all over the place. make it the same width as the layout you created (aka the number you put in min width in the body)


This is where you are going to place your header image, make sure that the height and width match that of your image correctly

this is the middle portion of your layout, we do not specify a height here for your background image because it needs to repeat down so that your content fits inside of it, therefore we only put the width to restrain it

This is where you place your footer image. the "clear: both" code is what puts your footer at the bottom of the layout. Make sure to specify the images width and height for this too like you did for the header image.

this should be the code that you have so far


With all of the above, you shoudl now have some thing that looks like this

[url=http://www.ill-wed.com/andnow/tutorial.html]http://www.ill-wed.com/andnow/tutorial.html[/url]

Notice how the text is all ugly? :tongue: We are going to fix this in

part three
more div idsss :D

Now that you have alllll of the code from parts 1 and 2, to fix the text and make iall pretty add this New ID to your css



Okay, to break this code down. I centered the text with text-align, pushed it away from the left side of our layout so that its not overlapping our "background" and is inside of the white stroke. I made the background transparent so it will see through to the #main's repeating bg and added a 10 px white border around any text that is to be entered inside of <content></content> tags Now if you took out the padding that i added, then the text would look like it were crammed inside the box, but with it there it is 10 px away from each side of the border for neatness :D.

So, where do we place this ID?

right where teh <content></content> tags are

I also added a tag to the css as a "header"


we've basically been over all of the code in this so i'll just show you where to plug it in and how.

Right above your <content> tag! easy squeezy

your final layout should look some thing like this:
[url=http://www.ill-wed.com/andnow/tutorial1.html]http://www.ill-wed.com/andnow/tutorial1.html[/url]

your final code should look some thing like this:



its not as much as you would think :)[/size][/font]

shit how to put it can you tell me

image links are broken. but i bet you knew that[:

good god theres only 6 CSS tutorials on CB

i wish we had more
and more explainable ones at that!

im sick of plain html

can you upload the photos, there not working.

I like this tutorial it is great, although the pics dont work...
you probably don't understand it b/c you don't really know any CSS.
yeah...

confusing..please someone refresh this

yeah upload the pix how do u expect to help people?

this is so confusing-.-

woah its been a year since the links went bad... doubt this person will be back to fix the images ;)

man this tutorial seems like it would help alot just cant see the pics...hope u come back and change it soon thanx =)

View all »

Author	Heathasm
Submitted on	Feb 11, 2006
Page views	75,054
Favorites	50
Comments	20

layout, 1 column