Bulletproof Tuesdays - Ch. 4 - Creative Floating

Hey, looks like you're new here. You may want to subscribe to my RSS feed. Thanks for visiting!

At the end of the first month of Bulletproof Tuesdays we’ve finally arrived at a chapter that I can really put to use and actually has some substance. As usual the chapter begins with a description of a tables based layout and why it’s not Bulletproof. By now I think you all know why. Too much code, not flexible, and hard to update.

Chapter 4 talks about setting up a page similar to my portfolio page where you have a title with a description under it and an image to the left or right of the text block. My site is already css based and my portfolio images are floated, but Dan talks about using definition lists, which I haven’t used before. So lets begin.

A definition list is similar to an unordered list it consists of an outer <dl> element, with any number of definition terms <dt> and descriptions <dd>:

This is a term

This is a description.

I went and read up on definition lists at the W3C site to find out more www.w3.org/TR/html4/struct/lists.html#h-10.3

The markup you need is a definition term, a description, a photo, an outer containing element set to a width, and an optional border.

Portfolio

This is the description of my project

Dan does point out that while we are using definition lists for the example there are many other ways to achieve the same result, about half way through I was kicking myself for changing, but I think the learning lesson was worth it.
Next we want to add a class to each <dd> element so we can control their style and floats:

Portfolio

This is the description of my project

After the markup is set we’ll apply the styles:


#portfolio{
float: left;
}

dl{
float: left;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
width: 500px;
border-bottom: 1px solid #999;
}

dt{
float:left;
color:#333;
font:150% "Futura Light", Arial, sans-serif;
margin:5px 0;
padding:0;
text-decoration: none;
width: 500px;
}

dd{
font-family:"Lucida Grande", Verdana, Arial, Sans-Serif;
font-size: 100%;
line-height: 1.3em;
}

dd.portfolio_images {
float: right;
margin: 0 0 0 5px;
padding: 5px;
border: 1px solid #999;
border-bottom-color: #333;
border-right-color: #333;
background: #DADADA;
}

.portfolio_text {
padding: 0 0 10px 0;
margin: 0;
line-height: 1.3em;
}

.show_tools{
margin: 5px 0;
}

.portfolio_p {
padding: 0 0 10px 0;
margin: 0 0 10px 0;
line-height: 1.3em;
border-bottom: 1px solid #999;
}


If you want to know exactly why we did each of these things you’ll need to peruse the book. This was by far the most tedious chapter. You can see my results and check out my code on my portfolio page and podcast pages. I added a few things that weren’t in the book, and I think the results are satisfactory. Let me know what you think. As always see you next Tuesday.

Technorati Tags: bulletproof, design, web

Popularity: 3% [?]