Floating Sidetable and Border Around Forum issue

[Ishy]

I've just recently started to mess with the Floating Sidetable code so I'm unfamiliar with it. I've seen sites that have it as well as a border around their forum like on this site link (though its Jcink and I'm using Proboards). I was wondering if it is possible to do something like that.

My site: awesomehptestsite.proboards.com/index.cgi

[Tumbleweed]

Sorry, your sample link doesn't work, probably because it is the competition of ProBoards.

But for your floating side table do you mean fixed like this one: (The left side although it can easily be change to be on the right)

putteraround6.proboards.com/index.cgi

By the way, did you know your site is pretty messed up in IE? (Looks fine in FF/Chrome) I ask because if your members mostly use FF, Chrome or other browsers, then you might not want to worry about IE.

[Ishy]

Ugh..I didn't know >.< Thanks for letting me know. But sadly I don't know how to fix that. And yes that's what I meant. I'm looking for exactly everything you have there with the floating sidetable and the border around forum. I found the code on Caution for the sidetables. Btw fixed the ad, I'm used to just putting down a link and it acting like a link should.

[Tumbleweed]

I corrected my previous post because reading it today, it didn't make sense. Tired I guess.

Notice my signature. That's why your site is messed up in IE, because of where you got your side table and anything else you may have gotten from Caution. Your forum is squished to about 160px in width and is alongside your top welcome table (welcome & updates) with the floating sidetable between(whoops, correction, I thought that was a floating sidetable but it is part of your top table) and everything is shifted to the right. Then there are other things such as a width of "05" in your td tags:

<td width="05%" class="newstitlebg" vAlign="top">

If you want 4 columns, 100% should be divided by 4. Like 25%, 25%, 25% & 25% OR 30%, 30%, 15% & 25% so they all add up to 100%.

But since you said you found a side table from Cauition and it appears you have a border around the forum (I can't see if it is working as the background is so dark), do you need help then since it looks o.k. in other browsers besides IE? Little confused by your response.

[Ishy]

Okay. I'll fix the tables. Thanks. The site doesn't really look right, I lightened the colors so you could see. The border around the forum is stretched to the right too far. I would love if I could have it to where it's set up like yours where it looks all neat and centered (also I'd like the welcome table inside the border background as well). Since I did get my code from Caution do you by any chance know where I can get the same type of code for the floating sidetable but compatible for Proboards?

[Tumbleweed]

I found other errors in that top table. I redid your table and got frustrated with the images (welcome, updates) so just changed them to text. I have it here: (Of course my skin colors are totally different from yours so don't worry about that part of it.)

putteraroundix.proboards.com/index.cgi

Now I'm going to go ahead and give you what I have on that site which includes the redone top table, the border and the side panel. We can switch it easily to the left side if you prefer.

But first!! Save your global headers to notepad and we'll start with a clean slate but just in the global headers. Then once you get this done you can see what you need to use of what you saved to notepad. The only thing I can see that you might need is some of that css, however, most of it, I don't even see where you are using it at all.


Here are the global headers:


<!--Resize welcome table Remove Heyx Remove home-->
<script type="text/javascript">
<!--
document.getElementsByTagName('table').item(0).width = '100%';
document.getElementsByTagName('td').item(2).style.display="none";
document.getElementsByTagName('font').item(1).style.display="none";
//-->
</script>


<!--Start of CSS-->
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>


<style type="text/css">
body{
margin-right: 80px;
}
.side_panel{
position: fixed;
top: 0px;
right: 0px;
width: 200px;
height: 100%;
background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/42.png);
background-repeat: repeat;
border-right: 2px solid #ffffff;
padding: 10px 2px 10px 2px;
z-index: 1;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
.side_title{
font-family: 'Wire One', sans-serif;
font-size: 30px;
letter-spacing: 3px;
color: #000000;
}
.title_one{
font-family: 'Wire One', sans-serif;
color: #ffffff;
font-size: 40px;
letter-spacing: 3px;
text-align: left;
}
.my_line{
border-bottom: 1px solid #ffffff;
margin-top: -6px;
}
.main a:link, .main a:visited, .main a:active {
position: relative;
background-image: url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/42.png); background-repeat: repeat;
width: 100px;
height: 12px;
border: 1px solid #ffffff;
margin-top: 2px;
margin-bottom: -8px;
padding: 1px;
font-weight: bold;
z-index: 2;
display: block;
}
.main a:hover {
text-decoration: none; background-color: #ffffff; font-weight: normal;
}
#border_a_forum{
width: 100%;
background-image: url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/42.png);
background-repeat: repeat;
border: 2px solid #ffffff;
padding: 14px;
}
.welcometext {
padding: 6px;
text-align: justify;
letter-spacing: 1px;
font-size: 8px;
text-transform: uppercase;
}
.mylinks a:link {text-align: left; margin-left: 4px;font-size: 10px; padding: 0px 0px 0px 0px; text-align: center; color: #ffffff;
}
.mylinks a:hover{text-decoration: none; border-left:10px solid white;padding-left: 2px;
}
</style>


