Hi, I use a class in my CSS for thumb nail images app. as follows

.thumbs {border:1px solid #ccc;float:left;padding:4px;margin:4px 10px 6px 0;background:#f5f4ee}

Then for my image upload I have the following

<img src="http://www.b2evolution.com/avatar-4d.gif" alt="" class="thumbs" />

[URL=http://www.wow-factor.com/index.php/2005/03/23/firefox_in_the_vinyard]Here's a link[/URL] if thats the type of thing your talking about.

Yes...that is what I needed. However, my text starts at the bottom of the picture..alighned to the right of it. Is there a way to get it to start at the TOP of the picture aligned to the right of it (like your example link you offered)?

W. Hill

You can see what I mean at http://www.rtrc.net/blog (picture of my stupid kitty of whom my 85 lb German Shepherd wants for dinner...
(please be kind as this blog is new and I am currently working on it while trying to not lose my wife to a divorce due to my irritability... :lol: )

Thanks!

Here's that post as I entered it
Just make sure you use the FLOAT:LEFT ( or RIGHT ) and wrap everything else in <p> tags!! Should work just fine

<h3>Industry adoption has a flow on.</h3><img src="http://www.blah blah.com/media/animage.gif" alt="" class="thumbs" /><p>As a strong supporter <em>and consumer</em> of Australian Wines, this feature storey in the <cite>Sydney Morning Herald</cite> caught my eye.</p><p>The main point of the story is that when a major player in the business community changes their browser, it has a very real impact on <strong>everyone that provides products or services to that business.</strong></p><cite>Firefox explorers By Nigel McFarlane March 22, 2005.<br /><a href="http://www.smh.com.au/articles/2005/03/21/1111253920087.html" title="Firefox explorers. SMH article"><strong>Firefox explorers</strong></a></cite><blockquote><p>When Bill Robertson decided last year to switch 450 workers and 100 desktops at De Bortoli Wines to the open source Firefox web browser, he had the company's future in mind.

In moving to the free Firefox, he did more than just install a web browser that rivals Microsoft's Internet Explorer, which comes for free with every PC running the Windows operating system. The CIO defined a radically new desktop interface for the company and forced his software suppliers to comply with his technology direction, which had a heavy emphasis on open standards so he would no longer be locked into any one vendor's products.</p></blockquote>

John,

Thanks for your help! This is working well using the CSS callout...

Thanks!

W. Hill

Hi John,

Do you write those CSS Code in :

"image styles" or "Various Tags & Classes" ?

I am sorry for this question, I am a newbe in CSS :oops: .
Thank you so much for your answer! :lol:

Caro

Quaevis,

Doesn't matter WHICH css file you put your formatting in, as they are all concatenated and used as a "single" CSS instruction set.

I'd recommend putting it in whichever makes the most sense to you.

(I try to keep all my blog CSS together in a group and label it using the "/* comment tags */")

If you like, you can have a peek at my CSS file [url=http://randsco.com/blogs/skins/rands/rands.css]here[/url]

Because you are new to CSS, I would recommend the [url=http://www.w3schools.com/css/default.asp]W3C CSS tutorial[/url] (it's free and has live examples ... type in code, see the result).

Cheers,

Scott :)

Hi John,

Do you write those CSS Code in :

"image styles" or "Various Tags & Classes" ?

I've converted my main CSS to a .php file for gzip purposes, so I include most of the structural css in that one file, while still linking to the other CSS files.

As stk says, they are all loaded as required anyhow.

stk wrote:

Quaevis,

Doesn't matter WHICH css file you put your formatting in, as they are all concatenated and used as a "single" CSS instruction set.

I'd recommend putting it in whichever makes the most sense to you.

(I try to keep all my blog CSS together in a group and label it using the "/* comment tags */")

If you like, you can have a peek at my CSS file [url=http://randsco.com/blogs/skins/rands/rands.css]here[/url]

Because you are new to CSS, I would recommend the [url=http://www.w3schools.com/css/default.asp]W3C CSS tutorial[/url] (it's free and has live examples ... type in code, see the result).

Cheers,

Scott :)

Great recommendation for us newbies :D -- Thanks!

W. Hill

Thank you all for your help and recommendation!!

Caro ;)

I dont know what I'm missing here. I've been following some of these suggestions but I can't seem to get the text to format correctly around the graphics. It'd be easy (of course) if I could just format my page in DW and then copy/paste the code but b2 doesn't seem to enjoy my code inserts...

I'd really appreciate some more step-by-step tips. Thanks

kuyaedz,

Don't know about "step-by-step", but I think that all that's required is something like:

<div><img src="yoursite.com/image.jpg" alt="alt text" style="float:left/right"></div>

<p>Type whatever text you want here, as it should flow around the image, on the right or the left, depending on which way you decide to float your image.</p>

You can always simply go to my site and "view source" (rt-hand click and select "view source") to see what my html looks like.

Perhaps you can post a link to your site and a particular image/text that you're having trouble with. I'd be happy to help you get it working. :)

Cheers,

-Scott

Invalid post, please correct these errors:
Tag img may not have attribute style

I just tried your suggestions using the style:left and I get this error. Any ideas?

The page in particular that I'm trying to work on is www.christeredwards.com/index.php?blog=7

This is a mini-bio about my fiance and I'd like to get the text to wrap around the images (and perhaps the images to alternate right/left).

Appreciate the help!

The error indicates that the _formatting.php file (html-checker) isn't configured for the "style" attribute.

Two suggestions: (1) use the CSS file instead of inline formatting (2) Modify the _formatting.php file to allow the "style" attribute.

Doing what you want isn't that hard. We'll get it figured out. No sweat.

Right now, however, I'm involved in "family time" so your solution will have t wait a bit.

Hope this is OKAY.

-Scott

Hi -

I'm pretty new to all this too, and mostly doing it by trial and major error, but this is working for me:

In the post:

<img src="http://yoursite.com/images/whatever.jpg" class="floatimgleft" alt="something" title="something" /> text goes here; end with <br clear="all" /> if you want to stop the wrap manually (if the text you want by the picture is very short, for example)

In the css file:

.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

.floatimgright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

You can play with the margins to suit your site, of course. You'll probably want at least some margin to keep your text from crushing up against the image.

I hope this helps and isn't repeating. :)

Well I just tried your suggestion using the CSS edit and it seems to work fine. I think what I need to do is go buy myself a php manual & a CSS tutorial as well. I'm still learning quite a bit daily but I'm not to the point that things always make sense lol.

Thanks so much for all the help!

You can use the margin shortcut method, rather than typing out top/right/bottom ... it would look like:

margin: 10px 10px 10px 0px;

It's of the form: "margin: top right bottom left;".

PS - don't buy a css manual ... there are plenty of free, online resources. I'd recommend starting with the [url=http://www.w3schools.com/css/default.asp]w3schools css tutorial[/url]. It's good and it's free. They even have examples that you can modify the CSS and see the result, real-time. :D

hmmm I shall try this tonight when I get home. Thanks for this thread folks.

Woah. It seems like people are overcomplicating this, or im misunderstanding.

If you want images and text so it looks something like [url=http://www.ifmicecouldmovemountains.com/site/cd/cd.php/2005/04/12/the_mountain_goats_the_sunset_tree]THIS[/url] then all you have to do is add

align="left"

into the image code so it looks something like:

<img src="http://www.YOURSITE/IMAGE.jpg" border="0" width="?" height="?" align="left" alt="?" />

Or of course "centre" or "right". Just place that image code before the start of the text...

Or then again, I may be COMPLETELY wrong and I've misunderstood what you wanted to do.

lostinmysphere.... I just tried your simple answer. The previous blog ran up the right side of the image
since the paragraph was short. Any way of stopping this? Thanks J

uhh not sure what you mean :-/ Do you have an example i can see?

maybe the method i suggested works on my site due to my layout...

http://www.hodad66.com/hodadblog/

I'm using Firefox & on my screen my "no waves yard work" picture spans both it's text but then the previous "The swell is gone....almost" text also....... any ideas?

Thanks for your time by the way.... :)

Umm I'm really not sure. Did you definately use:

align="right"

or left or what not?

To be honest I have a REALLY basic understanding of how all this works...

EDIT: if you did use align="right" try using left and the see if the same thing happens.

I'm the same as you. My understanding is limited so I just try plugging in suggestions. Actually the current version was somthing that I picked up in a WordPress forum

img.right { 
        padding: 4px; margin: 0 0 2px 7px; display: inline;
        }
img.left { 
        padding: 4px; margin: 0 7px 2px 0; display: inline;
        }
.right { float: right;
        }
.left { float: left;
        }

then

<img src="http://hodad66.com/hodadblog/media/frontrock.jpg" class="right" />

I've had the same results with both... oh well, guess I had better learn to be more verbose or use smaller pics...... :)

Thanks again J

what?! i don't understand what you are doing.

I have altered nothing in the config or set up blah blah blah.

Simply:

when you are posting a pic you have something that looks like:

<img src="http://hodad66.com/hodadblog/media/frontrock.jpg" class="right" /> 

in your blog before you publish it. Simply change that to

<img src="http://hodad66.com/hodadblog/media/frontrock.jpg" align="right"  /> 

then publish it. That will work.

lostinmysphere.... my apologies, I was cross referensing different posts.... Duh. Your answer works but the previous post still rides up sooooo all I'm doing is holding the space open with a series of periods.

My answer to you was AFTER I had inserted the code in the CSS file as discussed above. I won't be doing that anymore as your answer is more streightforward & after all, whats a few small, dots along the side. You were a great help.... :)

I didn't make ANY changes to the css.

I just looked at the source code for your page and its NOT showing "align=right". Until you put that in it won't work as its supposed to.

on that pic I did use align (just checked) but since the CSS coding (which I added)
includes "margin" this allows for some setback each time I use

class="left"
class="right"

and only the periods will hold the space from being invaded by the past blog subject.
Either way, in my setup, without the periods neither code will protect the empty space. 8|

Have you tried my method without your altered CSS. i.e. remove the css and

class=""

and just adding

align="right"

?

If so, and that doesn't work, then yeah just do what you are doing now.

I tried it first before I even found the other CSS code on the WordPress forum. Previous post slid up... that's when I started to mess around with the CSS. Dots ain't perfect but it works OK for now..... Thanx again...:)

ah i see. Okay...

I don't understand why it doesn't work for you, but like i said, it may just be the way my style is set up.

Sorry.

The align="left" command works great for me.

How can I easily control the space between the wrapped text and the picture? Currently, the text is right up against the pic.

Is it as easy as adding padding to the content div?

Blogger ...

FYI ... the "align" attribute is deprecated in XHTML, in favor of the "float" property used in the "style" attribute.

Here's where you can use your new-found margin knowledge! ;)

If the image is floated left, you can control the margin between the pic and the text by increasing the margin length on the right side of the pic (i.e. - margin:0 10px 0 0; )

Conversely, if it's floated right, control the margin on the left side of the pic (i.e. - margin:0 0 0 10px; ).

Remember ... the 4 number shortcut is in the order: TOP RIGHT BOTTOM LEFT;

An easy way to float images is to define a class for "right" and "left"

In the CSS:
img.right { 
   float:right;
   margin:0 0 0 10px;
}
img.left {
   float:left;
   margin:0 10px 0 0;
}

In the XHTML:
  <img class="left" src="http://yoursite.com/image.jpg" alt="description" />

(It's so easy that there is probably ALREADY this class defined in your img.css file ;) ... there IS, but the selectors are "img.leftmargin" and "img.rightmargin" - have a peek.)

Cheers,

-stk :D

Hey,

Excuse me jumping in here like this, but I have some problems still. I get images to go to the left or right of the text, but what I want to know is how I can after I have written some text say to the left of the image, if then the next text I would like to go underneath it. This only happens obviosly if the height of the image is longer than the height of the text I would like to go to the left of it.

I want something like this:

--------------------
Text above Image
_____
|____| Text to the right of Image,
| img | followed by another line.
|____|

Text I want underneath the Image again.

--------------------

What I get is this:

--------------------
Text above Image
_____
|____| Text to the right of Image,
| img | followed by another line.
|____|
|____| Text I want underneath the Image again.

--------------------

How can I force "Text I want underneath the Image again." underneath the image again?

I'm sure this is just some stupid html thing I'm not aware of.

Thnx a ton

Inker,

There's a number of ways of accomplishing this, but probably the easiest one is to put the image in a DIV, float the image to either the left (or right), inside the DIV, then expand the DIV to the size of the image, placing whatever text you want to the side of the image. Outside this DIV, place the text you want below. The HTML would look like this:

<div class="sideText">
<img class="left/right" src="blah" alt="blah" />
<p>Text you want next to the image</p>
</div>

<p>The text you want to be below the image</p>

The CSS would then look something like this:

div.sideText { height:100%; overflow:hidden; }
img.right { float:right; margin:0 0 0 10px; }
img.left { float:left; margin:0 10px 0 0; }

That should give you what you want. :D

Cheers,

stk

PS - Thanks for taking the time to make the ASCII drawing. It made it clear what you wanted. (I tested this, btw, so I know it works in both IE ... which needs the "height:100%" and Mozilla ... which needs the "overflow:hidden")

I'll leave the test on [url=http://randsco.com]my blog[/url]. ;) Send me an email after you've gotten this and I can delete it.

Awesome, works. But the text under the image is immediatly after the image, can I put a margin into the div too (bottom one I guess, I seem to have enough space on the top)?

Thanks for you quick help

Several ways.

• Bottom margin in the <div>, [*]top margin in the first <p> after the <div>, [*]bunch of <br /> tags immediately before the first <p> after the <div>, or [*]even an empty <p>&nbsp;</p> before the first <p> after the <div>[/list:u]

I think the 2nd one is best. Code would look like

<p style="margin-top:##px;">Text you want.</p>

The CSS is done "inline" (in the body of the HTML), because it's a one-off. You'll need to modify the _formatting.php file to allow the "style" attribute in a <p> tag to do this, however, because the default b2evo install doesn't allow it. (It should, IMO). Cheers, Glad to help. :D (I'll delete the post now).

For something clearing the img, there's an easier way than the div example:

<p><img class="floatleft" src="blah" alt="blah" />
Text you want next to the image</p>
<p class="clearleft">The text you want to be below the image</p>

CSS:

.floatleft{ float:left }
.clearleft{ clear:left }

The IMG is inside the P so that the text and the image start at the same height.

Thnx both of you :-) Got a working solution now.