If you are seeing this message, it is possible the page did not load properly. Please hit reload/refresh on your browser.
If you still see this message, you probably do not have a browser that supports web standards, although its content is accessible to any browser or Internet device.

Cool Tips & Tricks Cool Tips & Tricks

Help Communities:
Help Forums Bug Base
<< Prev Topic | Next Topic >>
Cool Tips & Tricks ::: HTML FAQ ::: (HTML Tip) Limiting the width of your board
New Topic    Add Reply
Topic: (HTML Tip) Limiting the width of your board  (?)  Click to receive email notification of replies Click to stop receiving email notification of replies email this topic to a friend
Nutrocker

ezboard Moderator
ezSupporter
Posts: 48
Posted: 10/11/01 6:43 am    
(HTML Tip) Limiting the width of your board
By atlass

The way you do this is to simply put your forum in a table.

You'll need to put some code into your Custom HTML area, and it will override the banners that you have set in the images tab for each forum. You can then put the banners into the forum introduction area using html, unless you use the same banner in each forum, in which case you can just put it at the end of the custom header code below using <img src="full url">

If you still want to do this, then put this in the custom header (3rd box):
<div align="center">
<table width="700px">
<tr>
<td align="center">


And this into the custom footer (4th box):
</td>
</tr>
</table>
</div>


The maximum width you should go is 780px, which is a good size for 800 x 600 browsers. You can make it smaller, of course. You can also replace px with a percentage if you prefer.

Edited by: Nutrocker at: 12/22/02 2:25:22 pm

  reply to this message

Nutrocker

ezboard Moderator
ezSupporter
Posts: 5142
Posted: 9/29/02 1:04 pm    
Limit width of board and use round corner images in cells
Limit the width of your board and use round corner images in table cells.

Using images within table cells is a good way to add spice into your board design.

You can make your own images using graphics software such as Photoshop or Paint Shop Pro or you can visit sites similar to mine and choose from ready made corner images.
Use Google to search for other sites with corner
images.

Here is some HTML code as an example of what could be achieved.
The images used have an inner rounded white corner with a colored outer
area. There are two tables used, one to display the outer color and one for the
inner color.

You don't have to use rounded corner images, you can use any image you like within
a table cell, as a corner, as a border, tiled background and so on.
You are limited only by your imagination.

In this instance I have used DarkOrange round corner images from my site, the background colors for the two tables can be seen in bold.

Using the height and width you configure the outer table and inner table.
Note: There needs to be a small difference in the two height and widths in order
to show a colored 'border' around the board.
e.g. 10 pixel difference as per the HTML code below.


** advanced area - start - 3rd text box from the top **

<TABLE height="410" cellSpacing="0" cellPadding="0" width="760" bgColor="#ff8c00" summary="darkorange background outer table" border="0">
<TR>
<TD>
<TABLE height="400" cellSpacing="0" cellPadding="0" width="750" align="center" bgColor="white" summary="white background inner table" border="0">
<TR>
<TD vAlign="top"><IMG height="20" src="http://www.nutrocker.co.uk/corners/darkorange/tl.gif" width="20"></TD>
<TD vAlign="top" align="right"><IMG height="20" src="http://www.nutrocker.co.uk/corners/darkorange/tr.gif" width="20"></TD>
</TR>
<TR>
<TD class="yourclass" vAlign="top" align="middle">

** advanced area - end - 3rd text box from the top **


Your Ezboard would display in this area.


** advanced area - start - 4th text box from the top **


</TD>
</TR>
<TR>
<TD vAlign="bottom"><IMG height="20" src="http://www.nutrocker.co.uk/corners/darkorange/bl.gif" width="20"></TD>
<TD vAlign="bottom" align="right"><IMG height="20" src="http://www.nutrocker.co.uk/corners/darkorange/br.gif" width="20"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

** advanced area - end - 4th text box from the top **



The following table uses images that have an outer rounded white corner with a transparent inner
area.


<TABLE height="410" cellSpacing="0" cellPadding="0" width="760" bgColor="white" summary="white background outer table" border="0">
<TR>
<TD>
<TABLE height="400" cellSpacing="0" cellPadding="0" width="750" align="center" bgColor="#4682b4" summary="steelblue example background inner table" border="0">
<TR>
<TD vAlign="top"><IMG height="20" src="http://www.nutrocker.co.uk/corners/transcorner/tl.gif" width="20"></TD>
<TD vAlign="top" align="right"><IMG height="20" src="http://www.nutrocker.co.uk/corners/transcorner/tr.gif" width="20"></TD>
</TR>
<TR>
<TD class="yourclass" vAlign="top" align="middle">

** advanced area - end - 3rd text box from the top **


Your Ezboard would display in this area.


** advanced area - start - 4th text box from the top **


</TD>
</TR>
<TR>
<TD vAlign="bottom"><IMG height="20" src="http://www.nutrocker.co.uk/corners/transcorner/bl.gif" width="20"></TD>
<TD vAlign="bottom" align="right"><IMG height="20" src="http://www.nutrocker.co.uk/corners/transcorner/br.gif" width="20"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

** advanced area - end - 4th text box from the top **



  reply to this message

Click to receive email notification of replies Click to stop receiving email notification of replies email this topic to a friend

New Topic    Add Reply

jump to:
Topic Control Image::: Topic Commands
<< Prev Topic | Next Topic >>

Icon Legend

reply button:::Reply to Post Button   edit button:::Edit Post Button  delete button:::Delete Post Button (Moderator Only)

subscribe/unsubscribe to thread button:::Subscribe to Thread Button   email to friend button:::Email to Friend Button  



- Cool Tips & Tricks - HTML FAQ -

Communitiesezboard Help Communities:

Help Forums Help Forums Bug Base Bug Base





Powered By ezboard® Ver. 7.32
Copyright ©1999-2007 ezboard, Inc.