Posts Tagged ‘Podcast’

Need two columns? Float those divs!

Monday, September 14th, 2009

Divs want to display “block” style, meaning they want to sit atop one another. If you want them to work as two columns, you need to set them both to float.

What is a float? Well, the easiest analogy is that floated items allow content placed after them in the code to “wrap” around the floated item. If you have used InDesign, you have probably set the “Text Wrap” characteristics for a photo, allowing text to wrap around one side of the photo in question.

Floating is basically the same thing. By floating a div, you force the next div in the code to wrap around the floated div. In order to create two true columns, you must set them both to float.

Float property in Dreamweaver CSS Rule window.

Float property in Dreamweaver CSS Rule window.

Depending on your layout, you can choose to set them to float to either the left or the right. Web designers will often set them both to float the same direction, to control the space between columns more efficiently.

For an example using the Sequoia exercise, watch the video below:


Tags: , , , , , ,
Posted in Podcast, Web Design |

PHP Server Side Includes

Saturday, September 12th, 2009

I could also rename this post “A complex route to easy navigation.” Buckle up, because this is going to be a video entry.

First, let’s examine what a Server Side Include (SSI) actually does for your Web site. PHP is actually a very complex and powerful language that can really extend the function of the site. We are only going to barely scrape the surface of PHP to play with a SSI.

A SSI functions much like an external style sheet – it allows you to take repetitive elements (like your navigation) from individual pages of your Web site, and place them in an external file. So, if you have 300 pages of Web site, and need to change a link in your navigation, you can update it just by changing the link in your include, rather than changing it in 300 pages. 

An include is a separate PHP file that contains just a snippet of code that you can “include” or place inside a certain layout element (div) on another PHP page. When you set up your include, remember to strip out all the existing code before pasting in your included elements! What exactly does that mean, you ask? Well, watch the video below to find out.


Tags: , , , , , ,
Posted in Podcast, Web Design |

Clearing a container

Wednesday, February 4th, 2009

In theory, divs should expand vertically as the content placed within them grows. In theory.

In reality, if the content of a container div is one or more floated divs, with no “non-floated” divs or other content to reset the container div, the container div will not expand.

Why not? The float property tells the content that comes after the floated div (or img, or whatever) to wrap around the floated object. In the case of a container with floated column divs, the content that follows the floated divs is often the closing tag of the container div. Thus, the closing tag wraps around the floated divs, and appears to collapse (or doesn’t expand properly).

My solution is often to place an extra, empty clearing div right before the closing tag of the container. Create a new div Before end of tag “container“ and give it a class (not an ID) of clear. Once it’s on the page, delete the text inside the .clear div, and create a new class rule for .clear. The only declaration you absolutely need for that rule is to set the “clear” property to “both.”

This will force the clearing div to appear below the “tallest” floated div, and also force the closing tag of the container to appear below the clearing div.

Confused? Check out the video below!


Tags: , , , , , , ,
Posted in Podcast, Web Design |