Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Sidebar

I notice on many websites there are sidebars on both sides of the page...yet CityDesk appears to let you have only one

Do I have to learn HTM for this?

Henry Benjamin
Tuesday, March 25, 2003

Learning a little HTML certainly wouldn't hurt.  Most sites with multiple column's use tables to manage them.  So, you'd need to put a table into a CityDesk template.

CityDesk works very well with WYSIWYG HTML editors.  I use FrontPage, some use Dreamweaver.

Here is a worthwhile discussion about it:
http://discuss.fogcreek.com/CityDesk/default.asp?cmd=show&ixPost=194&ixReplies=16

tk
Tuesday, March 25, 2003

If you are willing to learn a little html and css, then you can achieve amazingly clean and portable sidebars like Rob provides here:

http://bluerobot.com/web/layouts/

(Amazingly clean in that you wouldn't be misusing tables as a presentational tool, and your site would still look good on browsers that don't support css.)

www.daliblume.com
Tuesday, March 25, 2003

David,

Unfortunately, CSS positioning always seems to have at least one condition in which it fails, even in supported browsers.  For instance, in the three column example at the site you cited, if you resize the window smaller from right to left the rightmost column disappears under the middle column.

I've tried the CSS positioning and use it for some things like sidebars, but use tables for my overall page layout (as I notice you do as well from your home page).

David Burch
Tuesday, March 25, 2003

David Burch,  (Since we're both David B's)
That behaviour is not exactly a failure, since it is as designed.  (See the css and note the z-index and explicit widths of the nav sections.)

Even without css, how do you not have a problem with very narrow windows if you insist on three columns?  A compromise has to be made somewhere.

New question:  The behaviour I'd prefer for my site is for the main content section to resize horizontally and word wrap based on the browser's window, EXCEPT when the browsers window is too wide, in which case I've hardcoded a maximum width for my column.  Anybody know how to do that?  (Perhaps a table within a fixed table trick?  Or clever css stuff I don't know.)  I'd like my readers to be able to make smaller reading columns, but not columns that are too wide.

www.daliblume.com
Tuesday, March 25, 2003

Why worry? If the user is making a really wide column, presumably they're doing it for a reason. Whenever you try to anticipate what people are trying to do, and prevent them from doing it, you end up causing problems for some subset of surfers.

For example, perhaps the reader is nearly blind, and has their fonts set to a massive size and reads your site on a 21-inch monitor, with the window maximised. If you constrain the maximum table width using a maximum pixel width, you might be making it really hard for them to read.

I have enough faith in people that if they use a really wide window and find my web site too wide to read comfortably, they'll resize their window a bit smaller.

Darren Collins
Tuesday, March 25, 2003

There is a css property called "max-width".  I have a feeling it might not work in all browsers right now.

http://www.w3.org/TR/CSS2/visudet.html#propdef-max-width

Joel Goldstick
Wednesday, March 26, 2003

<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="150"><table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC"><table width="150" border="0" cellspacing="1" cellpadding="3">
<tr>
<td bgcolor="#FFFFFF">{$.extra1$}</td>
</tr>
</table></td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC"><table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td bgcolor="#FFFFFF">{$.body$}</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="180"><table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC"><table width="180" border="0" cellspacing="1" cellpadding="3">
<tr>
<td bgcolor="#FFFFFF">{$.sidebar$}</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

www.marktaw.com
Wednesday, March 26, 2003

That's a nice template, Mark.  If you were willing, you could remove three of the tables by decorating the other internal table with:

<table style="BORDER: #CCCCCC 1px solid"  ...

www.daliblume.com
Wednesday, March 26, 2003

Tks for the tip... I guess I'm just an old school coder at heart.

www.marktaw.com
Wednesday, March 26, 2003

*  Recent Topics

*  Fog Creek Home