CSS Layout (1 Column)

CSS Tutorials

Tutorial

Click on thumbnailed images to enlarge

[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

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

Click to enlarge
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)

Click to enlarge
width: 800px
height: 284px
use: header image


Click to enlarge
width: 800px
use: repeating bg for the "main"

Click to enlarge
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:
<html>
<div id="wrap">
<div id="header"></div>
<div id="main">
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
</div>
<div id="footer"></div>
</div>
</html>



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:
/*start make-up*/
body {
background: url(layout/bg.jpg);
font-family: tahoma;
font-size:12px;
color:#fff;
min-width:800px;
}

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

div#wrap {
background: fff;
background-repeat:repeat;
margin:0 auto;
width:800px;
}

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)

#header {
width:800px;
height:284px;
background:#ddd url(layout/thehead.jpg);
}

This is where you are going to place your header image, make sure that the height and width match that of your image correctly
#main {
background: url(layout/main.jpg);
float:left;
width:800px;
}

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
#footer {
background:transparent url(layout/thefooter.jpg);
width:800px;
height:30px;
clear:both;
}

/*end make-up*/

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
<style>
/*start make-up*/
body {
margin:0;
padding:0;
background: url(layout/bg.jpg);
font-family: tahoma;
font-size:12px;
color:#222E3E;
min-width:800px;
}
div#wrap {
background: fff;
background-repeat:repeat;
margin:0 auto;
width:800px;
}
#header {
width:800px;
height:284px;
background:#ddd url(layout/thehead.jpg);
}
#main {
background: url(layout/main.jpg);
float:left;
width:800px;
}
#footer {
background:transparent url(layout/thefooter.jpg);
width:800px;
height:30px;
clear:both;
}

/*end make-up*/

</style>
<html>
<div id="wrap">
<div id="header"></div>
<div id="main">
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
</div>
<div id="footer"></div>
</div>
</html>


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

/*begin typography*/

#content {
text-align: center;
font-weight: bold;
font-size: 12px;
margin-left:50px;
width:650px;
background: transparent;
border: solid 10px #ffffff;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}


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?
<div id="main">
<div id="content">
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafds
</div></div>

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

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

h2{
width:400px;
border: solid 10px #ffffff;
margin-left:50px;
background: transparent;
font-family: tahoma;
font-size:16px;
color:#fff;
}

we've basically been over all of the code in this so i'll just show you where to plug it in and how.
<div id="main">
<h2>HOLLA</h2>
<div id="content">

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:
<style>
/*start make-up*/
body {
margin:0;
padding:0;
background: url(layout/bg.jpg);
font-family: tahoma;
font-size:12px;
color:#fff;
min-width:800px;
}
div#wrap {
background: fff;
background-repeat:repeat;
margin:0 auto;
width:800px;
}
#header {
width:800px;
height:284px;
background:#ddd url(layout/thehead.jpg);
}
#main {
background: url(layout/main.jpg);
float:left;
width:800px;
}
#content {
text-align: center;
font-weight: bold;
font-size: 12px;
margin-left:50px;
width:650px;
background: transparent;
border: solid 10px #ffffff;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
background:transparent url(layout/thefooter.jpg);
width:800px;
height:30px;
clear:both;
}

/*end make-up*/

/*begin typography*/

h2{
width:400px;
border: solid 10px #ffffff;
margin-left:50px;
background: transparent;
font-family: tahoma;
font-size:16px;
color:#fff;
}

</style>
<html>
<div id="wrap">
<div id="header"></div>
<div id="main">
<h2>HOLLA</h2>
<div id="content">
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdllll
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdlll
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdlll
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdlll
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdlll
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdlll
afsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdsafsdfdsafsdafdsfj dlsafjldsajfsdlkjfafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsafsdfdsafsdafdsdafdsafsdfdsafsdafdlll

</div>
</div>
<div id="footer"></div>
</div>
</html>



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

Tutorial Comments

Showing latest 10 of 20 comments

shit how to put it can you tell me

By emo-princess on May 9, 2009 10:59 am

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

By goth-nina on Oct 16, 2008 5:15 pm

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

By emmijane on Sep 11, 2008 11:07 am

can you upload the photos, there not working.

By ocean-breeze-13 on Aug 7, 2008 9:56 am

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...

By asiaface on Aug 1, 2008 8:07 am

confusing..please someone refresh this

By bloodyz88 on Jul 21, 2008 6:07 am

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

By 6thdarkfallenangel on Jul 13, 2008 9:51 pm

this is so confusing-.-

By Azngurl1993 on Jun 3, 2008 6:22 pm

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

By shomazta on Oct 24, 2007 10:10 pm

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

By Nieceebaby on Oct 15, 2007 4:24 pm
View all »

Tutorial Details

Author Heathasm View profile
Submitted on Feb 11, 2006
Page views 72,899
Favorites 50
Comments 20

Tutorial Tags