Hello
Can anyone tell me how I can use css to align text left and image right in a single table cell.
It's part of a larger menu each button with a 1 pixel border defined in the class "nav-border". I've tried using align right within the image tag but this pushes everything out and obviously ligns the text right too which I don't want. The code so far is as follows:
<tr>
<td colspan="2" class="nav-border" align="right">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html">News<img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
</tr>
?????????
Yes I would love to get rid of tables but....Try this:<table border>
<tr>
<td width=300>
<span style="float: left">This is some text</span>
<span style="float: right"><img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.gif"></span>
</td>
</tr>
</table>thanks gil, this seems to work in most browsers (even netscape 4 which I still take notice of ( ;
but...
in explorer 5 on a mac the icon images which are floated right seem to have just disappeared into thin air. Also netscape on a mac the links on the texts and icons don't work at all. Is there a fix for this, I don't particularly want to use a separate style sheet for a mac if necessary.
This is the first time I've used this forum it seems really good!Try this page:
<!-- m --><a class="postlink" href="http://www.css.nu/pointers/bugs.htmlIf">http://www.css.nu/pointers/bugs.htmlIf</a><!-- m --> I were you I wouldn't use css at all, I'd just write;
<table>
<tr>
<td align="justify">
<a blah="blahblah">Here is your link.& nbsp; & nbsp; & nbsp;
(you may need a few more & nbsp; 's, remember to take the spaces out from between the & and the nbsp; ) and you'll end up with an underline going accross the cell unless you hav taken that off the link decoration.
<img src=http://www.webdeveloper.com/forum/archive/index.php/"link.gif"></a>
</td>
</tr>
</table>
that should work for all browsers because it's just plain old html.
Don't quote me on that because I just made it up on the spot so it might not work at all.Then the image is on the next line, not the same line.You can use CSS, but you'll need to do three things:
1. Set the text-align property of the table cell to left. This affects text and images.
2. Set the float property of the image to float: right;
3. If the image has a greater height than the text, the image will seem to overlap the edge of the table cell on some browsers. You would need to add something else below the image and set in CSS clear: both; That will stretch the table cell below the image.
<table>
<tr>
<td style="text-align: left;">
<image src=http://www.webdeveloper.com/forum/archive/index.php/"..." style="float: right;" alt="right aligned image">
this text is left aligned
<image src=http://www.webdeveloper.com/forum/archive/index.php/"invisibleGIF.gif" width="1" height="1" style="clear: both;">
</td>
</tr>
</table>
Try playing with that and see how it works.Originally posted by tgodding
Hello
Can anyone tell me how I can use css to align text left and image right in a single table cell.
<tr>
<td colspan="2" class="nav-border" align="right">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html">News<img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
</tr>
Here is your code modified
<tr>
<td colspan="2" class="nav-border" align="left">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html">News<img align= right src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
</tr>Originally posted by tgodding
Yes I would love to get rid of tables but....
I for one, would like to hear the rest of this statement. Whats stopping you?
Modification to Gil's method:
<td width=300>This is some text
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.gif" alt="Alt" style="float: right"></span>
</td>
Whenever you float an element, specify its width (except for images). Else the element will take width of its parent element.
Getting back to Yes I would love to get rid of tables but....
~~~ Throw away the unnecessary tables ~~~
<div class="nav-border">
<div>Link 1 <img src=http://www.webdeveloper.com/forum/archive/index.php/"link1" alt="Link 1"></div>
<div>Link 2 <img src=http://www.webdeveloper.com/forum/archive/index.php/"link2" alt="Link 2"></div>
...
<div>Link n <img src=http://www.webdeveloper.com/forum/archive/index.php/"linkn" alt="Link n"></div>
</div>
div.nav-border {position: absolute; border...}
div.nav-border div {text-align: left}
div.nav-border div img {float: right}
~~~ End of Bull Sh*t ~~~Oops, an error above... <img> should come before the text.
Can anyone tell me how I can use css to align text left and image right in a single table cell.
It's part of a larger menu each button with a 1 pixel border defined in the class "nav-border". I've tried using align right within the image tag but this pushes everything out and obviously ligns the text right too which I don't want. The code so far is as follows:
<tr>
<td colspan="2" class="nav-border" align="right">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html">News<img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
</tr>
?????????
Yes I would love to get rid of tables but....Try this:<table border>
<tr>
<td width=300>
<span style="float: left">This is some text</span>
<span style="float: right"><img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.gif"></span>
</td>
</tr>
</table>thanks gil, this seems to work in most browsers (even netscape 4 which I still take notice of ( ;
but...
in explorer 5 on a mac the icon images which are floated right seem to have just disappeared into thin air. Also netscape on a mac the links on the texts and icons don't work at all. Is there a fix for this, I don't particularly want to use a separate style sheet for a mac if necessary.
This is the first time I've used this forum it seems really good!Try this page:
<!-- m --><a class="postlink" href="http://www.css.nu/pointers/bugs.htmlIf">http://www.css.nu/pointers/bugs.htmlIf</a><!-- m --> I were you I wouldn't use css at all, I'd just write;
<table>
<tr>
<td align="justify">
<a blah="blahblah">Here is your link.& nbsp; & nbsp; & nbsp;
(you may need a few more & nbsp; 's, remember to take the spaces out from between the & and the nbsp; ) and you'll end up with an underline going accross the cell unless you hav taken that off the link decoration.
<img src=http://www.webdeveloper.com/forum/archive/index.php/"link.gif"></a>
</td>
</tr>
</table>
that should work for all browsers because it's just plain old html.
Don't quote me on that because I just made it up on the spot so it might not work at all.Then the image is on the next line, not the same line.You can use CSS, but you'll need to do three things:
1. Set the text-align property of the table cell to left. This affects text and images.
2. Set the float property of the image to float: right;
3. If the image has a greater height than the text, the image will seem to overlap the edge of the table cell on some browsers. You would need to add something else below the image and set in CSS clear: both; That will stretch the table cell below the image.
<table>
<tr>
<td style="text-align: left;">
<image src=http://www.webdeveloper.com/forum/archive/index.php/"..." style="float: right;" alt="right aligned image">
this text is left aligned
<image src=http://www.webdeveloper.com/forum/archive/index.php/"invisibleGIF.gif" width="1" height="1" style="clear: both;">
</td>
</tr>
</table>
Try playing with that and see how it works.Originally posted by tgodding
Hello
Can anyone tell me how I can use css to align text left and image right in a single table cell.
<tr>
<td colspan="2" class="nav-border" align="right">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html">News<img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
</tr>
Here is your code modified
<tr>
<td colspan="2" class="nav-border" align="left">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html">News<img align= right src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
</tr>Originally posted by tgodding
Yes I would love to get rid of tables but....
I for one, would like to hear the rest of this statement. Whats stopping you?
Modification to Gil's method:
<td width=300>This is some text
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever.gif" alt="Alt" style="float: right"></span>
</td>
Whenever you float an element, specify its width (except for images). Else the element will take width of its parent element.
Getting back to Yes I would love to get rid of tables but....
~~~ Throw away the unnecessary tables ~~~
<div class="nav-border">
<div>Link 1 <img src=http://www.webdeveloper.com/forum/archive/index.php/"link1" alt="Link 1"></div>
<div>Link 2 <img src=http://www.webdeveloper.com/forum/archive/index.php/"link2" alt="Link 2"></div>
...
<div>Link n <img src=http://www.webdeveloper.com/forum/archive/index.php/"linkn" alt="Link n"></div>
</div>
div.nav-border {position: absolute; border...}
div.nav-border div {text-align: left}
div.nav-border div img {float: right}
~~~ End of Bull Sh*t ~~~Oops, an error above... <img> should come before the text.
Originally posted by jdavia
Here is your code modified
Thanks but already tried that, it just pushes the cell out .Originally posted by nkaisare
I for one, would like to hear the rest of this statement. Whats stopping you?
I'm designing/developing a very large council site, which is basically quite a large portal. I'm trying to use a mixture of CSS1, XHTML and very simple tables. In some worlds CSS2 is still not totally safe, one day it will be but until then some of us have to comprimise! I have to test on Netscape 4, Explorer 3 and the site has to be at least readable in browsers before this. Tables are still useful for complicated layout and complex data. If I were working on a small site it would be a completely different kettle of fish!
... Thankyou for all your help, I think the solution lies in a combination of your replies.Originally posted by tgodding
I took out colspan=2, added a width to the cell, and added one more blank column to your code.
Now the text is left and the image next to it.
<td class="nav-border" align="center"width="60">
<a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"news.html"> News <img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>
<td align="center"width="540"></td>