<font color="red">[S] </font>A Scroll Box That Works With Sidebars. (RPG-Directory)

Title: [S] A Scroll Box That Works With Sidebars.
Description: Must there be only one?

Spiral - August 18, 2008 07:27 PM (GMT)

Well I want to use both for my site information, the sidebar for features, chatbox, and credits, and then the scrolling box for information on the site and story. Unfortunately, one of my co-admins told me that scroll boxes don't really work with sidebars too well.

So my question, is there any way to make them work well with each other? I'm using Roswenth's sidebar just so you know.

junebug! - August 19, 2008 12:39 AM (GMT)

Can you define scroll box for me? Do you want an iframe with the scroller on it, or do you want the text to scroll up/down automatically?

Spiral - August 19, 2008 01:12 AM (GMT)

Something like what they have.

SpazzyMal - August 19, 2008 01:40 AM (GMT)

A marquee code should work just fine in a sidebar. If you have troubles, post your sidebar code here and I'll be happy to try and figure out how to fix it.

<marquee behavior="scroll" direction="up" height="insert however high you want it to be here" width="however wide you want it to be here" scrollamount="3">text goes here</marquee>

You can change the scrollamount up or down, lower numbers being slower, higher numbers being faster.

Spiral - August 19, 2008 07:59 PM (GMT)

I'm not looking for scrolling text in the sidebar, I'm looking for an actually box at the top of the page (see link above) that will not screw up my skin when together with a sidebar.

SpazzyMal - August 19, 2008 09:08 PM (GMT)

Oh, okay, sorry I misread. A scrollbox is just the one box that scrolls, the whole table is typically called a "newstable". But anyway, any of them should work. I see no reason why they wouldn't, since they're just tables, just like the sidebar is just a table. Try this one, I just put it on my WIP site to see if it worked with my sidebar, and it was all good. ^_^

CODE

<div class="tableborder">
<div class="maintitle">TITLE FOR BOX</div>
<table cellpadding="4" cellspacing="1" height="200" width="100%">
<tbody>
<tr height="20">
<th class="titlemedium" width="30%">TITLE FOR LEFT HAND BOX</th>
<th class="titlemedium" width="40%">TITLE FOR SCROLLING BOX</th>
<th class="titlemedium" width="30%">TITLE FOR RIGHT HAND BOX</th>
</tr>
<tr>
<td class="row2" style="text-align: center;">

WHAT EVER YOU WANT IN LEFT BOX

</td>
<td class="row4" style="text-align: center;" >

<marquee direction="up" height="250px" width="100%" scrolldelay="200" style="text-align: center;">

WHAT INFORMATION YOU WANT TO SCROLL

</marquee>

</td>
<td class="row2" style="text-align: center;" >

WHATEVER YOU WANT IN RIGHT BOX

</td>
</tr>
</tbody>
</table>
</div>

Spiral - August 19, 2008 09:20 PM (GMT)

Thank you!

Spiral - August 19, 2008 09:34 PM (GMT)

Oh wow that is huge...

junebug! - August 19, 2008 09:41 PM (GMT)

CODE

See the height="250px" above? Change the 250 to a smaller number, ideally 100 works best.

Spiral - August 19, 2008 09:51 PM (GMT)

Not just the height. I need to shrink the thing altogether to make it fit under the header. I'd take a screenshot of what I'm talking about, but I have no idea how to lol.

SpazzyMal - August 19, 2008 10:09 PM (GMT)

Press the PRNTSCRN button and CTRL+V it into MS Paint and upload it if you're on Windows, use CMND+SHIFT+3 if on a Mac. Or, if you like, you can feel free to PM me a link to your site and I'll be more than happy to try figuring out what's up. Also, posting your Header & Body here would be good, in case anyone else want to give it a shot.

Spiral - August 19, 2008 10:26 PM (GMT)

http://s190.photobucket.com/albums/z97/the...rent=screen.jpg

Header and Body

CODE

<div align=center><br>
<table cellpadding="10" cellspacing="0" width="350">
<tr><td class="boardtable">

<td width="850" height="100%" bgcolor="#000000" bordercolor="#000000" bordercolorlight="#c0c0c0" bordercolordark="#000000>

