NOTE: These archives, as well as ALL posted material on Virtual Assistant Forums, is copyrighted and may NOT be copied to another site under ANY circumstances unless otherwise noted. Please respect this free community feature!


Codehead: In this session I want to go back a little and cover some ground to give you a solid understanding of HTML and CSS.

Today I want to talk about the 'Box Model'.

If you read the past classes, you have some understanding of HTML and CSS already and saw a DIV in action.

The DIV element which stands for 'Division' defines a division on the page, let's call it a box - hence the box model.

I will use the terms 'DIV' and 'box' interchangebly from this point on...

Modern web pages are made out of a bunch of boxes, for example, in session five, we had a box around the whole page, it was <div id="main-wrapper"></div> and it was a big box that was holding the whole page inside it. In that case <div id="main-wrapper"></div> helped us create a centered page that we couldn't create otherwise (unless we used tables which are now obsolete in terms of webpage layout design).

Now let's look at a sample page, http://blog.code-head.com/ for example. Go ahead and open the page...

There are many boxes that help create this layout, as you might have guessed there is a big box that is holding all the content, it is a DIV with the ID 'main-wrapper', exactly like the one on session five. In this case, my 'main-wrapper' has a border and a white background.

The other DIV is one that is hodling the logo and the menu, it is called 'header' and as you can see it has a blue background but no border.

Under the header box, there are two boxes side by side, one is holding my content or blog posts and the other one is my sidebar on the right.

As you might have noticed, the sidebar DIV has a left border, you can see that this border only extends as far as there is content in the sidebar.

Each blog post is also inside it's own box, these boxes don't have borders.

If you scroll all the way to the bottom of the page, you will see the footer DIV which has a blue background and no border.

As you can see, some boxes are not even visual, they are only there to aid us in creating these complicated layouts, to arrange them side by side or in any way you can imagine so you can create nice, complex, elegant yet simple designs.

From what I explained, you can guess that my blog is laid out something like this:

Code:

<div id="main-wrapper"> <div id="header"> Logo and menu </div> <div id="contents"> Blog posts </div> <div id="sidebar"> Sidebar contents </div> <div id="footer"> Copyright info </div> </div>

Note how simple and elegant this is.

Also note that these ID names could be different, you might choose to call it 'copy' instead of 'footer' that's up to you but I suggest that you choose a logical name that makes sense for each section.

You can create the same design with tables like this:

Code:

<table width="800"> <tr> <td colspan="2"> Logo and menu </td> </tr> <tr> <td width="600"> Blog posts </td> <td width="200"> Sidebar contents </td> </tr> <tr> <td colspan="2"> Copyright info </td> </tr> </table>

This is wrong, tables are for displaying table-like content like an excel document - not creating layouts, and it's also ugly, obsolete, code on top of that.

