...

View Full Version : How to wrap text either above or beside an image



nicky77
11-08-2007, 04:39 PM
Hi there, i'm trying to find out if it's possible to wrap text either beside or above an image depending on the image size. At the moment, if the uploaded image is too large, then the text is pushed underneath the image, which is the opposite from what i'd like to implement. Wrapping the text beside smaller images works fine, but i'm developing a content management site where there is a range of image sizes which can be uploaded - hope this makes some degree of sense, any help appreciated

currently the html is set up as follows:


<div id="content">
<h3>The Title</h3>
<p><img src =... class = 'news_image' />paragraph text paragraph text paragraph text</p>
</div>


the CSS


.news_image {
max-height:300px;
max-width:400px;
border:2px solid black;
float:right;
}

CaptainB
11-08-2007, 04:48 PM
I guess you could just add a <br/> tag after the text to get it above the image?

Liks this:


<div id="content">
<h3>The Title</h3>
<p>paragraph text paragraph text paragraph text<br/><img src =... class = 'news_image' /></p>
</div>

nicky77
11-08-2007, 05:00 PM
Thx for the reply. The only problem with doing that is that if you don't place the <img> tag before the text content, it won't wrap the text around the image, but instead will just place the image underneath the text. I want to wrap text around smaller images or above images which exceed a certain size - however i have no idea how to do this!

vtjustinb
11-08-2007, 05:16 PM
See below post for better code/clarification:

nicky77
11-08-2007, 06:31 PM
many thanks vtjustinb - i've tried to implement the javascript code, but i'm struggling a bit with it, plus the img.getAttribute('width') function is flagging up an error in the Error Console - "img.getAttribute is not a function". Had a look on the web and this function appears to be widely used, so i'm not sure what the problem is....if you get the chance to shed any more light on this, that would be great

p.s i have 3 paragraphs in the content section, therefore i think i would have to loop through each one in the javascript function

vtjustinb
11-08-2007, 06:47 PM
Yeah it's really b/c I was lazy and made some assumptions in the code.

Here's a version of the function that will work generally for all <p>'s inside of #content and shouldn't break if you have your markup written differently:



<script type="text/javascript" charset="utf-8">
var maxWidth = 200;
function checkImages() {
var ps = document.getElementById('content').getElementsByTagName('p');
for (i = 0; i < ps.length; i++) {
var img = ps[i].getElementsByTagName('img')[0];
if (img != null) {
if (img.width > maxWidth) {
ps[i].removeChild(img);
ps[i].appendChild(img);
}
}
}
}
</script>
This function assumes you set the width of the image in the image tag in the markup.

Essentially this code will iterate through your paragraphs that are marked up like this:


<div id="content">
<h2>Title</h2>
<p><img src="test.jpg" width="266" height="132" alt="Test" />text text text text</p>
</div>

And dynamically change it to this:


<div id="content">
<h2>Title</h2>
<p>text text text text <img src="test.jpg" width="266" height="132" alt="Test" /></p>
</div>

if the width of the image in question is greater than the max width you specify in "maxWidth" in Javascript.

This allows the image to be displayed after the text if it's too big to wrap around the image, and if the image is small enough to wrap it will just wrap normally via the float.

nicky77
11-08-2007, 06:52 PM
Yeah it's really b/c I was lazy and made some assumptions in the code.

Here's a version of the function that will work generally for all <p>'s inside of #content and shouldn't break if you have your markup written differently:



<script type="text/javascript" charset="utf-8">
var maxWidth = 200;
function checkImages() {
var ps = document.getElementById('content').getElementsByTagName('p');
for (i = 0; i < ps.length; i++) {
var img = ps[i].getElementsByTagName('img')[0];
if (img != null) {
if (img.width > maxWidth) {
ps[i].removeChild(img);
ps[i].appendChild(img);
}
}
}
}
</script>


you truly are a legend - works like a treat, thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum