Hi,

This is a follow-up email: this is what I have figured out about your tutorial.

CSS floats appear to only work if the copy and photo are NOT in a table. The table cell seems to take on the style of the text and then the photo has to follow that style also.

To get the CSS float to work I had to eliminate the table, but then the padding and margins of the text did not work any more. I had to set the page property margin to get the copy to indent.

So, you can’t have a float image inside a cell if you have copy with a style sheet.

Is this correct?

Quin

Hi Quin,

You don’t explain in this message if you’re working with my Dreamweaver 8 or Dreamweaver CS3 training… I’m hoping you’re using CS3 because I have more advanced CSS training (CS4 is even better). This is not only because Dreamweaver CS3 has better CSS support, but also because Web design has evolved considerably over the years and CSS is much more commonly use today than it was when I created the Dreamweaver 8 training.

Following today’s best practices on the Web, you should avoid using Tables except for tabular data (like a financial statement from a spreadsheet).

Today the best approach is to use Divs and CSS and floats are a key part of setting up alignment, and floats are well supported by Web browsers these days so you shouldn’t have trouble if you follow this approach.

I do have several free, written tutorials on working with CSS and using floats on my Web site. You can find them at www.DigitalFamily.com/dreamweaver.

Hope that helps,

Janine

Hi Janine,

Yes, I am using CS3, and yes I used your tutorial to learn how to do the float. However, if I float the text and give it a margin, it only indents the first line, not the whole paragraph. If I give the whole page a margin, my title bar is indented also. So far something is not working well together.

Quin

Ah, I think I understand what’s happening.

When you work with CSS and you apply a style, you apply it to some HTML tag — most commonly, a p tag, h1 tag, div tag, or span tag.

If you want to indent an entire paragraph you want to make sure you’re applying the style to the paragraph tag that surrounds the entire paragraph (you should see a <p tag at the beginning at </p at the end if you view the code). Dreamweaver automatically inserts a <span tag to apply a style to a limited portion of text and you’ll need to remove that entire tag to get rid of it before applying the style to the p tag.

You can use the tag selector at the very bottom of the workspace (just above the Property inspector) to help make sure you are selecting the tag you want to apply the style to. Click to place your cursor in the area where you want to apply the style. When you click on the corresponding tag in the tag selector at the bottom of the workspace, you should see that it is selected. Then apply the style.

With a tag selected in the tag selector, you can right-click to open a menu that makes it easy to apply or remove class and id styles.

Hope that helps you get all your styles applied correctly.

Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.