| Author |
Wrapping text around an image
|
|
| mz1023 2006-02-24, 10:15 am |
| On the home page of my website I would like start the text of the first
paragraph above the photo and have it wrap around the photo to the right. How
can I do this in DW? I have tried all sorts of ways, but nothiing has worked.
URL is http://www.transformnow.com
Thanks,
Melissa
| |
|
|
| mz1023 2006-02-24, 10:15 am |
| Thanks. I still don't understand how you can wrap the text around the top, right, and bottom of an image.
Melissa
| |
| Baxter 2006-02-24, 10:15 am |
| Simple html
<p> This is a image. It may not look like a normal image because <img
align=left src="your image"> it has a mouth and teeth. But you have to
remember that we are on the internet and there will be many things that you
will run across that could look very strange to you. After a while you will
get used to the bizarre and will probably be shocked when you see something
normal!</p>
Dave
"mz1023" <webforumsuser@macromedia.com> wrote in message
news:dtltb0$gf0$1@forums.macromedia.com...
> On the home page of my website I would like start the text of the first
> paragraph above the photo and have it wrap around the photo to the right.
How
> can I do this in DW? I have tried all sorts of ways, but nothiing has
worked.
>
> URL is http://www.transformnow.com
>
> Thanks,
> Melissa
>
| |
| Joe Makowiec 2006-02-24, 10:15 am |
| On 23 Feb 2006 in macromedia.dreamweaver, Baxter wrote:
> Simple html
> <p> This is a image. It may not look like a normal image because
> <img
> align=left src="your image"> it has a mouth and teeth. But you have
> to remember that we are on the internet and there will be many
> things that you will run across that could look very strange to you.
> After a while you will get used to the bizarre and will probably be
> shocked when you see something normal!</p>
Even simpler CSS:
..floatleft {
float : left ;
margin-right : 10px ; /* leave some space to the right */
}
<p> This is a image. It may not look like a normal image because
<img class="floatleft" src="your image" alt="something"> it has a
mouth and teeth. But you have to remember that we are on the internet
and there will be many things that you will run across that could look
very strange to you. After a while you will get used to the bizarre
and will probably be shocked when you see something normal!</p>
--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php
| |
| 15266 2006-02-24, 10:15 am |
| Murray already answered this but I was going to suggest using the float css
property as well. It makes stuff contained within a div 'float' funnily enough
to either the left or right of an image.
w3schools has an excellent resource for checking css properties.
| |
| Josie1one 2006-02-24, 10:15 am |
| Although I cannot argue with the answers given so far (CSS is, after all,
the obvious way to go), there is one quick thing you can try. Click on the
image, then in the Properties Box click on "align right/left". This
positions your image and the text will flow around it.
Jo
"mz1023" <webforumsuser@macromedia.com> wrote in message
news:dtltb0$gf0$1@forums.macromedia.com...
> On the home page of my website I would like start the text of the first
> paragraph above the photo and have it wrap around the photo to the right.
> How
> can I do this in DW? I have tried all sorts of ways, but nothiing has
> worked.
>
> URL is http://www.transformnow.com
>
> Thanks,
> Melissa
>
| |
| Joe Makowiec 2006-02-24, 10:15 am |
| On 24 Feb 2006 in macromedia.dreamweaver, mz1023 wrote:
> Thanks. Joe, Where exactly would this piece of code be placed with
> regard to the image or paragraph?
>
> .floatleft {
> float : left ;
> margin-right : 10px ; /* leave some space to the right */
> }
In your CSS file, styles/primary.css:
<link href="styles/primary.css" rel="stylesheet" type="text/css">
</head>
While I was there, I found this:
<body" bgcolor="#FFFFFF" text="#336699" link="#669999" vlink="#999966" alink="#CC9900"
<body text="#336699" link="#336699" vlink="#336699" alink="#CC9900" onLoad="MM_preloadImages('enter/buttons/AboutMelissa_on.gif','enter/buttons/PrivateSessions_on.gif','enter/buttons/Testimonials_on.gif','enter/buttons/Teleclasses_on.gif','enter/buttons/T
ipsarticles_on.gif','enter/buttons/Contact_on.gif','enter/buttons/HomeNew_on.gif','enter/buttons/AskMelissa_on.gif','enter/buttons/Newsletter_on.gif','enter/buttons/Resources_on.gif')">
- Eliminate the first, partila body tag
- Eliminate the text, link, vlink and alink attributes from the second
body tag.
--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php
| |
| mz1023 2006-02-24, 10:15 am |
| Thanks. Joe, Where exactly would this piece of code be placed with regard to the image or paragraph?
..floatleft {
float : left ;
margin-right : 10px ; /* leave some space to the right */
}
| |
| kieran_briggs 2006-02-24, 10:15 am |
| You want to put the style either at the top of the page in a <style> tag or in
an external style sheet and then the html would look as below
<p> This is a image. It may not look like a normal image because <img
class="floatleft" src="your image"> it has a mouth and teeth. But you have to
remember that we are on the internet and there will be many things that you
will run across that could look very strange to you. After a while you will
get used to the bizarre and will probably be shocked when you see something
normal!</p>
This will put the picture on the left and flow the text around it
| |
| mz1023 2006-02-24, 10:15 pm |
| Joe,
Thanks for pointing out the extra body tag code. Do you apply the floatleft style to the image or the text? If you apply it to the image, what DW commands do you use?
Melissa
| |
| Joe Makowiec 2006-02-24, 10:15 pm |
| On 24 Feb 2006 in macromedia.dreamweaver, mz1023 wrote:
> Thanks for pointing out the extra body tag code. Do you apply the
> floatleft style to the image or the text? If you apply it to the
> image, what DW commands do you use?
It gets applied to the image. Either go into code view and add it there:
<img ... style="floatleft">
Or select the image in design view and click Ctrl^T, which brings up the
tag editor. Add it there.
Or right-click on the image tag, pick CSS Style from the popup menu, and
pick floatleft.
--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |