wayne on November 11, 2008 

What is a div tag?  Do you know?  Most likely your blog is arranged and structured by using 'div tags'.  Divs are nothing more than boxes on a 2 dimensional surface that can either contain information or other divs and objects. 

If you look at my blog, you will see that it's pretty 'boxy'.  Boxy, but good.  There are about 30 to 40 div tags that comprise the entire interface that I call my digital home.

It's a box people.  Nothing more.

If you look at the code that defines the template on you blog, you'll no doubt see the following:

<div>....then sometime later, you'll see the ending...</div>

That's a good start to define a div, but to make things a little more clear, I'm going to add a little style to the div tag so we can actually look at it.

Giving a div some style is what will make the nice background colors, a nice border, as well as defining what its dimensions are.  We do all this with the style property of the div tag.  Here's what it looks like:

<div style="border:solid 1px #000;
width:100px; height:100px; background-color:#ffcc44;"></div>

The above bit of code, when it displays in a browser will look exactly like the dirty yellow square you see to the left.  Let's take a quick look at how this works.

First off, you'll notice that the style property is defined inside the opening tag of the div.  The structure for any property of an HTML element is style="css property:values here".  To break it down even further, the style tag can also be considered to have properties within properties.  This is proved by the values within the style tag being in the format of PropertyName:Value.

First we define the border:
border:solid 1px #000;

Then we define the width and height of the div:
width:100px;height:100px;

Finally, it's filled in with some random color for effect:
background-color:#ffcc44;

Each of the property value pairs for the style tag are ended and delimit themselves with a semicolon.  As you might imagine, there are a plethora of properties and values, how can one learn them all?  Easy, you don't....at least not all at once.  Take a little a time and do some discovery now that you know what a div is.  Over time, you'll end up learning more and more.  One new thing each day, and in a year you'll know more than you thought you would.

Now lets change it around a little and maybe shine a light on tags for those not yet caught up with us.  Here is the same div tag with some text in it.

<div style="border:solid 1px #000;
 width:100px; height:100px; 
 background-color:#ffcccc">This is some text</div>

Again, I have reformatted the above to conserve space.  All I did here was add some text to the inside of the div.  By looking at the code, it should be apparent how this was accomplished.

Taking things a little further, let's start to play around a bit.  In this next one, we're going to place a div within a div.  This will define the basics of how templates are built, so hang on.

<div style="border:solid 1px #000; 
     width:200px; height:200px; 
     background-color:#ffcc44">
         <div style="border:solid 1px #000; 
               width:100px; height:100px; 
               background-color:#ffcccc">
         </div>
</div>

So, here we have a div within another div.  Of course, I've made the bounding div twice as big so you can see that there is indeed two divs here.

We could continue to add more and more divs depending upon what we are trying to achieve, but I'll only take it this far for this post.  What I've shown you above is the basis for defining the structure of your blogs template.

More Information

Of course, I'm not here to teach you how to code, but rather to help you help yourself.  If you are truly interested in learning, you will.  But you'll probably need to know a little about how to teach yourself.  That will be a post coming up in the near future.  Subscribe now so you won't miss it.

There are several options at your disposal in terms of styling a div.  I've only scratched the surface here, but I feel this surface needed to be scratched.  I've been asked about templates, and I'm going give you everything I can to help you learn and understand how to do basic html manipulations yourself.

To learn more, here are some great resources that pertain to the information above.  As always, I invite everyone to ask questions.   If you have any, please leave a comment and myself, or someone else will answer for you.

W3Schools CSS2 Reference - This is a great resource that will show you all the available style properties, and what browsers they work on.  Clicking the property will provide further detail such as possible values for each property.

My links page has several color helpers where you can find a color and the associated hexadecimal color code.  Just check out the Web Development Links section.

Permalink or Trackback Comments (7) Web Design
Technorati: No reaction yet!

Tags: html, css, div, web design
Actions: E-mail

Can you dig it?

If you liked this or maybe found it helpful, please digg it, stumble it, buzz it, whatever it, to say thank you.

 

 If you would like to receive these posts as they happen, you can subscribe to my feed or receive my posts in your email.