Trying to wrap text around image causes table to break out of wrapper?

Hi,
I'm not sure if this is a CSS/HTML problem or just something
with Dreamweaver CS3?
Here is what I have My pages have a wrapper with the
following attributes
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #F8F8F8;
On one of my pages, I display a list of file with thumbnails
and a brief description.
I chose to use a table and have each item in it's own row.
I have a class that I assign the image that gives it a little
padding around the image.
I think place my text directly to the right of the thumbnail
image.
So it would look like this
File Name
Pic.............description of this file
I would create a new row in the table for each one. I liked
using a table, because when there was an update, and I needed to
remove an item, I could just delete the row. Or if a new one,
needed to be placed somewhere in the middle, I could just add a
row.
This worked great in DW MX, MX2004, and 8, but what I'm
finding with CS3 is, once I apply the class to the image, that
gives it the padding. As soon as I create a new row, the table
jumps out past the wrapper div within Dreamweaver
My image class has these attributes
.thumbnailspacer {
float: left;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
margin-left: 5px;
background-color: #C5DFFC;
and here is a sample of what one of my rows look like.
<tr>
<td><a href="#">test<img src="" alt=""
name="" width="82" height="58" class="thumbnailspacer"
/></a>
<br />
<br />
Description of Item goes here</td>
</tr>
It views OK in IE 6 and IE 7, not sure about others since we
don't use them here.
What can I do to make it work like it did before?

Why are you using the float?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cdoyle" <[email protected]> wrote in
message
news:[email protected]...
> Hi,
> I'm not sure if this is a CSS/HTML problem or just
something with
> Dreamweaver
> CS3?
>
> Here is what I have My pages have a wrapper with the
following
> attributes
> #wrapper {
> width: 800px;
> margin-right: auto;
> margin-left: auto;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 12px;
> background-color: #F8F8F8;
> }
>
> On one of my pages, I display a list of file with
thumbnails and a brief
> description.
> I chose to use a table and have each item in it's own
row.
>
> I have a class that I assign the image that gives it a
little padding
> around
> the image.
>
> I think place my text directly to the right of the
thumbnail image.
>
> So it would look like this
>
> File Name
> Pic.............description of this file
>
> I would create a new row in the table for each one. I
liked using a
> table,
> because when there was an update, and I needed to remove
an item, I could
> just
> delete the row. Or if a new one, needed to be placed
somewhere in the
> middle,
> I could just add a row.
>
> This worked great in DW MX, MX2004, and 8, but what I'm
finding with CS3
> is,
> once I apply the class to the image, that gives it the
padding. As soon
> as I
> create a new row, the table jumps out past the wrapper
div within
> Dreamweaver
>
> My image class has these attributes
> .thumbnailspacer {
> float: left;
> padding-top: 2px;
> padding-right: 2px;
> padding-bottom: 2px;
> padding-left: 2px;
> margin-left: 5px;
> background-color: #C5DFFC;
>
> }
>
> and here is a sample of what one of my rows look like.
>
> <tr>
> <td><a href="#">test<img src="" alt=""
name="" width="82"
> height="58"
> class="thumbnailspacer" /></a>
> <br />
> <br />
> Description of Item goes here</td>
> </tr>
>
>
> It views OK in IE 6 and IE 7, not sure about others
since we don't use
> them
> here.
>
> What can I do to make it work like it did before?
>
>
>

Similar Messages

I am unable to wrap text around image.

I have posted one typical page on our website with one photo, a main heading and some text. I have struggled for several days, trying to wrap the text around the photo and allow some space between the photo and the text. I have studied numerous books and tutorials on the css box model but they are all so entirely different in the words they use and the teaching approach that my mind is in a whirling fog of contradictory information.
Our website is at www.endangeredspecies.com. There will be thousands of individual pages about different plants with this same format which will be accessed by hypertext references from various indexes.

You just need to float your image left or right:
img {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
G/L

Wrap text around image in blog

I'd for the images that are posted in the blog section of my website wrap around text. I understand how to do this in the real world, create the style and then reference it by placing a class attribute in the html, but am not sure how this translates in BC world. Please help. Thanks.
.wraptext {
float:left;

There are a couple of ways to do it.
Create a class in your stylesheet, insert the image into your post where you would like it to appear. Right-click the image and select Properties.
You can then do one of two things:
1. Select the class you created OR
2. Select the alignment to left
I find option #2 to be easier than trying to find the class I created in the dropdown menu provided. I would also suggest giving it a right margin of 10-20px so that the text doesn't butt-up directly on the image.

Can't Wrap Text Around an image

Hi I'm trying to wrap text around an image in adobe flex 3 i
always want the image to be in the upper left hand corner of a Vbox
or canvas or whatever with the text neatly wrapping around it. im
using an xml list to generate the image and the surrounding text I
no it cant be done using htmlText but it does not make the text
appear exactly as I would like it involves to much editing of the
text so i would like to know f there is another way of doing so i
can pull the text in without havingto convert it to html
many thanx
lloyd

Have you tried just putting the text in line with the pic and
call it htmltext, even if it's not? I suppose it depends on if you
have some characters that should be escaped but embedding the image
should always be up at the upper left. Something like the following
with your own pic.jpg.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var htmlString:String="<img src='Assets/pic.jpg'
align='left'/>This is just some sample text & some things
that should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. ";
]]>
</mx:Script>
<mx:TextArea htmlText="{htmlString}" x="62" y="51"
width="483" height="397"/>
</mx:Application>

Wrapping text around an image on top of a background

I am trying to wrap text around a photo, but I'm doing so on top of a background color box in my Master Page. Problem is that when I create the background box in the Master Page, the text goes away. I can resolve the problem by checking the "Ignore Text Wrap" option under the Text Frame Option menu, but then I lose the text wrap around my images. Is there a way around this?

Don't apply text wrap to the background....

Ho do I wrap text around an image?

Hi,
I am trying to figure out how to wrap text around an image so that it follows the outline of the image. The E.O. Wilson book has an example, but I have seen it in other books, too. I am using images that have their background taken away with Instant Alpha, but the wrap doesn't work reliably. I wonder if it is a setting I am missing or if Instant Alpha is just unreliable.
Here is what I do:
I drag the photo into a standard page in the chapter (not a chapter or section start page).
I then apply Instant Alpha.
The background disappears, but the text doesn't flow into the spaces.
My settings in the Inspector's Object Placement tab is as follows:
Anchored
Object causes wrap (second icon from left)
Text Fit (right icon)
Extra Space 16pt
Alpha 50%
No text flow. What sometimes works is if I apply a mask to the picture and then make it big enough to reveal the whole picture. Suddenly text flows into the space around the picture. But that is also not a reliable solution. It works sometimes, but not others.
My workaround right now is to create a shape with the pen tool that traces the image. Text flows around this shape just fine. I then place that shape where I want the image and turn off Object Causes Wrap on the image. I then group the shape with the image to make moving them easier. That is a huge effort, and I am sure there is something I am doing wrong.
Can anyone help?
Thanks,
Fiver

Inline
Floating
Anchor
How is your "Text Fit" set? - Fabe

Wrapping text around the image in illustrator cs4

I am trying to create a brochure with wrapping text around the image, I have followed several online tutorials like http://www.tutorials-expert.com/tutorial/19302/Wrapping-Text-Around-an-Image-in-Illustrato r.html and some other but I followed these instructions and i did not see any effect. Since i am new to illustrator, can some one point me in write direction.
Thanks.

You should mark the thread answered as this is a situation that for some reason passes by the users often even though it is covered in the tutorials.
No real need to designate a user as the one who answered the question just mark the thread answered. This problem comes up often and it is always the same user error.

Wrapping text around an image in a blog post

Hi,
I want my client to have the choice to wrap text around an image they have inserted into a blog post. How is this possible? I have tried to create a class that would would appear in the 'apply a class' section of the editor but it doesnt work, the class doesnt even appear in the editor.
Any advice?
Thanks,
Dean

