Aligning text around image

T

Trevor L.

BlankThis must have been asked (and answered) so many times but I still can't get it right

I want a page (or part) like this:
___________
| | Text that
| Picture | goes on the
| | right of the picture
|___________| and then flows
underneath it

I have code like this:

style.css
td {vertical-align: top ;}

main.html
.........
<link rel="stylesheet" type="text/css" href="style.css">
..........
<table>
<tr>
<td>
<img src ="images/picture.gif" alt=" ">
Text that goes on the right of the picture and then flows underneath it
</td>
</tr>
.........
What I get is this :
__________
| |
| Picture |
| |
|__________| Text that goes on the right of the picture
and then flows underneath it

Why won't it align to the top?

I tried this
<table>
<tr>
<td>
<img src ="images/picture.gif" alt=" " align="top">
Text that goes on the right of the picture and then flows underneath it
</td>
</tr>

And I got this:
__________
| | Text that goes on the right of the picture
| Picture |
| |
|__________|
and then flows underneath it


Any ideas?
--
Thanks,
Trevor L.



I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Thomas A. Rowe

Select the image, then image properties, appearance tab, and then set the alignment to Left is way
to do it directly in FP without using CSS.

or

You can use a floating table which will allow you add space to the right and bottom of the image to
keep the text from touching the image.

Examples:
http://www.ycoln-resources.com/help/tables.htm
--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================


BlankThis must have been asked (and answered) so many times but I still can't get it right

I want a page (or part) like this:
___________
| | Text that
| Picture | goes on the
| | right of the picture
|___________| and then flows
underneath it

I have code like this:

style.css
td {vertical-align: top ;}

main.html
.........
<link rel="stylesheet" type="text/css" href="style.css">
..........
<table>
<tr>
<td>
<img src ="images/picture.gif" alt=" ">
Text that goes on the right of the picture and then flows underneath it
</td>
</tr>
.........
What I get is this :
__________
| |
| Picture |
| |
|__________| Text that goes on the right of the picture
and then flows underneath it

Why won't it align to the top?

I tried this
<table>
<tr>
<td>
<img src ="images/picture.gif" alt=" " align="top">
Text that goes on the right of the picture and then flows underneath it
</td>
</tr>

And I got this:
__________
| | Text that goes on the right of the picture
| Picture |
| |
|__________|
and then flows underneath it


Any ideas?
--
Thanks,
Trevor L.



I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
M

Murray

Blank

To do it with CSS, try -

style.css
td {vertical-align: top ;}
td img { float:right} /* or float:left */


--
Murray
============

This must have been asked (and answered) so many times but I still can't get
it right

I want a page (or part) like this:
___________
| | Text that
| Picture | goes on the
| | right of the picture
|___________| and then flows
underneath it
 
T

Trevor L.

Murray,

Thank you, that works perfectly.

However, now I find that with this code

<td>
<a href="http://www.abc.net.au/news/australia/weather/default.htm"
target="_top">
<img src="images/abc_banner_logo.gif" alt=""><br>
Australia Weather.<br>
ABC News Online.</a>
</td>
the <br> after the <img> tag is ignored.

That is the text follows after the picture and top aligned. I know the
float:left specifies this, but why is the <br> ignored. Is there some order
of priority of when CSS overrides certain HTML

Oh well, you can't have everything. I guess I'll have to put the text in
another cell.

Either that or define a class img.left {float: left ;} and use class=
"left" inside the img tag where I want float left, and not when I don't
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Thomas A. Rowe

Trevor,

You code should work just fine with the <br> right after the image.

<td><a href="http://www.abc.net.au/news/australia/weather/default.htm" target="_top"><img
src="images/abc_banner_logo.gif" alt=""><br>Australia Weather.<br>ABC News Online.</a></td>


--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
T

Trevor L.

Thomas,

Thanks for your reply. You may not have taken into account that I
implemented the suggestion from Murray to add this to style.css
td {vertical-align: top ;}
td img { float : left ;}

When left float is in force a single <br> does not push the text below the
image. If there are enough line breaks, then it will.

I don't think this is a flaw, but is by design. One just needs to know the
rules
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

Murray and Thomas,
Thank you for your help

Murray,
I like investigating ways of doing what I want in CSS rather than in the
HTML (although from reading this newsgroup, I understand that is the
opposite of what you suggest, Thomas).

The padding option is good, and also works for the image as you have said,
Thomas
--
Many Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Thomas A. Rowe

Trevor,

I just prefer to not use CSS, because I feel that I have more control over individual page layout
and content doing it the "old fashion way".

However, there is no reason not to use CSS, if wish to learn and used it.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
M

Murray

Trevor:

Go for it dood. There's so much there to like. Then together we can start
to hammer on the Thomases.... 8)
 
T

Terry Stockdale

Murray,

Thank you, that works perfectly.

However, now I find that with this code

<td>
<a href="http://www.abc.net.au/news/australia/weather/default.htm"
target="_top">
<img src="images/abc_banner_logo.gif" alt=""><br>
Australia Weather.<br>
ABC News Online.</a>
</td>
the <br> after the <img> tag is ignored.

That is the text follows after the picture and top aligned. I know the
float:left specifies this, but why is the <br> ignored. Is there some order
of priority of when CSS overrides certain HTML

Oh well, you can't have everything. I guess I'll have to put the text in
another cell.

Either that or define a class img.left {float: left ;} and use class=
"left" inside the img tag where I want float left, and not when I don't
Click to expand...

I float a lot of images on my websites, as well as floating Google
Adsense ads. For example, take a look at my Home Theater PC pages
starting on http://www.terrystockdale.com/htpc/htpc_1.shtml page and
their CSS layout file.

Note that the floating has some unusual attributes with it. Firefox
and Opera do well with what you would expect, but IE won't float (at
least float right) without using
display: block; /* added for IE */
margin: auto; /* added for IE */
position: relative; /* added for IE */

Terry
Visit my computer tips, coffee pages and forums at
http://www.terrystockdale.com
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

pages don't work in Firefox? 2
Sript error when previewing page. 4
Adsense breaks Frontpage 6
"open or save" message when opening an ASP form from either IE or FF1.5 1
Centering images 13
Adding text over a graphic image 4
ASP page doesn't open 3
Pages in Inline frames 1

Top