I’ve started posting Final Cut Server instructional videos in iTunes U, but I’ll provide direct links to the videos from our Podcast Library in this post.
This will get updated as new videos are added.
Archive for the ‘Podcast’ Category
Final Cut Server
Thursday, October 29th, 2009Posted in Podcast |
Need two columns? Float those divs!
Monday, September 14th, 2009Divs 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.
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:
Posted in Podcast, Web Design |
Clearing a container
Wednesday, February 4th, 2009In 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!
Posted in Podcast, Web Design |