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.
JRM 107 Practically a Master Poster
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.
zomex 0 Newbie Poster
^ 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
EPierre 0 Newbie Poster
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
JamieLynnSEO 20 Posting Pro in Training
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> EPierre 0 Newbie Poster
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>
tinymark 1 Junior Poster
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.
EPierre 0 Newbie Poster
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
JamieLynnSEO 20 Posting Pro in Training
have you tried just using a drag and drop editor to format it, such as dream weaver?
Anahit 0 Newbie Poster
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.
tinymark 1 Junior Poster
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.