[F] Side Tables

vForums Support > Programming & Coding :: Code Requests & Support :: > [F] Side Tables

[F] Side Tables - Posted By dog199200 (dog199200) on 30th Apr 08 at 2:21pm

http://deluxeanimeforum.vforums.co.uk/

What i'm trying to do is make a side table for both sides that will fit in the black area around my forum perfectly, as well as it will scroll. I have the tables set to the right height to fit in the black area, but i cant get them to move back into the black area, they want to push against the forum, also i took a snip-it from one of wright's codes for the hover/scroll effect but for some reason it keeps trying to hover all my boards as well. Can someone help me finish the code?

header
Code:
Select All
<style>
body {
    margin-top: 20px;
}
</style>
 
<table width="100%" border="0" style="position: fixed; left: 0px; top: 4px">
    <tr>
        <td align="center">
<table width="92%" cellpadding="0" cellspacing="1" align="center">
<tr>
<td width="20%" vAlign="top" align="center">
<br />
<br />
<table class="border" width="95%" cellpadding="4" cellspacing="1">
<tr>
<td class="title2" align="center" width="100%">
<font size=2>Left Menu</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Top Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Middle Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Bottom Box Content</font>
</td>
</tr>
</table>
</td>
<td width="60%" align="center" vAlign="top">
<style> {BR}body { {BR} margin-top: 20px; {BR}} {BR}</style> {BR} {BR}<table width="100%" border="0" style="position: fixed; left: 0px; top: 4px"> {BR} <tr> {BR} <td align="center"> {BR}<table width="92%" cellpadding="0" cellspacing="1" align="center"> {BR}<tr> {BR}<td width="20%" vAlign="top" align="center"> {BR}<br /> {BR}<br /> {BR}<table class="border" width="95%" cellpadding="4" cellspacing="1"> {BR}<tr> {BR}<td class="title2" align="center" width="100%"> {BR}<font size=2>Left Menu</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Left Top Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Left Middle Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Left Bottom Box Content</font> {BR}</td> {BR}</tr> {BR}</table> {BR}</td> {BR}<td width="60%" align="center" vAlign="top">
footer
Code:
Select All
</td>
<td width="20%" vAlign="top" align="center">
<br />
<br />
<table class="border" width="95%" cellpadding="4" cellspacing="1">
<tr>
<td class="title2" align="center" width="100%">
<font size=2>Right Menu</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Top Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Middle Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Bottom Box Content</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> {BR}<td width="20%" vAlign="top" align="center"> {BR}<br /> {BR}<br /> {BR}<table class="border" width="95%" cellpadding="4" cellspacing="1"> {BR}<tr> {BR}<td class="title2" align="center" width="100%"> {BR}<font size=2>Right Menu</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Right Top Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Right Middle Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Right Bottom Box Content</font> {BR}</td> {BR}</tr> {BR}</table> {BR}</td> {BR}</tr> {BR}</table> {BR}</td> {BR}</tr> {BR}</table>

Re: Side Tables - Posted By Michael (wrighty) on 30th Apr 08 at 3:52pm

Unfortunately the way you have done it, it wont work. I'll have to take a look at it later for you and code it from scratch!

Re: Side Tables - Posted By dog199200 (dog199200) on 30th Apr 08 at 8:43pm

ah ok, hey i gave it a try at least

Re: Side Tables - Posted By dog199200 (dog199200) on 6th May 08 at 4:08am

bump

Re: Side Tables - Posted By dog199200 (dog199200) on 12th May 08 at 2:32am

bump

Re: Side Tables - Posted By Michael (wrighty) on 12th May 08 at 6:14pm

put this: position: fixed; left: 0px; top: 4px

in both of these near the start of both parts: <table class="border" width="95%" cellpadding="4" cellspacing="1">

I'm sure that'll fix it... Just guessing!

Re: Side Tables - Posted By dog199200 (dog199200) on 13th May 08 at 9:24pm

so like this:

head:
Code:
Select All
<style>
body {
    margin-top: 20px;
}
</style>
 
<table width="100%" border="0" style="position: fixed; left: 0px; top: 4px">
    <tr>
        <td align="center">
<table width="92%" cellpadding="0" cellspacing="1" align="center">
<tr>
<td width="20%" vAlign="top" align="center">
<br />
<br />
<table class="border" width="95%" cellpadding="4" cellspacing="1">
<tr>
<td class="title2" align="center" width="100%">
<font size=2>Left Menu</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Top Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Middle Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Bottom Box Content</font>
</td>
</tr>
</table>
</td>
<td width="60%" align="center" vAlign="top">
<style> {BR}body { {BR} margin-top: 20px; {BR}} {BR}</style> {BR} {BR}<table width="100%" border="0" style="position: fixed; left: 0px; top: 4px"> {BR} <tr> {BR} <td align="center"> {BR}<table width="92%" cellpadding="0" cellspacing="1" align="center"> {BR}<tr> {BR}<td width="20%" vAlign="top" align="center"> {BR}<br /> {BR}<br /> {BR}<table class="border" width="95%" cellpadding="4" cellspacing="1"> {BR}<tr> {BR}<td class="title2" align="center" width="100%"> {BR}<font size=2>Left Menu</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Left Top Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Left Middle Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Left Bottom Box Content</font> {BR}</td> {BR}</tr> {BR}</table> {BR}</td> {BR}<td width="60%" align="center" vAlign="top">
foot:
Code:
Select All
</td>
<td width="20%" vAlign="top" align="center">
<br />
<br />
<table class="border" width="95%" cellpadding="4" cellspacing="1" style="position: fixed; left: 0px; top: 4px">
<tr>
<td class="title2" align="center" width="100%">
<font size=2>Right Menu</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Top Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Middle Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Bottom Box Content</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> {BR}<td width="20%" vAlign="top" align="center"> {BR}<br /> {BR}<br /> {BR}<table class="border" width="95%" cellpadding="4" cellspacing="1" style="position: fixed; left: 0px; top: 4px"> {BR}<tr> {BR}<td class="title2" align="center" width="100%"> {BR}<font size=2>Right Menu</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Right Top Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Right Middle Box Content</font> {BR}</td> {BR}</tr> {BR}<tr> {BR}<td class="window1" align="center"> {BR}<font size=2>Right Bottom Box Content</font> {BR}</td> {BR}</tr> {BR}</table> {BR}</td> {BR}</tr> {BR}</table> {BR}</td> {BR}</tr> {BR}</table>
if so it doesnt work they all just go to the top..

Re: Side Tables - Posted By Michael (wrighty) on 15th May 08 at 3:25pm

Try this:

Global Header
<style>
body {
margin-top: 20px;
}
</style>

<table class="border" width="20%" cellpadding="4" cellspacing="1" style="position: fixed; left: 0px; top: 4px">
<tr>
<td class="title2" align="center" width="100%">
<font size=2>Left Menu</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Top Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Middle Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Left Bottom Box Content</font>
</td>
</tr>
</table>

Global Footer
<table class="border" width="20%" cellpadding="4" cellspacing="1" style="position: fixed; right: 0px; top: 4px">
<tr>
<td class="title2" align="center" width="100%">
<font size=2>Right Menu</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Top Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Middle Box Content</font>
</td>
</tr>
<tr>
<td class="window1" align="center">
<font size=2>Right Bottom Box Content</font>
</td>
</tr>
</table>

Resize your forum using the 'resize' in the Modify Skins area.

Re: Side Tables - Posted By dog199200 (dog199200) on 15th May 08 at 5:32pm

ok ty that works great

Re: Side Tables - Posted By Michael (wrighty) on 15th May 08 at 6:11pm

Welcome!