Hi all,

I look unsuccessfully through the web how to suround an image with text as attached (HTML or CSS, no matter).

Can someone help me to do it. I'll appreciate it.


Regards, E. P.

Wherever you found that, just select "view source code" to see the code involved.
For a more in depth look get an add on for firefox like "web developer" which alows you to easily drill down into the inner workings of a site.

^ I second that. It's hard to see what's going on without seeing the code. The easiest way to wrap text around an image is to float it either left or right and then apply margin to the edges to give space.

Jack

I know how to wrap text around an image by floating it either left or right, etc..
What I try to do is surrounding the image by text as in attachment. This example is made with a page editor (not from a webpage) to show what I need to do.. In fact I'm looking for the corresponding code.

Ed

Try this?

<p><img src="image.gif" width="75" height="50" alt="turtle" align="center">Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic. .<br clear="all"><br> This is a new paragraph.</p>

Tanks for your answer. I try it and it does not give me the image in center of the text. Instead, I get the image around left or or right.
I use paddings too. Without success.
Below, code and result in attachment.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">
  <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
  <title>image centered around text</title>
 </head>
 <body>
<b>Without padding</b>
 <p><img src="sunset.gif"  width="75" height="50" alt="sunset" align="center">Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphicAdding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic. Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic. Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic</p>
 <p></p>
 
<b>With paddings</b>
      <p><img style="float: left; padding: 3px 3px 0px 3px;" src="sunset.gif" width="75" height="50" alt="sunset">Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphicAdding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic. Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic. Adding your text here will wrap your text around your graphic, with your graphic in the center and your text aligned around the graphic.<br clear="all"><br></p>     
 </body>
</html>

Try this hack. It worked for me. I used an unordered list with three list tags. Place the img in the middle one. Now, break up the sentences manually. I assume you want the same sentence to span the img tag. Once you clear the height of the image, close the unordered list and go back to p tags for the rest. I checked it on Linux with two browsers as well as 4 browsers in Windows. Hope this helps.

Tank you for the hack.Unfortunately, it do not fit my need.The text is a description text and not the same sentence or a list (ordered or unordered).

Ed

have you tried just using a drag and drop editor to format it, such as dream weaver?

You can divide the whole thing into three ports: the left one, the image and the right one.
<div id="left">Add your costum text here</div>
<div id="right">
<div id="one"><img src="your image"/> </div>
<div id="two">And some more text </div>
</div>

the style.css
#left{
width:33%;
float:left;
margin-right:1%;}


#right{
width:66%;
float:right;}

#one{
width:49%;
float:left;}

#two{
width:49%;
float:right;}


I think that will work.

I don't know exactly what the content is but it's starting to sound like a table is an easy solution.