Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

first site with CD!

After many (100's!) hours I have a working product, thanks much to citydesk.  The site presents my projects for a series of online courses and will serve as portfolio when I finish.  Besides that purpose, my goal was to format using CSS and create a site that displays logically with or without the CSS. 

http://www.personal.psu.edu/users/j/x/jxw388/
(the valid xhtml and css are still false advertising, but I'm almost there)

I can't say enough how much of a help CD was in automating the changes and updates I made.  Unfortunately I have already bumped against the 50-file limit, so continuing will be tough unless I shell out the $299.  Well worth the money if I had to make another site.  Without it, I would have spent at least 30% more time.  My site relies on a tabbed navigation menu, and with CD, anytime I add more pages, the tabs on every page must link to the new content.  Quite a task but the foreach loop in CD made it easy.  The hardest part was making the scripting language do what I wanted, and I would like to see a little more robust language.

Thanks Citydesk!

Jon Winchester
Monday, November 17, 2003

Impressive site.  Looks like it took a LONG time to develop.

Jeff Kolker
Monday, November 17, 2003

Great site and on one of my favorite subjects.

How'd you do all those menus?

tk
Monday, November 17, 2003

Jon, sorry to say that Netscape 7.1 makes a right mess of your site.

For example, the text that I is supposed to be in the blue blocks slips to the right and below, i.e. they are not contained in the blocks. Also the XHTML, "Made With CSS" and "Made With CityDesk" pictures are positioned right under the second blue block, and inter-mingled with all the text.

Looks great in IE6 though!

Ian

Ian Jones
Tuesday, November 18, 2003

I was afraid I'd hear something like that... I'll have to start studying NS implementation of CSS.  For now I'll see if I can make a simpler style sheet for non-IE6 browsers.

Jon Winchester
Tuesday, November 18, 2003

The menus are nested unordered lists.  Without the CSS, they should look something like this:

*Home
*Courses
  -GEOG5021
    +Course Home
    +Proj 1
    +Proj n
  -GEOG5222
    +Course Home
    +Proj 1
    +Proj n
  -GEOG5223
    +Course Home
  -GEOG5224
    +Course Home
*About me

Each of the three lists has an id tag (ullev1, ullev2, ullev3), and each <a> has a unique id.  This lets me use a script in the CSS to manage which ul's are visible or hidden, and which links appear as the current tab.  So for example, Project X in Course 5222 uses the extra1 and headline fields to create a link as follows:

<ul id="ullev3_5222">
<li><a id="alev3_5222projX" href="#">Project X</a></li>

by using a template called "GEOG 5222" containing the following script

<ul id="ullev3_5222{$ .extra1 $}">
{$ foreach x in (folder"GEOG5222") $}
<li><a id="alev3_5222proj"{$ x.extra1 $} href="{$ x.link $}>{$ x.headline $}</a></li>

The CSS file contains the following script:
{$ foreach x in (folder"GEOG5222") $}
.tablist ul ul ul#ullev3_5222proj{$ x.extra1 $} a#alev3_5222proj{$ x.extra1 $}
{ cursor:default;.../*CSS style rules for current tab */ }

That is, if the id of <ul> matches id of <a>, display <a> in a special style for the current tab selection, otherwise (if they don't match, display <a> in the normal style for that list.

I got the basic idea for this from Adam Kalsey.  All of the tab effects are done in CSS by modifying a:hover properties- border colors and width, padding, positioning, margins, etc.  The only javascript is one that opens the thumbnails in a new window.

Jon Winchester
Tuesday, November 18, 2003

Jon Winchester :re first site with CD

I looked over your stylesheet and I must say that its one of the more truly complex ones I've seen ... the on-screen results via IE6.x *is* outstanding. Good work!

David Mozer
Tuesday, November 18, 2003

Your font sizes use hardcoded points, which means that they can't be resized using IE.

John Topley (www.johntopley.com)
Tuesday, November 18, 2003

Also, try looking at it with Mozilla Firebird.

David
Tuesday, November 18, 2003

Broken in Opera 7.x, sorry to say.

And, for the record: The problem is not the CSS implementation in Netscape, Mozilla and Opera... it's that MSIE has some... erm... interesting ideas regarding the display of CSS.

geraldH
Monday, November 24, 2003

*  Recent Topics

*  Fog Creek Home