VoyForums: Framing HTML

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

It might be hard-to-believe;
but, this page is quite similar to the previous Lists.
But, there's one key difference:
the following material has been Framed.
. (if anyone's familiar with my HTML Pages...
they've probably noticed how much I prefer using these methods.
.....this is one example of Framing:

<center>
<div id="column1">
<div id="colbody1" class="colbody">
<div class="building_block" id="pgbldblk16">
<div class="blockbody" id="body_pgbldblk16">
<table border="0" name="" width="60%" cellpadding="5" cellspacing="0">
<tr align="" valign="">
<td colspan="1" rowspan="1" width="30%" align="" valign="top"><div id="tswcsstabs">
<ul>
<li><a href="http://www.bing.com/">title of link 01</a></li>
<li><a href="http://www.">title of link 02</a></li>
<li><a href="http://www.">title of link 03</a></li>
<li><a href="http://www.">title of link 04</a></li>
<li><a href="http://www.">title of link 05</a></li>
<li><a href="https://www.">title of link 06</a></li>
<li><a href="https://www.">title of link 07</a></li>
<li><a href="http://www.">title of link 08</a></li>
<li><a href="http://www.">title of link 09</a></li>
<li><a href="http://www.">title of link 10</a></li>
</ul>
</div><br>

</td><td colspan="1" rowspan="1" width="31%" align="" valign="top"><div id="tswcsstabs">
<ul>
<li><a href="http://www.">title of link 11</a></li>
<li><a href="http://www.">title of link 12</a></li>
<li><a href="http://www.">title of link 13</a></li>
<li><a href="http://www.">title of link 14</a></li>
<li><a href="http://www.">title of link 15</a></li>
<li><a href="http://www.">title of link 16</a></li>
<li><a href="http://www.">title of link 17</a></li>
<li><a href="http://www.">title of link 18</a></li>
<li><a href="http://www.">title of link 19</a></li>
<li><a href="http://www.">title of link 20</a></li>
</ul>
</div><br>

</td><td colspan="1" rowspan="1" width="39%" align="" valign="top"><div id="tswcsstabs">
<ul>
<li><a href="http://www.">title of link 21</a></li>
<li><a href="http://www.">title of link 22</a></li>
<li><a href="http://www.">title of link 23</a></li>
<li><a href="http://www.">title of link 24</a></li>
<li><a href="http://www.">title of link 25</a></li>
<li><a href="http://www.">title of link 26</a></li>
<li><a href="http://www.">title of link 27</a></li>
<li><a href="http://www.">title of link 28</a></li>
<li><a href="http://www.">title of link 29</a></li>
<li><a href="http://www.">title of link 30</a></li>
</ul>
</div><br>

</td>
</tr>
</table>
</center>
</div>
</div>
</div>
</div>

It's possible to stack-up these rows.
In the example below, it totals 60.
(Please, refer to bottom-of-page.)
But, needless to say; framing can be a difficult task.
In these examples; each title should have limited letter-characters.
Otherwise, the title will move onto the next line.
It's also quite hectic attempting to choose the correct Width dimensions.

Also, it was necessary to save Space on this page.
So, I've excluded other useful features, such as Open Tabs.

---------------------------------------
Notice how Title 07 carries over, onto the next line.
This is cosmetically less attractive.
But, perhaps using a few less characters/letters would have prevented this.
(also notice: this entire list widens to some degree, when lengthy words are added.)
In the case below;
I've increased the table border="0" name="" width="XX%" from 60% to 90%.

line A

title of link 01-abcdefg

title of link 02-abcdefg

title of link 03-abcdefghijklm

title of link 04-abcdefg

title of link 05-abcde

title of link 06-abcdef

title of link 07-abcdefghijklmnopqr

line B

title of link 11- a b c d e f g

title 12-abcd

title 13-abc

title 14-abcdefg

title of link 15-abcdefg

title of link 16-abcdefg

title of link 17-abcdefghijk

title of link 18-abcdefghij

title of link 19-abcdefghijklmn

title of link 20-abcdefghijklm

line C

title of link 21-abcdefg

title of link 22-abcdefghijklm

title of link 23-abcdefghijklmnopqr

title of link 24-abcdefghijklmn

title of link 25-abcdefghi

title of link 26-abcdefghihijklmnop

This list seemed to work perfectly,
until I attempted to place additional CSS on this page.
I was then required to add eleven </div> lines to the end page. (11 closing div lines)
So, these HTML codes can be very tricky.
They sometimes work perfectly, even with errors, or missing enclosed tags.

finally, these lists are usually NOT 100% symmetrical.
You'll notice; Line C allows more letters than lines A or B.
This is why Title Link 23 has more characters than line 7.
Line 7 has overlapped onto the next line (due to too many characters).
Line 19 has also spilled onto the next line, as well.
But, link 23 continues smoothly beyond letters P,Q, and R.