HTML Divs for the noobies

~~Implosion~~ · 28-11-2007, 08:49 PM

Howdy! I'm assuming you're local with HTML & CSS.
Righty! Lets start you off on how to make a simple boxed layout.
Using the one and only HTML & CSS.

[Note this for basic]

Ok, Lets get our main tags up!

HTML Code:

<html>
<head>
<title> First CSS Layout </title>
</head>
<style type="text/css">
</style>
<body>
</body>
</html>

Now, lets get into making the main containers!

Lets do our body first shall we?

HTML Code:

body {
height:100%;
width: 100%;
background-color: green;
}

Now, lets do our banner.

HTML Code:

div#banner {
height: 200px;
width: 100%;
background-color: red;
}

Now, i'll repeat this process, editing the height and width.
Although no need for me to spam this up! Just set your containers with your color, height and width to fit int your layout needs.

The HTML Part

In your body section, lets do our banner.

HTML Code:

<div id="banner">
In here put your image or text
</div>

This is the same process with just sorting out the div preferences.
I.e = Height, width, color, text inside it. Etc.

Hope this helped.

MrCraig · 28-11-2007, 08:58 PM

Erm..

Isnt there a CSS guide alredy in tuts? :S

Maybe put background images in instead of colours.

d17c · 28-11-2007, 09:01 PM

Yeah there's already one that explains it a lot better and in alot more detail

Mentor · 28-11-2007, 09:08 PM

Did you just set the bodys width and height to 100% or did i imagine that O.O ... (a div is most likely going to be 100% of its own size, when you dont tell it anything differnt)

craigg. · 28-11-2007, 09:11 PM

Depends on the browser Carl; some browsers only size the div to it's content so if you have no content, the div will not show. I think you need a lot more comments and notes for this to be a good tutorial. All you really say is do this and do that, it would be good to show the user a step by step guide and possibly images or external pages. Nevertheless good to see you passing on your skills.

~~Implosion~~ · 28-11-2007, 09:13 PM

Meh, i'm not so good explaining, so I tried it out.
Came out better than expected.
Thanks a bunch Craig

MrCraig · 29-11-2007, 04:49 PM

Maybe go on to explain the diff between classes and ids?

Cos right now, its pretty much basic knowledge to everyone on this forum.

Mentor · 29-11-2007, 05:17 PM

Originally Posted by craigg.

Depends on the browser Carl; some browsers only size the div to it's content so if you have no content, the div will not show.

Which browser might this be as ive yet to come across one with this behavior? Even IE manages to implement that one right. Spans are the ones that size to there content.

Zroc · 29-11-2007, 05:20 PM

The problem I have with making websites is getting my PNG template image into Dreamweaver, and turning it into a site..

craigg. · 29-11-2007, 05:25 PM

Originally Posted by 01101101entor

Which browser might this be as ive yet to come across one with this behavior? Even IE manages to implement that one right. Spans are the ones that size to there content.

http://craig.recoding.net/test/test.html , I think I may have misread your post so I'm confused slightly now. Have a look at that. Two div's one with, one without text but only one shows.

Thread: HTML Divs for the noobies

Thread Tools

HTML Divs for the noobies

Posting Permissions