I have several sections of text that I keep hidden with tags:<br />
<div id="Section0" style="display:none;">Text here</div><br />
<div id="Section1" style="display:none;">Text here</div><br />
.<br />
.<br />
<div id="Section10" style="display:none;">Text here</div><br />
<br />
I call a Javascript to display one section and hide any others that are displayed. All this is contained within a table to 1) maintain a constant width, and 2) to keep it centered on the screen (the table is centered, the text is left aligned within the table ).<br />
<br />
The problem is that the text that is hidden can be quite long and it makes the page long, even when it is blank. When you are viewing a long section of text and call a javascript to hide it and display a shorter one, it leaves you at a blank spot on the screen and you have to scroll up, which is confusing.<br />
<br />
One way around this is instead of keeping the text in a table, to keep it in a tag like:<br />
<div style="overflow:auto;width:800px;" align="center"><br />
...body here<br />
</div><br />
<br />
This solves the problem of maintaining a constant width as well as keeping you on the part of the page that is displaying the text. However, this makes everything center aligned. If I have a nested tag to left align the text, it left aligns the entire body.<br />
<br />
Any suggestions on how to overcome this?<!--content-->Not exactly sure what your asking. You had a problem then you stated that you overcame it.<br />
<br />
Sounds like to me that you have alignment issues though.<br />
<br />
<center><br />
<div style="width: 200px; border: 1px solid;"><br />
<div align="left"><br />
Hello, this is my test<br />
</div><br />
</div><br />
</center><br />
<br />
This worked for me. The top div layer is centered, but the nested div layer left aligns the text within.<br />
<br />
Havik<br />
<br />
Edited: Because I made a mistake
<!--content-->
<div id="Section0" style="display:none;">Text here</div><br />
<div id="Section1" style="display:none;">Text here</div><br />
.<br />
.<br />
<div id="Section10" style="display:none;">Text here</div><br />
<br />
I call a Javascript to display one section and hide any others that are displayed. All this is contained within a table to 1) maintain a constant width, and 2) to keep it centered on the screen (the table is centered, the text is left aligned within the table ).<br />
<br />
The problem is that the text that is hidden can be quite long and it makes the page long, even when it is blank. When you are viewing a long section of text and call a javascript to hide it and display a shorter one, it leaves you at a blank spot on the screen and you have to scroll up, which is confusing.<br />
<br />
One way around this is instead of keeping the text in a table, to keep it in a tag like:<br />
<div style="overflow:auto;width:800px;" align="center"><br />
...body here<br />
</div><br />
<br />
This solves the problem of maintaining a constant width as well as keeping you on the part of the page that is displaying the text. However, this makes everything center aligned. If I have a nested tag to left align the text, it left aligns the entire body.<br />
<br />
Any suggestions on how to overcome this?<!--content-->Not exactly sure what your asking. You had a problem then you stated that you overcame it.<br />
<br />
Sounds like to me that you have alignment issues though.<br />
<br />
<center><br />
<div style="width: 200px; border: 1px solid;"><br />
<div align="left"><br />
Hello, this is my test<br />
</div><br />
</div><br />
</center><br />
<br />
This worked for me. The top div layer is centered, but the nested div layer left aligns the text within.<br />
<br />
Havik<br />
<br />
Edited: Because I made a mistake
<!--content-->