Zen: Reshaping the Divs

In the previous article, I considered the structure of the code and how the default CSS was set to configure the page. Once I had this information in hand, I could see better if and/or how the div boxes were going to be influenced by each other and their applicable CSS. My next step was to take the div boxes and move them around so that they resembled the page layout I actually wanted to see.
Using div boxes to create a layout
In my last article, I used HTML tables to illustrate the code layout and CSS together. Another way to illustrate the div-box-framework is to simply draw the boxes. You can use any tool that you are comfortable using. I used PowerPoint because it was fast and easy to share with you.

  • In this first PPT, you will see the code boxes for the Zen page.tpl.php page.
  • Then I took the default and started moving things around. I create a second PPT and moved the boxes around to create the layout that I was looking for. In this same PPT, I then converted the layout to code structure so I could see where the code needed to be.
  • Then I created an HTML version of the new layout so that I could insert the default CSS and see how it needed to change in order to accommodate the new structure.
  • Then I inserted the default CSS into my new layout<>/a> to see what needed to be defined.

Code order and CSS
From what I understand about CSS, you don't always have to put your code in the order in which you want the content to appear on the page. But, I found, that when I changed the shape of an outer box, the boxes inside that box were affected (hence "cascading" styles). And on the flip side, when I tried to reshape an inner box, other boxes were sometimes affected as well. So, if I wanted to reshape a div without compromising other div layouts, I knew I needed to move some code to be able to create the layout I wanted.
Now that I knew how my code needed to be organinzed (conceptually), I needed to actually move the code around. This is where knowing a little about how PHP integrates with HTML is helpful. Trust me, I am not a "coder." I took a few lessons in PHP to get a feel for the syntax and I used some basic logic. For example, IF statements are like HTML, if you open it, you need to close it. So, make sure you know what the IF is asking and you know when it is done so you don't break a code. This is the page.tpl.php I created in order to accommodate the new layout.
Next step, to create the CSS that displays the div boxes where I want them on the page. Assuming you aren't practiced in creating CSS layouts, I am going to walk through the big steps first and then consider some details. So, next article will look at using negative margins for layouts.