Hi<br />
<br />
I have a table which consist of a menu part and a "body" part. When selecting different menu options the body part should change accordingly. the changing body part i have carried out using css. when the body part of a correspending menu item is not activated the visibility is naturally hidden and when activated visible (done with jave script).<br />
i have a problem positioning the text inside the body, which is one single table cell (inside <td>). i have used absolute positioning. this is not correct to use since when resizing the window the text is then outside the table cell.<br />
what is the correct way to do this ?
<br />
thanks!<!--content-->Do not use positioning at all. if you use position absolute you remove the element from the normal html flow context. simply keep your DIV element inside the table cell, but do not set positioning.<br />
<br />
Simply hide/show the text with the visibility (or display) properties.<br />
<br />
example<br />
<br />
<table><br />
<tr><br />
<td><br />
<div id="showHideMe"><br />
Here is text to hide show<br />
</div><br />
</td><br />
</tr><br />
</table><br />
<br />
<br />
document.showHideMe.style.display='none';<br />
document.showHideMe.style.display='block';<br />
<br />
or <br />
<br />
document.showHideMe.style.visibility='visible';<br />
document.showHideMe.style.visibility='hidden';<br />
[/code]<br />
<br />
You do not have to set positioning for the display to turn on or off. Simply use % width as style sheet setting for the element:<br />
<br />
<style><br />
#showHideMe { width: 100%; display: block; }<br />
</style><!--content-->hi and thanks for the advise.<br />
But since i have many options in the <td> table cell that are hidden and visible it doe snot work. The text seem to be jumped on a different line for the consequtive options. i mean if i dont define the position they jump. text 2 comes on the next line of text 1 and text 3 comes on the next line from text 2 etc.... if u know what i mean! any advise?<!--content-->The only thing I can think off is creating an arbitary wide table cell using a hidden image (transparent gif) and then make sure your positioned images are not wider than that, e.g.<br />
<br />
<style><br />
#sprite1 { width: 200px; ....}<br />
#sprite2 { width: 200px; ....}<br />
#sprite3 { width: 200px; ....}<br />
#sprite4 { width: 200px; ....}<br />
</style><br />
<br />
<td><br />
<img src=http://www.htmlforums.com/archive/index.php/"blank.gif" height=1 width=210><br><br />
</td><!--content-->
<br />
I have a table which consist of a menu part and a "body" part. When selecting different menu options the body part should change accordingly. the changing body part i have carried out using css. when the body part of a correspending menu item is not activated the visibility is naturally hidden and when activated visible (done with jave script).<br />
i have a problem positioning the text inside the body, which is one single table cell (inside <td>). i have used absolute positioning. this is not correct to use since when resizing the window the text is then outside the table cell.<br />
what is the correct way to do this ?
<br />thanks!<!--content-->Do not use positioning at all. if you use position absolute you remove the element from the normal html flow context. simply keep your DIV element inside the table cell, but do not set positioning.<br />
<br />
Simply hide/show the text with the visibility (or display) properties.<br />
<br />
example<br />
<br />
<table><br />
<tr><br />
<td><br />
<div id="showHideMe"><br />
Here is text to hide show<br />
</div><br />
</td><br />
</tr><br />
</table><br />
<br />
<br />
document.showHideMe.style.display='none';<br />
document.showHideMe.style.display='block';<br />
<br />
or <br />
<br />
document.showHideMe.style.visibility='visible';<br />
document.showHideMe.style.visibility='hidden';<br />
[/code]<br />
<br />
You do not have to set positioning for the display to turn on or off. Simply use % width as style sheet setting for the element:<br />
<br />
<style><br />
#showHideMe { width: 100%; display: block; }<br />
</style><!--content-->hi and thanks for the advise.<br />
But since i have many options in the <td> table cell that are hidden and visible it doe snot work. The text seem to be jumped on a different line for the consequtive options. i mean if i dont define the position they jump. text 2 comes on the next line of text 1 and text 3 comes on the next line from text 2 etc.... if u know what i mean! any advise?<!--content-->The only thing I can think off is creating an arbitary wide table cell using a hidden image (transparent gif) and then make sure your positioned images are not wider than that, e.g.<br />
<br />
<style><br />
#sprite1 { width: 200px; ....}<br />
#sprite2 { width: 200px; ....}<br />
#sprite3 { width: 200px; ....}<br />
#sprite4 { width: 200px; ....}<br />
</style><br />
<br />
<td><br />
<img src=http://www.htmlforums.com/archive/index.php/"blank.gif" height=1 width=210><br><br />
</td><!--content-->