Hi Liam.
Thanks for the reply. Yes I have added it in the partner portal and it just says clear class.
I have only added a small bit of css so I dont think that is the problem. I just the below applied to the image so the text will float round it.
.wraptext {
float:left;
I think the problem is that it is in the wrong css file. I have tried it on few different css files and it does the appear in the editor for some of the webpages. No matter what css file I put it in, it still doesnt appear as an option when adding a blog post.
The blog post is referencing a few stylesheets, how can I identify which one the code should be in?

How do I import an irregular shape into pages to wrap text around?

I see in the lovely demo how pages can wrap text around an image that is an irregular shape, but they never tell us how to actually get one onto the iPad. As far as I can tell jpg's and tff's are all that the iPad will work with and those are all square. How do I import an irregularly shaped graphic such as a butterfly or logo into my document? Thanks.

You must need a PNG with transparent background. I just made one in iDraw and it flows great in Pages.

How do I wrap text around a picture in Pages 5.5?

Using Yosemite, MacBook Pro (late 2009) Pages v. 5.5. Previous version of Pages let me wrap text around pictures in newsletters. I can't find this option or how-to anywhere in v. 5.5. How do I wrap text around one side or another of an inserted picture?

Assuming your text is in your document, and you insert a picture. While the picture is selected, you will notice that on the right format panel, the Arrange tab has appeared. Select either Stay on Page, or Move with Text — depending on your image goal — and then look at the Text Wrap feature. By default, once you drop a picture into the document, it is set to Automatic. This means you can place your pointer in the image and just move it around, while text flows around it. The smaller the image the better the flow effect. This is a discussion about Pages v5.2.2, but it will work the same in v5.5.
Let's say you want the image flush aligned to the left margin, but want text to flow above, to the right, and below the image. Change text wrap automatic to Around, select the right icon for Text Fit, and adjust your spacing up or down for the proximity of the text wrap to the image. It looks like this with Text Fit spacing set to 9 pt.

Need to wrap text around HTML widget

Hi,
I'm making a site with pages that contain lots of text and images to go along with the text next to it. The person hosting the site however says that all photos need to be linked through photobucket due to space,so I need to use HTML widgets for the photos, and i want it hosting on this site as opposed to .me. I know that you can wrap text around inserting images from your own computer and you can't wrap it around a widget, so at the moment i've inserted boxes into the text and put the widgets over the boxes but when viewed in a browser everything is out of place.
Is there any other solution? there really should be.
Cheers,
Tom

There is a way to lock the text so that it will appear the same in all browsers regardless of font or platform: apply a drop shadow with 6% opacity to the font which will convert it to an image. When you do you'll see this icon on the text box:
Click to view full size
To see the image indicator you'll have to select the checkbox "Show text imaging indicator" in iWeb's preferences:
Click to view full size
There is a downside to this in that having addition image files on the page can add to the loading time. That may or may not be an issue but if it is you can always remove the drop shadow.
NOTE: The text appears to be 13 pt Lucida Grande which is pretty small and difficult to read IMO. Using Times New Roman 14, a serf font, takes up about the same amount of room and, IMO, is much easier to read. Just a though.
Message was edited by: Old Toad

In the new Keynote how does one find the Wrap Inspector to wrap text around a photo??? Thanks

In the new keynote, the help section refers to the Wrap Inspector. How does one find that or how does one wrap text around a photo?? Thanks

You can also use the shape tool to draw a shape roughly following the outline of the graphic you want to wrap text around, change the fill and stroke to "none", then paste your text within the shape. It's a few more steps, but it opens you up to many creative alternative layouts.

How to wrap text around a table

I'm new to Pages. The first thing I tried to do was play with tables, because they are the biggest headache in Microsoft Word. However, I ran into a problem right away--I cannot figure out how to wrap text tightly around a table so that the table is surrounded by text on all four sides.
Does anyone know how to do this? Seems very basic. There is even a button that shows what I want (Text Wrap drop-down --> Around), but when I click on it, nothing happens.

Peter,
I can recreate the appearance with five hard returns after the first paragraph, or instead, changing the After Paragraph spacing to 116 pt. Did this with Baskerville Regular 12 pt with line spacing set at 1. Same Arrange settings as shown by OP.

How do you wrap text around an image in Appleworks Word Processing?

I need to do figure this out as soon as possible as it’s for a piece of college work due next week, so I’ll appreciate any answers you have to offer. All the help (online and otherwise) I’ve come across instructs me to go to non-existent ’Options’ or ’Tools’ menus - all I have is File, Edit, Format, Text, Outline, Table, Window and Help, none of which has an obvious solution. Ctrl-clicking on the picture only gives Help or Scale By Percent. Cheers for your help.

Trinity Bourne wrote:
When I go to 'text wrap' it asks me for a gutter number (which don't really understand). It doesn't matter what number I type in it always says 'invalid number' and won't wrap the text.
"gutter" is a printers term that refers to the amount of (white) space between columns, or in this case between the edge of the floating object and the text wrapped around it. AppleWorks default value for this is 5 points (5/72 inch).
AppleWorks should accept any value from 0 to 255 for the Gutter, and should round decimal values to the nearer integer value.
In the example, the selected image (top left rectangle) had been set to "regular" wrap and the gutter left at 5 points. The rectangle to the right is set to "regular" and the gutter increased to 15 points.
The oval on the right has the same settings (regular, 5 point gutter) as the selected rectangle; the one on the left is set to "irregular" wrap with the gutter setting left at 5 points.
The left justified text in the example aligns itself along the right of the objects according to the regular/irregular setting: irregular follows the contours of the image, regular the outline of the 'box' containing the image. Irregular is available only for objects you have created using the AppleWorks Draw tools—imported/pasted images will include a white background filling the rest of the box.
Note the lack of text between the left margin and the left edge of the selected rectangle. this is due to the space between margin and object is too small to accomodate any of the words (currently in the space between the two rectangles) that would fall into that space.
Regarding the "invalid number" error message you are getting—I suspect this is a corrupted preferences issue. Some possible solutions are discussed in this thread, located by clicking the "more options" link in the search box (above right) then searching the AppleWorks Forum for "invalid number" (including the quotation marks).
Regards,
Barry

Trying to wrap a vector image around a tube shaped vector object

What would be the best way to approach this? There are so many options, looking for the one that looks best.
It's a grid pattern around an ice cream cone.
Illustrator CS4.

Turn the artwork you want wrapped around the shape into a symbol (just drag onto Symbols panel). Draw a right triangle with the right angle at the top and the non-hypoteneus sides at the top and one side, then go to Effect > 3D > Revolve…
Click on Map Art, then chose the correct surface and apply the symbol. Rotate and scale as desired.

Trying to wrap text around image causes table to break out of wrapper?

Similar Messages

Maybe you are looking for