<% BOARD HEADER %>
<% NAVIGATION %>

<center><div class="tableborder">
<div class="maintitle">TITLE FOR BOX</div>
<table cellpadding="4" cellspacing="1" height="200" width="75%">
<tbody>
<tr height="20">
<th class="titlemedium" width="30%">TITLE FOR LEFT HAND BOX</th>
<th class="titlemedium" width="40%">TITLE FOR SCROLLING BOX</th>
<th class="titlemedium" width="30%">TITLE FOR RIGHT HAND BOX</th>
</tr>
<tr>
<td class="row2" style="text-align: center;">

WHAT EVER YOU WANT IN LEFT BOX

</td>
<td class="row4" style="text-align: center;" >

<marquee direction="up" height="100px" width="100%" scrolldelay="300" style="text-align: center;">

WHAT INFORMATION YOU WANT TO SCROLL

</marquee>

</td>
<td class="row2" style="text-align: center;" >

WHATEVER YOU WANT IN RIGHT BOX

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

<table align=center valign=top>
<tr> <td width=250 valign=top>

<center><div class='maintitle'><b>Welcome to Fear the Night!</b></div>
<div class="tablepad"><span class='desc' ><font size="1">
<marquee direction=up loop=true height="100" SCROLLDELAY=300>
Welcome to the world of Roclaive! A world where supernatural creatures run rampant and the boundaries between the worlds are kept in tact by a secret organization known as RAPID. Wether you choose to defend the world from malicious paranormal forces, be a part of the paranormal community, or be completely in the dark about the hidden world, everyone is connected by fate. So be careful, here there are plenty of reasons to Fear the Night.
</marquee>
</font><br>
</span></div></div>

<center><div class='maintitle'><b>Important Threads</b></div>
<div class="tablepad"><span class='desc' ><font size="2">
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showtopic=1"><center>Rules and Guidelines</a></center>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showtopic=3"><center>Charrie Template</a></center>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showforum=3"><center>Site Updates</a></center>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showforum=110"><center>Races</a></center>
</font><br>
</span></div></div>

<center>
<div class="maintitle"><b>Switch Names</b> </div>
<div class="tablepad"><span class='desc' >

<form style='display:inline' action="http://z3.invisionfree.com/Fear_the_Night/index.php?act=Login&CODE=01&CookieDate=1" method="post">
<input type="text" class="forminput" style="border: 1px solid #000;font-size: 10px;" size="7" name="UserName" onfocus="this.value=''" value="Name" />
<input type='password' class='forminput' style="border: 1px solid #000;font-size: 10px;" size='7' name='PassWord' onfocus="this.value=''" value='clone' /> <br><input type='submit' style="border: 1px solid #000;font-size: 10px;" size='6' class='forminput' value='Switch' />
</form>
<br>
</span></div></div>

<center>
<div class="maintitle"><b>Staff</b> </div>
<div class="tablepad"><span class='desc' >
PM the staff about any questions or problems and we will answer as quickly and efficiently as possible.<br><br>
<b><u>Admins</b></u><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=1"><b>Spiral</b></a><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=82"><b>Java</b></a><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=89"><b>Serenity</b></a><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=88"><b>{KT}</b></a>
<br>
</b>
<br><br><u><b>Moderators</u><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=81"><b>Diana</b></a>
</span></div></div>
</center>

<div class='maintitle'><b>Spread the Word!</b></div></b>
<div class="tablepad"><span class='desc'>

<br>
<br><b><u><b>Listed At</b></b></u></b>
<marquee scrolldelay="151"><BR>
<a href="http://www.rpg-directory.com" target="_blank"
<img src="http://img.photobucket.com/albums/v231/ShinLi/RPG%20Life/RPGDirectoryMiniBanner2.gif" alt="RPG-Directory"></a>
<a href="http://rpgcollection.proboards27.com" target="_blank"><img src="http://dravu.com/RPGC3/Main/minibanner1.gif" border="0" alt="The RPG Collection"></a>
 
<a href="Http://www.Forumwar.net/" target=_blank"><img src="http://www.forumwar.net/images/Forumwar-RPG.PNG" border="0" height="31" width="88" alt="Forumwar Roleplay"></a>
</marquee><br>

