PDA

View Full Version : 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>
<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?



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



Now, lets do our banner.



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.



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

Want to hide these adverts? Register an account for free!