<!--border around the forum-->
<div style="text-align: center;">
<div style="width: 800px; margin: auto;">
<div id="border_a_forum">

<!--moves welcome table below ad-->
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script>
<br /><br />



<table width="100%" cellpadding="0" cellspacing="4" align="center" class="newstitlebg">
<tr>
<td width="25%" class="newstitlebg" vAlign="top" align="center">
<div class="welcometext">
<div class="title_one">WELCOME</div>
<div class="my_line"></div>
<br />

WELCOME TO THE SITE! WE ARE A ORIGINAL SUPERNATURAL CREATURES SITE WITH PLENTY OF CLANS TO JOIN AND CANONS TO CLAIM. WE ARE A INTERMEDIATE ROLEPLAY AND THOUGH WE DON'T HAVE A WORD COUNT WE ENCOURAGE QUALITY OVER QUANTITY AND AIM TO HELP BUILD YOUR CREATIVE SKILLS AND MAKE YOUR EXPERIENCE IN RP AS FUN AS POSSIBLE. ALTHOUGH WE HAVE QUITE A FEW CANONS ESSENTIAL TO THE PLOT, WE ALSO WELCOME ORIGINALS TO PARTAKE IN THE PLOT AND BECOME CANONS THEMSELVES AND WANT YOU TO BRING YOUR IDEAS WITH YOU TO MAKE THIS SITE THAT MUCH BETTER! OUR STAFF IS AVAILABLE FOR ANY QUESTIONS YOU MAY HAVE AND IF ONE IS NOT ON AT THE MOMENT JUST LEAVE A COMMENT IN THE BOX AND THE STAFF WILL ANSWER YOUR QUESTIONS AS SOON AS WE CAN.
</div>

</td>
<td width="25%" class="newstitlebg" vAlign="top">

<div class="welcometext">
<div class="title_one">UPDATES</div>
<div class="my_line"></div>
<br />
<div style="height: 140px; width: 100%; overflow: auto; padding-right: 4px;">
<b><font color=411515>2.4.13</font></b><br>
We did it! The site is finally done! Good job staff and also welcome back members! Living in the Shadows v2 is now up and running and is welcoming everyone who wants to join, veteran or new, with open arms. Though we are officially open, the site will not be officially advertised until the advertisement is complete, which should be this week. Now since the site is new there may be quite a few errors around the site so if anyone notices anything then please don't be scared to let one of the admins know in the box.
</div>
</div>
</td>
<td width="25%" class="newstitlebg" vAlign="top" align="center">
<div class="welcometext">
<div class="title_one">NEWBORNS</div>
<div class="my_line"></div>
<br />
Newborn Vampires: Louisiana is in need of a large number of newborn vampires, but is not restricted to just one state. Baby vamps in any of our five states is acceptable.
Vampire/Supernatural haters: Every state has one of these and we don't restrict this to any one species so the more variety the better. These include hunters as well.
Blood donors: Blood donors can be found in Las Vegas and Seattle mainly but there can be donors in every state or city. Donors can either be forced or willing.
Werewolves: With Texas's current situation we ask if Werewolves, and Werecats, be made for Dallas to further their plot, but they are not restricted to one state or city.
For more site requests click here!
</div>
</td>
<td width="25%" class="newstitlebg" vAlign="top" align="center">
<div class="welcometext">
<div class="title_one">LINKS</div>
<div class="my_line"></div>
<br />
<div class="mylinks">
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=general&action=display&thread=156">RULES</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=general&action=display&thread=157">PLOTS</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=general&action=display&thread=158">TOWN INFO</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=species">SPECIES LISTS</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=claims&action=display&thread=166&page=1">FACE CLAIM</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=ilists&action=display&thread=167">CANON LIST</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=requests">REQUESTS</a><br />
<a href="http://livingintheshadows2.proboards.com/index.cgi?board=ads">ADVERTISING</a><br />
</div>
</div>
</td>
</tr>
</table>




