how do i align an image to the bottomright of a table but also with a z-index of -1 so i can type over it? more info here (<!-- m --><a class="postlink" href="http://www.quake3world.com/ubb/Forum3/HTML/057697.html">http://www.quake3world.com/ubb/Forum3/HTML/057697.html</a><!-- m -->?)<br />
<br />
just a note: you cant use the word position anywhere in the code
<br />
<br />
thanks<br />
-glossy<!--content-->Hi Glossy,<br />
<br />
Can you not align the image in a table cell as a background? If you fix the table cell dimensions, and leave the dimensions to the table, this should free up the table to be resizabe without disturbing the image size.<br />
<br />
Without using the term position, this is the only way i can think of for now, but i will have a play around and see if i can think of anything.<br />
<br />
Goody
<!--content-->i dont think i know what you mean.<br />
<br />
like this?:<br />
<br />
<table><tr width=750><td colspan=2><br />
text text text<br />
</td></tr><tr width=750><td><br />
more text? not sure<br />
</td><td width=50><br />
<img src=http://www.htmlforums.com/archive/index.php/etc></td></tr></table><br />
<br />
??<br />
<br />
-glossy<br />
<br />
edit: it chewed up and spat out my <> tags
<!--content-->Hi Glossy!<br />
<br />
Hope I understood you right (and that you can use inline style in your forum) - try this:<br />
<br />
<br />
<table border="0" height="100%" width="100%" <br />
cellspacing="0" cellpadding="0" style="background-image: <br />
url('your_background.jpg'); background-repeat: no-repeat; <br />
background-position: right bottom"><br />
<td>Your text<br />
</td><br />
</table><!--content-->Uhm... forgot to mention you might want to add some cellpadding...<br />
This will not interfere with the position of the background image, but you'll get some air around your text.<br />
Uhm.. sorry if I'm telling you things you already know...<!--content-->upon further testing in the forum i found you cannot use <table, <tr or <td...<br />
<br />
but i will further muck around with some of your suggested methods and try to implement them anyway...<br />
<br />
further suggestions still welcome!<br />
<br />
edit: again, excellent idea, am tring to use it.<br />
<br />
-glossy<!--content-->and another thing
<br />
<br />
you can contact me on ICQ: 170131153<br />
or MSN: <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e --><br />
<br />
-glossy<!--content-->sorry about the triple-post, but i think i've done it!!!!<br />
<br />
<br />
<a style="background-color: #000000; background-image: url('http://glossy****.tripod.ca/msgback.jpg');<br />
background-repeat: no-repeat; background-position: right bottom;"><br />
<font color=white face="verdana ref" size=4><br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...</font></a><br />
<br />
<< very very pleased!<br />
<br />
-glossy<!--content-->Great job, Glossy! Isn't this exciting?<br />
<br />
If you can use div in your code, it will look even better!<br />
<br />
<br />
<div style="background-color: #000000; background-image: url('http://glossy****.tripod.ca/msgback.jpg'); background-repeat: no-repeat; background-position: right bottom"><br />
<font color=white face="verdana ref" size=4><br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...</font></div><br />
<br />
<br />
<!--content-->uurrrrgggh, this isnt good. 
<br />
<br />
<br />
<div style="background-color: #000000; background-image: url('http://glossy****.tripod.ca/msgback.jpg'); background-repeat: no-repeat; background-position: right bottom"><br />
<font color=white face="verdana ref" size=4><br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...</font></div><br />
<br />
<br />
because the forum filters position (the same way this forum filters swear words) this wont work either.<br />
are there any equivilants to background-position that dont use position in it?<br />
<br />
-glossy<!--content-->why make it hard on yourself and just use<br />
<br />
<td background="image.jpg"><br />
<br />
or add another table inside that cell you want and add the image to it's background.<br />
<br />
and what can't you use in this forum?<br />
<br />
why can't you use<br />
<br />
<table, <tr or <td...<!--content-->to set everything straight:<br />
you cannot use position anywhere in the code, including as part of other words (background-position etc.)<br />
you cannot use <table, <tr or <td anywhere in the code (which means no tables, basically)<br />
i need the image aligned to the bottom right of the text area.<br />
i need to be able to type over the top of the image.<br />
<br />
-glossy<!--content-->then you are just asking for trouble if you cannot use any of those. you can use a <div> tag and relatively postion it with the z-index.<br />
<br />
<div style="top:40; left:100; z-index:5; position:absolute"><img src=http://www.htmlforums.com/archive/index.php/"pic.jpg"></div><br />
<br />
if you do it that way then hope and prey that everybody has the same browser width as it won't be in the same spot for everybody.<br />
<br />
you cannot do it without using some form of postioning.<br />
<br />
if you can't use a table then don't say you need to postion it in the bottom right of a table<!--content-->sorry about the table thing, i only recently found out i couldnt use it.<br />
<br />
-glossy<!--content-->then you are stuck with the div tag.<!--content-->
<br />
just a note: you cant use the word position anywhere in the code
<br /><br />
thanks<br />
-glossy<!--content-->Hi Glossy,<br />
<br />
Can you not align the image in a table cell as a background? If you fix the table cell dimensions, and leave the dimensions to the table, this should free up the table to be resizabe without disturbing the image size.<br />
<br />
Without using the term position, this is the only way i can think of for now, but i will have a play around and see if i can think of anything.<br />
<br />
Goody
<!--content-->i dont think i know what you mean.<br /><br />
like this?:<br />
<br />
<table><tr width=750><td colspan=2><br />
text text text<br />
</td></tr><tr width=750><td><br />
more text? not sure<br />
</td><td width=50><br />
<img src=http://www.htmlforums.com/archive/index.php/etc></td></tr></table><br />
<br />
??<br />
<br />
-glossy<br />
<br />
edit: it chewed up and spat out my <> tags
<!--content-->Hi Glossy!<br /><br />
Hope I understood you right (and that you can use inline style in your forum) - try this:<br />
<br />
<br />
<table border="0" height="100%" width="100%" <br />
cellspacing="0" cellpadding="0" style="background-image: <br />
url('your_background.jpg'); background-repeat: no-repeat; <br />
background-position: right bottom"><br />
<td>Your text<br />
</td><br />
</table><!--content-->Uhm... forgot to mention you might want to add some cellpadding...<br />
This will not interfere with the position of the background image, but you'll get some air around your text.<br />
Uhm.. sorry if I'm telling you things you already know...
<!--content-->upon further testing in the forum i found you cannot use <table, <tr or <td...<br /><br />
but i will further muck around with some of your suggested methods and try to implement them anyway...<br />
<br />
further suggestions still welcome!<br />
<br />
edit: again, excellent idea, am tring to use it.<br />
<br />
-glossy<!--content-->and another thing
<br /><br />
you can contact me on ICQ: 170131153<br />
or MSN: <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e --><br />
<br />
-glossy<!--content-->sorry about the triple-post, but i think i've done it!!!!<br />
<br />
<br />
<a style="background-color: #000000; background-image: url('http://glossy****.tripod.ca/msgback.jpg');<br />
background-repeat: no-repeat; background-position: right bottom;"><br />
<font color=white face="verdana ref" size=4><br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...</font></a><br />
<br />
<< very very pleased!<br /><br />
-glossy<!--content-->Great job, Glossy! Isn't this exciting?
<br /><br />
If you can use div in your code, it will look even better!<br />
<br />
<br />
<div style="background-color: #000000; background-image: url('http://glossy****.tripod.ca/msgback.jpg'); background-repeat: no-repeat; background-position: right bottom"><br />
<font color=white face="verdana ref" size=4><br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...</font></div><br />
<br />
<br />
<!--content-->uurrrrgggh, this isnt good. <br /><br />
<br />
<div style="background-color: #000000; background-image: url('http://glossy****.tripod.ca/msgback.jpg'); background-repeat: no-repeat; background-position: right bottom"><br />
<font color=white face="verdana ref" size=4><br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...<br />
The quick brown fox jumps over the lazy dog...</font></div><br />
<br />
<br />
because the forum filters position (the same way this forum filters swear words) this wont work either
.<br />are there any equivilants to background-position that dont use position in it?<br />
<br />
-glossy<!--content-->why make it hard on yourself and just use<br />
<br />
<td background="image.jpg"><br />
<br />
or add another table inside that cell you want and add the image to it's background.<br />
<br />
and what can't you use in this forum?<br />
<br />
why can't you use<br />
<br />
<table, <tr or <td...<!--content-->to set everything straight:<br />
you cannot use position anywhere in the code, including as part of other words (background-position etc.)<br />
you cannot use <table, <tr or <td anywhere in the code (which means no tables, basically)<br />
i need the image aligned to the bottom right of the text area.<br />
i need to be able to type over the top of the image.<br />
<br />
-glossy<!--content-->then you are just asking for trouble if you cannot use any of those. you can use a <div> tag and relatively postion it with the z-index.<br />
<br />
<div style="top:40; left:100; z-index:5; position:absolute"><img src=http://www.htmlforums.com/archive/index.php/"pic.jpg"></div><br />
<br />
if you do it that way then hope and prey that everybody has the same browser width as it won't be in the same spot for everybody.<br />
<br />
you cannot do it without using some form of postioning.<br />
<br />
if you can't use a table then don't say you need to postion it in the bottom right of a table<!--content-->sorry about the table thing, i only recently found out i couldnt use it.<br />
<br />
-glossy<!--content-->then you are stuck with the div tag.<!--content-->