I have a site running XOOPS and currently it's locked into one width, meaning that the site displayed on a 800 x 600 you have to scroll horizontally and a the site displayed on a 1280 x 1024 has wasted space on the right and left margins.

I notice that the xoops.org site is not this way. What file do I need to edit in order to make it "auto wrap".

Thanks

Theme.html, make sure that the widths are relative wher you want, and fixed where you don't want them to change (for instance, make the header, footer and center content part relative width, and the left- and right bars fixed.)

Herko

Also it is possible that in your theme.css file(s) table width or DIV class widths are present.

Kind regards,

Martijn

I'm going to start with the theme.html file first and I'll look into the .css file second. I'm not sure I follow which line to edit, sooooo I'm begging mercy here. I've copied the "start of header" section below and I'm hoping you can tell me which line to change.

<! -------------------------Start of Header ------------------------->

<div align="center"><center>

<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="205" height="16" nowrap="nowrap"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>home.jpg" width="41" height="16" alt="Home" ></a><a href="<{$xoops_url}>/modules/newbb"><img src="<{$xoops_imageurl}>forum.jpg" width="41" height="16"alt="Forums" ></a><a href="<{$xoops_url}>/register.php"><img src="<{$xoops_imageurl}>join.jpg" width="41" height="16" alt="Join"></a><a href="<{$xoops_url}>/modules/mydownloads/"><img src="<{$xoops_imageurl}>file.jpg" width="41" height="16"alt="Downloads"></a><a href="<{$xoops_url}>/modules/xoopsfaq/"><img src="<{$xoops_imageurl}>about.jpg" width="41" height="16"alt="About" ></a></td>
<td width="347"><img src="<{$xoops_imageurl}>butto2.jpg" width="347" height="16"></td>
<td width="340%" align="left"><img src="<{$xoops_imageurl}>button3.jpg" width="347" height="16"></td>
</tr>
</table>
</center></div><div align="center"><center>
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="530" height="80"><img src="<{$xoops_imageurl}>pagelogo.jpg" width="530" height="80"></td>
<td width="370" height="80" background="<{$xoops_imageurl}>pagebg.jpg" valign="middle" align="center"><br><form style="margin-top: 0px;" action="<{$xoops_url}>/user.php" method="post"><{$block.lang_username}><input type="text" name="uname" size="12" value="<{$block.unamevalue}>" style="font-family: Tahoma; font-size: 11pt; background-color: rgb(18,140,55); color: rgb(0,0,0); border: 1px solid rgb(0,0,0)" /><{$block.lang_password}><input type="password" name="pass" size="12" style="font-family: Tahoma; font-size: 11pt; background-color: rgb(18,140,55); color: rgb(0,0,0); border: 1px solid rgb(0,0,0)" /><input type="hidden" name="op" value="login" /><input type="submit" value="Login" style="font-family: Tahoma; background-color: rgb(6,84,36); color: rgb(0,0,0); border: 1px groove rgb(0,0,0)"/><br> <center><font face="Tahoma" size="2">Username /&nbsp; Password </center>
</form></td>
</tr>
</table>
</center></div><div align="center"><center>

<! ------------------------- Start Edit for custom placed banner ------------------------->

I've got some idea as what to change but I dont want to risk my website being screwed up so I would really appreciate your help, or should I say literally holding my hand thru this. I want to change the line that reads

table border="0" width="900" cellspacing="0" cellpadding="0">

But I'm not sure this is it.

Thanks again.

Yeah that's the correct line. You can try changing the width to "100%" instead of "900". "100%" will allow the page to size itself to the browser window and whatever resolution the user is at.


note that you have two lines that currently have a width of 900. You will likely want to correct them both.

<table border="0" width="100%" cellspacing="0" cellpadding="0">

Well, that took care of some it. I dont see a section that reads something to the affect of "Center Blocks".

What would be the indication.

check out the site now. Located here.

First, do a search for 340% to find this line:

<td width="340%" align="left"><img src="http://www.lugot.org/themes/lime/button3.jpg" width="347" height="16"></td>

340% is an error, change to 347 or to 100%, like this:
<td width="347" align="left"><img src="http://www.lugot.org/themes/lime/button3.jpg" width="347" height="16"></td>

Next search for center and you will find two types:

You have a bunch of tags that say <div align="center">
remove the align="center" so that you have <div>

You also have tags that just say <center> ... </center>
You can remove the <center> and </center> tags completely.

Beautiful.

If you havent filed your taxes already put me down as a dependent.

I've done what you suggested and everything is now auto sizing to the outer margins with the ecception of the middle block, recent forum posts as well as news.

Thanks for you help thus far but would you mind helping me a bit more.

Thanks

I don't know for sure, I haven't tested this, but... in your CSS files for your theme try changing

td#centerCcolumn {padding: 0px 3px 1px 3px;}

to

td#centerCcolumn {width: 98%; padding: 0px 3px 1px 3px;}

That would be the first thing I would try.

I hope that helps.

I've read several posts on this issue.
Is it not better to set the width to values lower then 100%, because then some browsers are forced to calculate the actual page, rather then just put it on the page?
So : width ="99%" or even lower?