Going from tables to <div>. (part 1 - Creating your layout)
- October 24th, 2008
- Posted in General News
OK, what we will be accomplishing here is taking your Photoshop layout and mapping it out with CSS - div’s, instead of Photoshop’s default HTML - tables. In order to be successful in this tutorial you have to already know html coding, and some CSS experience is helpful as well.
Lets start off with the basics. Instead of using html and using table cells to hold our background images to form the layout, we will be using <div>’s which can act the same way but are alot easier to edit and format. for each <div> we will be attaching an id to it, so they website knows how to format the cell. So the format of the html coding is now <div id=”idname here”></div>. Now we got to set the parameters for the cell that matches that id name, this goes inside of the <head> tag.
Starting it off, I set the background color and image. For this one I decided to use
which is located at http://urbanm.net/blog/bg.jpg, the CSS coding for this is
body {
background-image: url(http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: #010066;
}
What this is doing is setting any html aspect that was coded with <body> to have the background image repeat it self horizontally until it fills out the whole browser, and the background image to match the bottom of the gradient we put in our image, so that it has a smooth transfer.
You should have something like THIS
Now we have to worry about the actual content of the site. I normally keep everything center aligned, so you have to center align everything within your <body> element. You can add <center> after <body>. So now your body HTML should look like the follow:
<body>
<center>
</center>
</body>
Time to put our banner onto the site. We have to create the cell that will hold the banner, in between ur <center> tags lets enter our first cell by placing a <div id=”banner”></div> there. Without setting the parameters to the id labeled “banner” nothing will appear, so we have to set the parameter of this cell with CSS. I will be using the following image as my banner.
#banner {
background-image: url(http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
}
What the above is saying is that any html object that has the id label of banner will have the above background image, and it will also have the height and width of the banner image which happen to be 200px by 800px. Our site is picking up now, it should now resemble something like THIS.
Now I would normally put the navigation bar, but I will discuss this step in Part 2 of this tutorial.
Skipping the navigation bar, we move on to the content boxes that will hold all our information. When making your image, remember that your will be splicing it in 3 different places, the top part, which will contain the header, for me I am a fan of rounded edges. The 2nd splice you will have will be the content image that will be repeating itself vertically in order to fill out the space you have filled out all your information on. The 3rd splice is the footer, once again I’m a fan of rounded edges. Here are the three images I used for this part. Header - Content Repeater - Footer .
When it is all put together it forms this box. Now we have to set up the HTML coding so that it allows for the images to form the box correctly. We will be using four total cells to form our content box. The first of the four is going to hold the other three cells inside of it. The purpose of this cell, you will understand later on with more comprehension, but this will basically allow you to change the text styles on the different pages you will be making if needed. So lets start the HTML , this is the new HTML.
<body>
<center>
<div id=”banner”></div>
<div id=”indexcontent”>
<div id=”header”></div>
<div id=”contentrepeater”></div>
<div id=”footer”></div>
</div>
</center>
</body>
Now we have the cells set up like we want, but now we have to set the id parameters for each label. This should look something like this.
#indexcontent {
display: block;
width: 600px;
}
#indexcontent #header {
height: 35px;
width: 600px;
background-image: url(http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
}
#indexcontent #contentbg {
background-image: url(http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
height: 150px;
width: 600px;
}
#indexcontent #footer {
background-image: url(http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
}
Whoa - that is a lot to be doing in one step right? Let me explain it for you and help you out.
Starting with #indexcontent, we set the width of it to 600px which is what my content box images are. We don’t set the height, so that it can expand and collapse depending on how much content you have in your cells inside of it. We set the display to block, so that the cell will expand to the correct amount of pixels on its height.
Next we got the #indexcontent #header, the dimensions are set to match the image size and we have the background image set to the correct location.
Than we have #indexcontent #contentbg, we have the correct image selected as our background image, and we need to set it to repeat-y, so that it repeats itself vertically to fit the cell size. I picked 150px for its height, just so you guys can see the repeating effect, you would change this to fit all the content you have within it.
Lastly, we have #indexcontent #footer, which is just the same as the header.
By now you should have your basic layout set up for you to finish up!
Stay tuned for Part 2, to explain how to make the navigation bar.
Do people still use the tag? Why not use CSS to center the content?
^ That should be the center tag.
[...] Going from tables to DIV. (part 1 - Creating your layout) [...]
The post really make sense to me… but if you try to check some of my video tutorials in connection to this CSS… for sure you will learn more… out of it…