[Cont'd in next post]

__________________
Get the BECOME A VIRTUAL ASSISTANT eBook!
Feature your business in the VAF Directory
Learn how to Create a New Client Welcome Packet

Codehead: Tables just don't make sense when creating web page layouts. But 'divisions' are very clear and make good sense. Our meaningful IDs also help make them even more intuitive, if you read that code later, you know exactly what <div id="header">...</div> is or exactly what <div id="contents"> ... </div> is; But how about: <tr><td width="600">...</td><td width="200">...</td></tr> yuck!

There is also a notion of classes along with the IDs, so you could style a paragraph like this:

The CSS:

Code:

.indent { padding-left: 20px; }

The HTML:

Code:

<p class="indent">The indented text</p>

When you are targeting a class in your CSS, you use a dot or '.' (Instead of '#' which is for selecting IDs - discussed in Sessions 4 and 5).

So we could style our 'main-wrapper' using a class like this:

Code:

.main-wrapper { ... }

In HTML:

Code:

<div class="main-wrapper"> ... </div>

But sometimes, using ID is more appropriate. The difference is that ID stands for 'identifier' and an identifier is unique, but a class on the other hand refers to a whole class of things. For example, there could me more than one indented paragraphs on one page so they should belong the the indented class.

Likewise, we will only have one 'main-wrapper', one 'header', one 'content' and one 'footer' so ID is more logical in this case.

Now let's look at these boxes closely, a box is a triangle, it can have 'width', 'height', 'border', 'margin', 'padding', 'background color', it's own 'font', it's own 'font color' etc. So when you create a DIV it will have all of these properties.

Now let's take a closer look at a box, point your browser here: http://www.virtualassistantforums.com/courses/box1.html

Right click on that page and click 'View Source' (its 'View Source' or similar in every browser - to allow you to see the source code of that page), and you will see that there is one DIV on this page, it is not styled so you can't visually see it on the page, but it's there - and you can see it in the code. The default behaviour is that a DIV is not visual.

Let's look at another example: http://www.virtualassistantforums.com/courses/box2.html

Go ahead and right click on that page and view the source code, you can see that I changed some of the properties of this box:

Code:

.test-div { width: 100px; height: 100px; border: 1px solid #000000; }

I set it's height, width and border. For the border property, there are 3 things you can set, the first one '1px' is the thickness of the border, the second one 'solid' is the style of the border line (a solid line), other options are 'dashed' and 'dotted', finally '#000000' is the color of the border.

You can see different styles of borders in the following page: http://www.virtualassistantforums.com/courses/box3.html

View the source and study the code on this page as well.

Notice how they are right on top of each other, we can move them apart by setting another property, and that is their 'margin', so let's add a 4th box and set it's margin property:
http://www.virtualassistantforums.com/courses/box4.html

View the source and study the code.

So as you can see, by adding 'margin: 10px;' we added a 10 pixel margin around the 4th box, but the margin is applied to all of it's sides, that is 'top', 'right', 'bottom' and 'left'. You could choose to only add a margin to either side of the box if you wish, for example, the fifth box here has a 'margin-top' (only):

http://www.virtualassistantforums.com/courses/box5.html

View the source and study the code.

As you can see the last box doesn't have any space on the left side.

You might have noticed that there is a lot of 'duplicate-code' in our css, every single box has 'width and 'height' in common, and you mighe be wondering, wasn't one of the points of CSS preventing this from hapenning?

One way to fix this 'duplicate-code' issue is to introduce a class called 'box' that has these 'width' and 'height' properties and apply that to ALL of our DIVs:

http://www.virtualassistantforums.com/courses/box7.html

View the source and notice how we got rid of all the duplicate-code.

There is one more point here, the DIVs have 2 classes:

Code:

<div class="box test-div-solid"> ... </div>

A DIV can have as many classes as you want, as long as you separate them with one space like:

Code:

<div class="class1 class2 class3"> ... </div>

This is not true for IDs, that is you can not have this:

Code:

<div id="id1 id2"> ... </div>

Another way to fix the 'duplicate-code' issue using CSS is to wrap all the boxes in one big box called 'boxes' and the set all of their heights and widths at the same time:

http://www.virtualassistantforums.com/courses/box6.html

View the source code and notice how all of the DIVs are now inside a parent DIV called 'boxes', also notice how in my CSS, I'm targeting all the boxes inside this parent box:

Code:

.boxes div { width: 100px; height: 100px; }

This tells the browser: find all the DIVs inside the DIV with 'boxes' class and set their 'width' and 'height' to 100 pixels.

The parent DIV is called the 'parent element' and the boxes inside of it are called 'child elements'.

You can use either of these two techniques in your designs, you will see that sometimes one is more appropriate than the other.

We can also have padding inside the boxes so the text is not very close to the border, open this page and notice the last box with padding:

http://www.virtualassistantforums.com/courses/box8.html

View the source code and notice this style rule:

Code:

.test-div-padding { border: 1px solid #000000; margin: 10px; padding: 10px; }

Also notice that the box is now a little bigger, the padding added more width and height to the box, if you measure it on the browser, the box is now 120 pixels in width and height. So padding adds to the size of the box it's applied to. The box itself was 100 pixels, 'padding: 10px;' added 10 pixels of padding to all of it's sides. That is 10 pixels to it's right and 10 pixels to it's left and if you add that to 100, it's 120 pixels. Same for top and bottom.

Just as we can have 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left', we can have 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left', we can also have 'border-top', 'border-right', 'border-bottom' and 'border-left'.

We will build on this in the next session and we will create a more complicated layout. We will place boxes side by side to create a sidebar or a two column layout.

Please go ahead and ask me any questions you might have by replyig directly to this thread.

Session seven will continue to build on what we've discussed so far.

__________________
Get the BECOME A VIRTUAL ASSISTANT eBook!
Feature your business in the VAF Directory
Learn how to Create a New Client Welcome Packet

Just wanted to say THANK YOU to both Tess and Hamid for the HTML & CSS "classes". Though I'm a little late, I'm learning sooooo much.

I took an online class a terribly long time ago and never truly understood what I was learning. With these lessons that is not the case. Hamid, you are a brilliant and wonderful teacher.

I'm starting to feel confident that web design is a road I'll be traveling down in the future.

Again, thank you!

__________________
Eyreka

Eyreka, that is wonderful to hear! Thanks for letting us know. Hamid is a great teacher! I know I have benefited from his brilliance as well - we're planning session seven soon so stay tuned!

__________________
Stuck in startup? Stop dreaming. Start DOING!
Get the Become a Virtual Assistant eBook for just $29

This is SUPER! I will be starting with Session 1 tomorrow. My son built my website with html and I know a very minimal amount about it. I want to be able to go in and make changes myself without having to ask him and this will help me do that.

Thank you!!

Pam

__________________
Pam Deyerle - Transcriptionist in the Richmond, Virginia area
The Perfect Word Transcription Services