HOME ➔ SUPPORT ➔ Community ➔ General CourseLab issues ... Popup window text
Popup window text
  View type:
When I'm editing the popup windows text and I'm inserting an image+text, how is it possible to have the text aroud the image?
When you layout the text the windows looks like a "word's" window but if you click on the image there isn't the possibility of the "layout" command on the immage. Is it right or i have missed something?
 
Hi Di, actually this is incredibly simple to do. Hopefully all of the text will appear here, sometimes html is interpreted by the editor this forum uses and they just disappear!
So here we go
First add your image to the popup using the text editor.
Before adding the text decide which side you want the image on.
Now we get down and dirty with some custom html.
Open the code view for the text editor window, it's the far right icon on the second row.
Look for an angled bracket that's followed by img.. it looks like this '<img'. Scan along the text and you'll see another angled bracket '>' this marks the end of the code associated with the image.
Just before this closing bracket you need to add FLOAT: right; or FLOAT: left;
The image will now move to the left or right edge of the text area.
Add the text and it will wrap.

NOTE: All text editing boxes have the facility for manual editing of the underlying html code. You can do a lot of quite cool things if you understand html and simple javascript.
 
 
I thought that might happen, some of the code was eaten :(
so I'll just explain more in words only, many html statements are wrapped in angle brackets, thats the ones that look like the tip of an arrow. The start always points to the left, the end closing the statement points right.
We are manipulating the image and the tags for this are contained between these brackets and the first text you see will be img.
If you open this link you'll see the basic img tag which you'll see in the text editor html view. http://www.w3schools.com/tags/tag_img.asp
If you add the float: left; or right (it needs the : and ;) you are adding inline CSS. This is interpreted by the web browser which interprets the instruction at runtime.
This adds a whole raft of effects that aren't available through the text editors menu. Most will work in the same way on different browsers BUT this is not guaranteed,
Check the WC3 specs for statement compatibilities if something doesn't work.

 
 
 
Doesn't work for me. I inserted float: left; before the closing bracket of the img instruction, went back into normal editor mode and typed some text. It doesn't wrap.

Then I ran it (view module) and it didn't show wrapped text and actually changed Float: left; into Left: float;

Also the 3schools example doesn't show the use of a float instruction within the img brackets[:(] It uses a separate "type" instruction.

I must have misunderstood? [:confused:]
 
 
 
Doesn't work for me. I inserted float: left; before the closing bracket of the img instruction, went back into normal editor mode and typed some text. It doesn't wrap.

Then I ran it (view module) and it didn't show wrapped text and actually changed Float: left; into Left: float;

Also the 3schools example doesn't show the use of a float instruction within the img brackets[:(] It uses a separate "type" instruction.

I must have misunderstood? [:confused:]
 
 
 
 
actually entering align="left" works perfectly!
 
 
 
Doesn't work for me. I inserted float: left; before the closing bracket of the img instruction, went back into normal editor mode and typed some text. It doesn't wrap.

Then I ran it (view module) and it didn't show wrapped text and actually changed Float: left; into Left: float;

Also the 3schools example doesn't show the use of a float instruction within the img brackets[:(] It uses a separate "type" instruction.

I must have misunderstood? [:confused:]
 
 
 
Thanks a lot Nick, it works. Very clear and detailed !!!
 
 
 
 
You're welcome Di.
Remember that it is something that you can add into any of the text objects where you use the text editor.
This is very useful in the standard text boxes as well.
Subject:
Message options
No additional options