FtN currently does not have a button yet, but if you'd like to make us one that's fine;D

<textarea class="textinput" readonly="readonly">

</textarea>
</span></div></div>
</center>

<div class='maintitle'><b>Credits</b> </div>
<div class="tablepad"><span class='desc'>

Skin © <a href="http://s2.zetaboards.com/ifskinzone/topic/462770/45">Zeus00</a>
<br><br>
Side-bar © <a href="http://rpg-directory.com/">Roswenth</a>

</span></div></div>
<br /></center>
</td>
<td width="720" height="100%" valign=top>

<center><table cellpadding="0" cellspacing="0" width="732" >
<tr>
<td><img src="http://209.85.48.11/9456/131/upload/p6104393.gif" /></td><td width="100%" background="http://209.85.48.11/9456/131/upload/p6104128.gif
"></td><td><img src="http://209.85.48.11/9456/131/upload/p6104536.gif" /></td></tr>
<tr>
<td background="http://209.85.48.11/9456/131/upload/p6104608.gif
"><img src="http://209.85.48.11/9456/131/upload/p6104608.gif
" /></td><td>
<div style="padding: 2px; background: #3A201A">

<% BOARD %>
<% STATS %>

SpazzyMal - August 19, 2008 10:53 PM (GMT)

Try this:

CODE

<div align=center><br>
<table cellpadding="10" cellspacing="0" width="350">
<tr><td class="boardtable">

<td width="850" height="100%" bgcolor="#000000" bordercolor="#000000" bordercolorlight="#c0c0c0" bordercolordark="#000000>

<% BOARD HEADER %>
<% NAVIGATION %>

<center><div class="tableborder">
<div class="maintitle">TITLE FOR BOX</div>
<table cellpadding="4" cellspacing="1" height="200" width="100%">
<tbody>
<tr height="20">
<th class="titlemedium" width="30%">TITLE FOR LEFT HAND BOX</th>
<th class="titlemedium" width="40%">TITLE FOR SCROLLING BOX</th>
<th class="titlemedium" width="30%">TITLE FOR RIGHT HAND BOX</th>
</tr>
<tr>
<td class="row2" style="text-align: center;">

WHAT EVER YOU WANT IN LEFT BOX

</td>
<td class="row4" style="text-align: center;" >

<marquee direction="up" height="100px" width="100%" scrolldelay="300" style="text-align: center;">

WHAT INFORMATION YOU WANT TO SCROLL

</marquee>

</td>
<td class="row2" style="text-align: center;" >

WHATEVER YOU WANT IN RIGHT BOX

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

<table align=center valign=top>
<tr> <td width=250 valign=top>

<center><div class='maintitle'><b>Welcome to Fear the Night!</b></div>
<div class="tablepad"><span class='desc' ><font size="1">
<marquee direction=up loop=true height="100" SCROLLDELAY=300>
Welcome to the world of Roclaive! A world where supernatural creatures run rampant and the boundaries between the worlds are kept in tact by a secret organization known as RAPID. Wether you choose to defend the world from malicious paranormal forces, be a part of the paranormal community, or be completely in the dark about the hidden world, everyone is connected by fate. So be careful, here there are plenty of reasons to Fear the Night.
</marquee>
</font><br>
</span></div></div>

<center><div class='maintitle'><b>Important Threads</b></div>
<div class="tablepad"><span class='desc' ><font size="2">
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showtopic=1"><center>Rules and Guidelines</a></center>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showtopic=3"><center>Charrie Template</a></center>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showforum=3"><center>Site Updates</a></center>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showforum=110"><center>Races</a></center>
</font><br>
</span></div></div>

<center>
<div class="maintitle"><b>Switch Names</b> </div>
<div class="tablepad"><span class='desc' >

<form style='display:inline' action="http://z3.invisionfree.com/Fear_the_Night/index.php?act=Login&CODE=01&CookieDate=1" method="post">
<input type="text" class="forminput" style="border: 1px solid #000;font-size: 10px;" size="7" name="UserName" onfocus="this.value=''" value="Name" />
<input type='password' class='forminput' style="border: 1px solid #000;font-size: 10px;" size='7' name='PassWord' onfocus="this.value=''" value='clone' /> <br><input type='submit' style="border: 1px solid #000;font-size: 10px;" size='6' class='forminput' value='Switch' />
</form>
<br>
</span></div></div>

