Wrapping text with CS3 (Full Version)

All Forums >> [Web Development] >> Dreamweaver Help



Message

shapes -> Wrapping text with CS3 (9/18/2007 1:45:09)

Greetings,
I am an amateur attempting to build a website in order to learn Dreamweaver CS3 and CSS. I am unable to get text to wrap on the right side of an image that is floated right in the <div>. Instead, only the first line wraps at the bottom of the image and the rest of the text sits at the bottom. Please help! I am not an experienced html coder, but here is a copy of the <div> code for your review. The image is about 220 px wide and the box is about 445 px. Thanks ya'll [:)]

<div class="photoBox">
<p align="left"><img src="New Images/KauilaWhite5.gif" alt="Hawaiian Mermaid" width="220" height="257" /><span class="style8" style='font-weight:normal;mso-bidi-font-weight:bold'>KAUILA -<span style='mso-spacerun:yes'> </span>In the time
of storms, the great sea turtle laid an egg on the black sand beach at Punalu'u, on the big island of Hawaii. The little turtle
that hatched was called Kauila, because her shell was
the color of the dark red Kauila wood. A shy mermaid, Kauila would become a young woman to frolic and play
on sand. <span style='mso-spacerun:yes'> </span>But if anyone approached she would
quickly return to the sea as a turtle.
<o:p></o:p>
</span></p>
</div>



Tailslide -> RE: Wrapping text with CS3 (9/18/2007 2:28:38)

If you're trying to float an image to the right then you won't be able to get any text to the right of that - just to the left of it. Floating an image left or right moves it right over to the edge

What's all this stuff - mso-spacerun:yes and /o:p> ?

Looks like you've pasted text in from Word or Publisher or some other MS software.

You need to get rid of all that extraneous code plus if you're trying to learn CSS then you need to get rid of all the layout information within tags such as align="left" - all of that should be in your stylesheet - all you should have in the page itself is the text, photos and basic tags such as paragraphs, headings and lists.

Once you've got rid of all that stuff then you stand a fighting chance! Ensure that you also have a valid DOCTYPE at the top of your page too.

Now you can float an image to the right of the div and get the text to wrap around the left side of the image or you can float an image to the left and get the text to wrap around the right of it.

edit: now I've seen your other post saying that the image is floated left. No problem - just get rid of all that psuedo-code and all you need is this: 

<img alt="Your Image" src="image/yourimage.jpg" height="150" width="150" />
<p>This is a line of text.</p>
<p>This is another line of text</p>


With this in the CSS: 
img {float:left;}


And the image will be floated left with the text wrapping around it - obviously you'll probably want to add more information in there like margins on the image rule and possibly a class or a div name to the image rule to specify which images you're talking about.



shapes -> RE: Wrapping text with CS3 (9/18/2007 9:37:31)

Hello Tailslide,

The text did come from WORD, saved as html (advice from a well meaning pal). Maybe that's where all the odd code came from. So, what is the best way to create and import text for Dreamweaver CS3?

I do see the code you suggested in the style sheet so that looks okay. As soon as I can I'll clean house on the rest and will let you know how it goes.

Thanks for the info.



Tailslide -> RE: Wrapping text with CS3 (9/18/2007 9:57:51)

The absolutely safest way is to type it in to the HTML clean. If that's not possible then the next best way would be to paste it from Word or whatever into Notepad, then select and copy it again and finally paste it into the HTML. I don't use DW so I'm not sure but you do occasionally come across WYSIWYG editors that have a Word cleaning function in there...

Get rid of all that junk and in sounds like you should be ok - best way to test is to run the code through the validator and it will pick out any errors including any MS junk that's still there.




shapes -> RE: Wrapping text with CS3 (9/18/2007 11:53:55)

Tailslide,
Looks like the validator may save me from alot of headaches in the future. This is great info for a newbie. Thanks for being there.
Shapes



Tailslide -> RE: Wrapping text with CS3 (9/18/2007 12:59:03)

Couple of things to remember about the validator:

1. Don't panic if it throws up 852 errors - often you'll find that removing a few will clear a load more.
2. I believe that validation is important - BUT it's basically like spell-checking some text - the text still has to make sense. The validator will tell you if you've used the correct code but it won't tell you if you've used it sensibly.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875