Title: Change Board Width?
Description: Help!
candy - September 14, 2008 08:13 PM (GMT)
You see on my site below, you can tell my banner isn't the same width as my boards are apparently.
How do I change the width of the boards, without changing the width of my banner?
http://z10.invisionfree.com/Can_You_See/index.php
Shade - September 14, 2008 08:29 PM (GMT)
Change the measurements of your table used to create a sidebar.
<table width="width of the whole table(sidebar+main)"><tr>
<td width="width of the sidebar">
sidebar stuffs here</td>
<td width="width of the main area">
banner, forums, and such here
</td></tr></table>
That is a very, very basic view of your root code for the structure of the page. Now obviously you want to change the width of the main area. It is usually located in the header area of the wrapper codes. So, when you look, locate the width of the entire table and the width of the main area, then decrease them to the needed amount. If you have trouble finding the places to edit, you are more than welcome to post your wrapper code and I'll highlight what needs to be edited for you.
candy - September 14, 2008 08:41 PM (GMT)
You lost me so here's the headed portion
| CODE |
<table class="maintable" align="center"> <tr> <td style="padding: 10px;"> <table width="100%" class='0' cellspacing="5" cellpadding="1"> <tr> <td width="210" class='0' valign="top">
<center> <div class='maintitle'> Welcome </div> <div class="titlemedium"> </div> <DIV class="tablepad"><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Links </div> <div class="titlemedium"> </div> <div class="tablepad"><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Staff </div> <div class="titlemedium"> </div> <div class="tablepad"><span class='desc' > TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class="maintitle"> Chatbox </div> <div class="titlemedium"> </div> <div class="tablepad"><span class='desc' > TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> COTM/MOTM </div> <div class="titlemedium"> </div> <DIV class="tablepad"><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Affiliates </div> <div class="titlemedium"> </div> <div class='tablepad'><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Credits </div> <div class="titlemedium"> </div> <div class='tablepad'><span class='desc'> Sidebar: Dana <br> Coding Help: <a href="http://forums.redcarpetrebellion.net/">RCR</a> </span></div> </div> <br /></center>
<img src='http://209.85.48.8/style_images/1/spacer.gif' alt='' width='190' height='1' /> </td> <!--SPACER--> <td width="5" class='0'> </td> <td width="90%" class='0' valign="top">
<% BOARD HEADER %> <% NAVIGATION %> <% BOARD %> </td> </tr> </table><% STATS %> |
Shade - September 14, 2008 09:10 PM (GMT)
+ What I highlighted in red is located in your CSS, look for "maintable". This controls the width of your entire table and should be the only thing you have to fix. Change the width around until it fits. Since the second table's width is measured by percent, it will automatically adjust.
I cut off the rest because you only need to pay attention to the first line. XD
<table class="maintable" align="center">
<tr>
<td style="padding: 10px;">
<table width="100%" class='0' cellspacing="5" cellpadding="1">
<tr>
<td width="210" class='0' valign="top">
candy - September 14, 2008 09:16 PM (GMT)
So what do I do? Replace maintable with a number or what?
Shade - September 14, 2008 09:36 PM (GMT)
No, go to you CSS, find "maintable" and edit its width to whatever number you want it to be.
should look something like
.maintable
width: #;
height: #;
padding: #;
Edith the width, and change whatever number is there.
candy - September 14, 2008 09:39 PM (GMT)
I changed the width from 930px to 700px and it's staying the same.
SpazzyMal - September 14, 2008 10:17 PM (GMT)
Try taking the padding out of the .maintable, using padding: none; or padding:0px;. If there's not any padding in the .maintable, ty lowering the amount here:
<table class="maintable" align="center">
<tr>
<td style="padding: 10px;">
<table width="100%" class='0' cellspacing="5" cellpadding="1">
<tr>
<td width="210" class='0' valign="top">
Unfortunately, your board can not get much smaller than it is if you keep it in this setup, really, since the board's width must be at least as wide as the advertisements, which will not squish to a smaller size, and then you've got the sidebar to the side which adds around 200px on top of that. If you want it to be closer to 700px wide in total, with a smaller index, you can move the banner and advertisements above the sidebar. Try this, and if it's not quite right, move the <% BOARD HEADER %> up a line until it's in the right place, but I think that's where it needs to be.
| CODE |
<table class="maintable" align="center"> <tr> <td style="padding: 10px;"> <table width="100%" class='0' cellspacing="5" cellpadding="1">
<% BOARD HEADER %>
<tr> <td width="210" class='0' valign="top">
<center> <div class='maintitle'> Welcome </div> <div class="titlemedium"> </div> <DIV class="tablepad"><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Links </div> <div class="titlemedium"> </div> <div class="tablepad"><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Staff </div> <div class="titlemedium"> </div> <div class="tablepad"><span class='desc' > TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class="maintitle"> Chatbox </div> <div class="titlemedium"> </div> <div class="tablepad"><span class='desc' > TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> COTM/MOTM </div> <div class="titlemedium"> </div> <DIV class="tablepad"><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Affiliates </div> <div class="titlemedium"> </div> <div class='tablepad'><span class='desc'> TEXT/CODE HERE </span></div> </div> <br /></center>
<center> <div class='maintitle'> Credits </div> <div class="titlemedium"> </div> <div class='tablepad'><span class='desc'> Sidebar: Dana <br> Coding Help: <a href="http://forums.redcarpetrebellion.net/">RCR</a> </span></div> </div> <br /></center>
<img src='http://209.85.48.8/style_images/1/spacer.gif' alt='' width='190' height='1' /> </td> <!--SPACER--> <td width="5" class='0'> </td> <td width="90%" class='0' valign="top">
<% NAVIGATION %> <% BOARD %> </td> </tr> </table><% STATS %> |
candy - September 14, 2008 10:27 PM (GMT)
Um, yeah, I took your coding and it really screwed up my site.
SpazzyMal - September 15, 2008 12:03 AM (GMT)
Well, sorry. It's a trail and error thing for me sometimes, I admit. >_> Uhm... did taking out the padding work at least? The padding should have got rod of at least a little of the bulk on the outsides, I would have thought.
Maybe someone slightly better at working with other people's sidebar coding can help you with making it smaller if you still want it moreso, because I'll admit sometimes I'm just stumped, and I need to play with code sometimes to figure out things.
candy - September 15, 2008 12:08 AM (GMT)
I put the padding down to 0 and none, but neither of them fixed the issue. I'll just leave it the way it is. It's not that big of a problem.