<center>
<div class="maintitle"><b>Staff</b> </div>
<div class="tablepad"><span class='desc' >
PM the staff about any questions or problems and we will answer as quickly and efficiently as possible.<br><br>
<b><u>Admins</b></u><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=1"><b>Spiral</b></a><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=82"><b>Java</b></a><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=89"><b>Serenity</b></a><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=88"><b>{KT}</b></a>
<br>
</b>
<br><br><u><b>Moderators</u><br>
<a href="http://z3.invisionfree.com/Fear_the_Night/index.php?showuser=81"><b>Diana</b></a>
</span></div></div>
</center>

<div class='maintitle'><b>Spread the Word!</b></div></b>
<div class="tablepad"><span class='desc'>

<br>
<br><b><u><b>Listed At</b></b></u></b>
<marquee scrolldelay="151"><BR>
<a href="http://www.rpg-directory.com" target="_blank"
<img src="http://img.photobucket.com/albums/v231/ShinLi/RPG%20Life/RPGDirectoryMiniBanner2.gif" alt="RPG-Directory"></a>
<a href="http://rpgcollection.proboards27.com" target="_blank"><img src="http://dravu.com/RPGC3/Main/minibanner1.gif" border="0" alt="The RPG Collection"></a>
 
<a href="Http://www.Forumwar.net/" target=_blank"><img src="http://www.forumwar.net/images/Forumwar-RPG.PNG" border="0" height="31" width="88" alt="Forumwar Roleplay"></a>
</marquee><br>

FtN currently does not have a button yet, but if you'd like to make us one that's fine;D

<textarea class="textinput" readonly="readonly">

</textarea>
</span></div></div>
</center>

<div class='maintitle'><b>Credits</b> </div>
<div class="tablepad"><span class='desc'>

Skin © <a href="http://s2.zetaboards.com/ifskinzone/topic/462770/45">Zeus00</a>
<br><br>
Side-bar © <a href="http://rpg-directory.com/">Roswenth</a>

</span></div></div>
<br /></center>
</td>
<td width="720" height="100%" valign=top>

<center><table cellpadding="0" cellspacing="0" width="732" >
<tr>
<td><img src="http://209.85.48.11/9456/131/upload/p6104393.gif" /></td><td width="100%" background="http://209.85.48.11/9456/131/upload/p6104128.gif
"></td><td><img src="http://209.85.48.11/9456/131/upload/p6104536.gif" /></td></tr>
<tr>
<td background="http://209.85.48.11/9456/131/upload/p6104608.gif
"><img src="http://209.85.48.11/9456/131/upload/p6104608.gif
" /></td><td>
<div style="padding: 2px; background: #3A201A">

<% BOARD %>
<% STATS %>

Spiral - August 19, 2008 11:25 PM (GMT)

So close! It was still too big so I adjusted the with of the box to fit under the header and the blank space came back.

SpazzyMal - August 19, 2008 11:54 PM (GMT)

Do you want it to only be as wide as your banner image? If so, find out the width of that image, and change the part of the code here to the width of your banner, in px, and I think that should work.

<center><div class="tableborder">
<div class="maintitle">TITLE FOR BOX</div>
<table cellpadding="4" cellspacing="1" height="200" width="100%">
<tbody>
<tr height="20">
<th class="titlemedium" width="30%">TITLE FOR LEFT HAND BOX</th>
<th class="titlemedium" width="40%">TITLE FOR SCROLLING BOX</th>
<th class="titlemedium" width="30%">TITLE FOR RIGHT HAND BOX</th>
</tr>

Spiral - August 19, 2008 11:58 PM (GMT)

That's what I did and it left the blank space on the sides.

SpazzyMal - August 20, 2008 12:01 AM (GMT)

Hmm. =/ Well, dang. I'm afraid I'm stumped. Sorry I couldn't be of more use.

Spiral - August 20, 2008 12:05 AM (GMT)

It's alright. You did your best and I thank you for that :D.

View Full Version: [S] A Scroll Box That Works With Sidebars.