1,105,288 Community Members

Dreamweaver wrapping text around Pics

Member Avatar
carlco9020
Newbie Poster
8 posts since Sep 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I have a small problem. I want to make a basic page with an image in the upper right hand corner with the text wrapping around it. I cannot seem to figure this out. I am not a newbie to web design so I feel like a dunce..... :sad:

Member Avatar
Rashakil Fol
Super Senior Demiposter
2,596 posts since Jun 2005
Reputation Points: 982 [?]
Q&As Helped to Solve: 209 [?]
Skill Endorsements: 42 [?]
Team Colleague
 
0
 

I have a small problem. I want to make a basic page with an image in the upper right hand corner with the text wrapping around it. I cannot seem to figure this out. I am not a newbie to web design so I feel like a dunce..... :sad:

You want the image to be a background image.

Now, learn HTML and CSS, or else you will be lost and confused for the rest of your web design spree.

Member Avatar
bkendall
Junior Poster in Training
69 posts since Jul 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
1
 

I think what you are looking for is an "align=" inside your image tag. This can be done painlessly in dreamweaver. First add your image to the page and in the layout mode you should see it on the page. Next click on the image and in the properties pane at the bottom you should see a box that says align in the bottom right simly select your poison from there and it will align the image. you should now select code view and see that it added an align='''' property to the image tag.

Member Avatar
lord ashley
Newbie Poster
1 post since Jun 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

This doesn't seem to work for me. I have the same issue, and this solution leaves the image in line with text. I'd like the text to wrap around the image without creating a large gap between lines. This would be similar to the text wrapping in Microsoft Word.

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

The align= attribute is deprecated. Use the style float: right; in a stylesheet class used in the img tag or in a style= attribute in the image tag.

Member Avatar
jelliott89
Newbie Poster
1 post since Jul 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I have a small problem. I want to make a basic page with an image in the upper right hand corner with the text wrapping around it. I cannot seem to figure this out. I am not a newbie to web design so I feel like a dunce..... :sad:

I find an effective and easy way to text wrap is by using borderless tables. You can merge cells etc as appropriate. This views well in both firefox and explorer. Wish there was a wrap text button though!

Member Avatar
almostbob
Nearly a Senior Poster
3,381 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 424 [?]
Skill Endorsements: 14 [?]
 
0
 

Layout programs do not produce optimised code
they can do many things, but only the way they were programmed to do
often thimes the best result is to go into "code view" after the page layout is completed and fix it

<p><img src='thispic.jpg' alt='a picture' width='80' height='60' style='float:right; margin:5px padding:5px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim turpis, consectetur sed hendrerit eu, fringilla iaculis ante.</P>

or if many images are to be the same appearance

<head>
<style type='text/css'>
<!--
.detail { float:right; margin:5px padding:5px; width:80px; height:60px; }
-->
</style></head><body>
<p><img src='thispic.jpg' alt='a picture' class='detail'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim turpis, consectetur sed hendrerit eu, fringilla iaculis ante.</P>
<p><img src='thatpic.jpg' alt='another picture' class='detail'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim turpis, consectetur sed hendrerit eu, fringilla iaculis ante.</P>

wrapping the image and text in a <div> or <p> performs a 'keep toghther' so that the text and image remain associated

Member Avatar
sicoev
Newbie Poster
4 posts since Oct 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

This is a big help, thanks! I've been stuck on doing this for ages

Member Avatar
keddy1
Newbie Poster
9 posts since Sep 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

here I found many having a great concept of dreamweaver.as am still a learner I need suggestions and guidance like this from time to time.I think it is here I can refer to

Member Avatar
annie707
Newbie Poster
1 post since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thank you!!! Works beautifully.

Layout programs do not produce optimised code
they can do many things, but only the way they were programmed to do
often thimes the best result is to go into "code view" after the page layout is completed and fix it

<p><img src='thispic.jpg' alt='a picture' width='80' height='60' style='float:right; margin:5px padding:5px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim turpis, consectetur sed hendrerit eu, fringilla iaculis ante.</P>

or if many images are to be the same appearance

<head>
<style type='text/css'>
<!--
.detail { float:right; margin:5px padding:5px; width:80px; height:60px; }
-->
</style></head><body>
<p><img src='thispic.jpg' alt='a picture' class='detail'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim turpis, consectetur sed hendrerit eu, fringilla iaculis ante.</P>
<p><img src='thatpic.jpg' alt='another picture' class='detail'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim turpis, consectetur sed hendrerit eu, fringilla iaculis ante.</P>

wrapping the image and text in a <div> or <p> performs a 'keep toghther' so that the text and image remain associated

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: