Hello Janine,
I am stuck on an issue with CSS and Div tags. I do great up until I apply the style to float the a div to the left of my story. Once I apply that, my Sidebar content jumps out of the Sidebar div and is in the Story div. I’ve been spinning my wheels on this since yesterday. I’ll attach a few screen captures for you (not sure if they’ll help). I also see the empty Sidebar div between the story and sidebar content in the code.
One other problem I am having is that my pages will not open in Firefox. I can preview in Opera and Safari, but the pages are jumbled though they look perfectly fine within the program. I am running CS3 as I said, but with current browsers. Could this be a compatibility issue?
Thank you so much for any help you can send my way!
Kitty
Hi Kitty,
Good questions. I can see you’re getting into more advanced issues as you combine CSS styles, but that’s also where you can start running into conflict. As you get more advanced with CSS and Web design, you’ll quickly learn that there are multiple ways to get into, and out of, style conflicts:
Here are a couple of things to check for:
If you align a div to the left or right (a common way to create a multi-column design), beware that the alignment of one element can affect others. Also note that the positioning of open and close div tags is important. I often change to Split View, as I can see you’ve done in this screenshot, so I can make sure I have only the content I want in a div tag. Sometimes just copying and pasting the content you don’t want in one div into another can solve a problem.
Here’s another scenario I’ve run into: I often want an image and a caption together, aligned to the left or right so text wraps around both of them. If you’re just aligning an image with a text wrap, a simple align-left or align-right style is handy, but if you want to include a caption, you may want to create additional styles. In that case, I usually create two class styles named right-caption and left-caption.
There are a few ways to apply these styles and make sure you have all the divs you need in the right place.
You can first insert the div, then assign the right-caption class style, and then insert the image and text within it. The style for the div that positions the image and caption should have a width set to about the width of the image and an alignment to the right or left (set as Float=right or left in the Block Category of the CSS Rules window in Dreamweaver).
One thing to watch out for. If you’re like me and you start building a page by putting some text in a div and then adding an image and aligning it, and then you realize you want to add a caption… well, at that point, you can insert a new div and drag the image into it, or you can select the image and choose Insert>div set to Wrap About Selection and even apply the class style as you add the div. That trick works beautifully when it goes well, but sometimes when I do that, Dreamweaver grabs some of the text already on the page — like it’s trying to help me out but it didn’t quite understand what I had in mind. If that happens, I just use code view to copy and paste the text where I want it, making sure the caption is in the div with just the image, and the rest of the text is outside that div so it can wrap about the image and the caption.
Advanced tip: If you’re aligning an image with a caption and you’ve already aligned the image to the right before you add a div around the image that is also aligned, sometimes that’s just too much floating to the right. Remember, you can (and should) remove styles you don’t need as you add new ones — that’s always good practice.
If you align an image and caption with a class style that has a float right, for example, take a moment to remove the float-right style that you already applied to the image (you can select an image and use the Style drop-down in the Properties Inspector at the bottom of the screen to change the class style setting to None). This removes the style and often solves style conflicts.
As for the differences between Firefox, Safari, and Internet Explorer, you’ve hit on the biggest challenge of Web design. My best advice for that is to write clean code, watch out for conflicts, and test in as many web browsers as possible.
Here’s a link to an article about how to test your website in different web browsers using a variety of testing services:
I hope that helps you with your more advanced questions, but let me know if you want to go another round.
And finally, I’m thinking about offering an Advanced Class for students like you. Would you be interested in enrolling in a small online class with me and a few other students at your level? Please let me know.
Thanks,
Janine