In your Gobal Footers, go find this....

<!-- BEGIN FLOATING SIDEBAR
GLOBAL FOOTERS -->
</div>
<div style="width:850px; margin-left: 260px;" width="850">
<!-- END FLOATING SIDEBAR -->


<script>
<!--
document.write('</td></tr><tr><td width="100%" class="'+bg+'"></td></tr></table>')
//-->
</script>


and remove it (or save it to notepad too) and replace it with this and put it at the very top of your global footers:

</div></div></div>

<SCRIPT LANGUAGE="JavaScript">
<!--
tablew = document.getElementsByTagName('TABLE');
for(t=0;t<tablew.length;t++) {
if(tablew[t].width=="92%"){
tablew[t].width='100%';
}
}
// -->
</script>


<!--Start of side panel-->
<div class="side_panel">

<!-- ===== BOX #2 START ===== -->
<table width="180px" align="center" valign="top" cellpadding="4" cellspacing="1">
<tr><td align="center">
<div style="width: 100px; text-align:center;">

<div class="side_title">Navigation</div>
<br />
<div class="main" >


<a href="http://putteraround6.proboards.com/index.cgi"><span class="main">Home</span></a><br />
<a href=" /index.cgi?action=newestthreads">New Topics</a><br />
<a href="http://help.proboards.com/">Help</a><br />
<a href="/index.cgi?action=search">Search</a><br />

<!--This is for members only to see-->
<span style="text-align: center" id="members">
<a href=" /index.cgi?action=members">Members</a><br />
<a href=" /index.cgi?action=profile">Profile</a><br />
<a href=" /index.cgi?action=logout">Log Out</a><br />
</span>

<script>if(pb_username=='Guest'){
document.getElementById('members').style.display='none'
}
</script>

<!--This is for guests only to see-->
<span id="guests">
<a href="/index.cgi?action=login">Log In</a><br />
<a href=" /index.cgi?action=register">Register</a><br />
</span>

<script>
if(pb_username!='Guest'){document.getElementById('guests').style.display='none'
}
</script>

<!--This is for admin and staff only to see-->
<script type="text/javascript">
if (pb_username.match(/^(admin|Tumbleweed|falconx)$/)){
document.write('<span id="main"><a href="/index.cgi?action=admin">Admin</a></span>');
}
</script>

</div>
</div>
</td></tr></table>
<br />

<!-- ===== BOX #2 START ===== -->
<table width="180px" align="center" valign="top" cellpadding="4" cellspacing="1">
<tr><td align="center">
<div class="side_title">Welcome</div>
<div style="background-color: #ffffff; font-size: 1em; text-align: justify; padding: 8px;">

<ul>
<li>Lorem ipsum</li>
<li>consectetur </li>
<li>eiusmod tempor</li>
<li> incididunt</li>
</ul>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</td></tr></table>

<table width="180px" align="center" valign="top" cellpadding="4" cellspacing="1">
<tr><td align="center">

<div class="side_title">Title here</div>
<div style="background-color: #ffffff; font-size: 1em; text-align: justify; padding: 8px;">


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</td></tr></table>

<table width="180px" align="center" valign="top" cellpadding="4" cellspacing="1">
<tr><td align="center">

<div class="side_title">Title here</div>
<div style="background-color: #ffffff; font-size: 1em; text-align: justify; padding: 8px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</div>

</td></tr></table>


<!--All content above this line-->
</div>
<!--End of side panel-->


Now of course you can use what you want from the above. You don't have to use the redone top table. And if you want that side panel on the left it is easy to change. Just let me know of any changes you want and I'll help or just opt to not use any of it. Totally up to you.

[Ishy]

It's so awesome! Thank you! And if you could, could you tell me how to put it to the left instead of right?

[Tumbleweed]

Just change the blue to left:

body{
margin-right: 80px;
}
.side_panel{
position: fixed;
top: 0px;
right: 0px;

[Ishy]

Awesome. Thank you so much!

[Tumbleweed]

You're welcome and I must say, I love how neatly you did all the content in the side bar. Your site looks sharp in all browsers. Pat yourself on the back for that!

Oh, by the way, when you go to V5 that side bar can be put in via your headers if you want to keep it. The ony thing you'll need to do is remove this line for IE in the css:

_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

[Ishy]

Thank you! Thank you for all your help!