Member Avatar for EPierre

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.

Wrapped_text.jpg 206.14 KB
  • 6 Contributors
  • 10 Replies
  • 130 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by tinymark

Recommended Answers

All 10 Replies

Member Avatar for JRM

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.

Member Avatar for zomex

^ 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

Member Avatar for EPierre

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

Member Avatar for JamieLynnSEO

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>
Member Avatar for EPierre

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>
image-text.jpg 223.76 KB
Member Avatar for tinymark

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.

Edited by tinymark because: n/a
Member Avatar for EPierre

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

Member Avatar for JamieLynnSEO

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

Member Avatar for Anahit

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.

Member Avatar for tinymark

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.