All about DIV s

Now we have to take a much closer look at the DIV statement. I apologize but this is going to take time. I found it very confusing the first time I tried to follow how they work. On the second time through I had a much better understanding. Writing the examples that accompany this post really solidified it in my mind. I hope you find this useful.

 

Divs define blocks on your web page. Those blocks typically contain images and text. The blocks follow each other vertically down the page. They can flow across the page. They can form columns, etc. Tables can also be used but I find div’s to be more flexible.

 

Begin by downloading the zip file and expanding it in a directory. These are example files I created that mimic the actions of the tutorial. If you try to follow the source code from the tutorial you will have a difficult time. Instead, read the tutorial then open my html and css file in what ever editor you have decided to use. The number in the name of my html and css file corresponds to the lesson in the tutorial. I suggest opening the tutorial in a separate browser/tab.

If you begin experimenting by changing my css files, be sure to save your changes to disk before trying to display those changes in a web browser.

 

My zip file

 

http://patrickdillonphotography.com/computer/blog/div.zip

 

Tutorial page

 

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

I have just a few notes to add to the tutorial.

 

First and foremost. ALWAYS comment your code. Be sure to comment where a DIV ends.

e.g.

<div id=”maindiv”>

            Lots of code and other divs go in here

</div> <!—End of Div id=”maindiv” –>

The <!– and –> define a comment in html.

If you don’t do this you WILL get lost at some point.

 

In lesson 3 my code places the div on the right but not at the top as stated in the tutorial.

 

In lesson 4, notice how the div1a is placed at the upper corner of div1. Remember div1a resides inside div1 (easy to tell if you code is commented!). The absolute positioning of div1a forces it to be placed over the text of div1. That is why the div1 text, id = “div-1” is not visible.

 

When going from lesson 7 to lesson 8 notice that I added width:100% to div1. Try it without the width property and see the difference.

 

So we didn’t add anything to the main page today. But divs can take a little time to master. Hopefully, that tutorial and my examples helped.

Next time we will add the logo and footer to a page. And if that isn’t too long of a post, we will also add the slideshow.


Leave a Reply