Tags:
create new tag
, view all tags
-- PeterThoeny - 29 Jan 2002 I designed the original TWiki templates with these goals in mind:

  • Related links are grouped: TWiki specific, Web specific, topic specific
  • Avoid a table for the main %TEXT% so that a long preformatted text does not have side effects.

Aesthetically it is nice to have a sidebar for navigation, many websites do that. The typical way is by using an HTML table for the layout, the MikebSkin does that for example. One drawback is that a long preformatted text confuses the layout as you can see with the attached test page (based on MikebSkin):

  • Not all of the header is visible (need to scroll horizontally)
  • The normal text is as wide as the preformatted text (you need to scroll horizontally to read the text)

Is there a way to define a sidebar in HTML that does not have this drawback?

-- PeterThoeny - 06 Jul 2001

Yes, I believe there is, but it requires using a possibly advanced style. I think if you make a paragraph float it can exist side by side with another paragraph. Following is a test:

this is a test of a floating paragraph - I don't know if it works as a side nav bar, but it's meant to be used as a typographical side-bar

This is another paragraph that should float to the right of the previous one in line. It needs to be long enough to be longer then the sidebar or otherwise, some paragraphs might get "sided" when that's not wanted. I don't know why the right paragraph is lower then the left one - browser glitch? Nope - it was mine, but I left this in as filler to show the paragraph alignments (specify the margin side to avoid offsets). This paragraph will wrap back to the, but that can be avoided by specifying the height attribute of the sidebar paragraph or the width of the right side paragraph as i've done here.

It's worth noting that unless it can't be avoided, "table layout" is generally considered a _very bad thing_ from what i've heard. On the other hand, using "float" could end up being very complicated. Is there some compelling reason not to use frames to implement sidebars?

  • [ HendrikBoom - 09 Jul 2001 ] On my browser, the words :this is a test of a " and "this is another" are superimposed at the keft of the page. The floating paragraph continues as a floating paragraph, and the main text continues properly to the right of the floating paragraph. Only the starting wordes are superimposed. The browser is Netscape 4.7.4 for Linux.

  • [ PeterThoeny - 10 Jul 2001 ] You get paragraphs one after the other (no sidebar) if style sheets are disabled. So it could be something for a skin, but not for the default templates because of the RequiredEnvironmentForTWiki.

  • [ DavidLeBlanc - 11 Jul 2001 ] Disabling stylesheets will defeat inline styles as I used above?
    • [ PeterThoeny - 10 Jul 2001 ] Yes, try it out in Netscape >> Preferences >> Advanced

-- DavidLeBlanc - 08 Jul 2001

Table layout per se is not a bad thing. You can abuse it to nail the layout down to the last pixel, but that doesn't make tables unusable in general.

Personally, I'd prefer a frameset though, provided that the URL problems can be solved. If a URL "into" a frameset isn't possible, let TWiki generate everything (frameset, sidebar, body) from scratch for every topic.

-- JoachimDurchholz - 09 Jul 2001

I noticed these layout issues after some work with preformatted text.

To address the header being off the screen, the header can be broken into a separate table, like the footer. That way, it has no relation to the size of the %TEXT% content. This does not however, address the issue of preformatted text causing normal text not to wrap.

-- MikeBarton - 07 Jul 2001

Re frames - they break many things, in particular other sites or emails can no longer point directly to a TWiki page (although some frame setups may avoid this). See Jakob Nielsen's page on frames for more information - his site should be required reading for any TWiki site designer. His page on intranet design is also worth reading.

-- RichardDonkin - 09 Jul 2001

Another drawback of a table layout is the other slashdot effect: browsers cannot start rendering, before reading the closing <table> tag. Doesn't matter for short pages, but think TWikiForBookAuthoring.

  • [ PeterThoeny - 10 Jul 2001 ] Good rendering speed was actually another factor when I designed the original templates. Rendering gets slow if content is in a table, especially if there are images with missing size information.

The workaround I use: render the page with a large left margin; position the navigation elements over the left margin. Still, there are also drawbacks to this:

  • Longish navigation text spills over into the body area
  • not so current browsers ignore the left margin to calculate the page width; so 100% wide tables get pushed beyond the right margin - there you are, scrolling...
  • Netscape flushes the left margin on any unbalanced html markup, thus mangling navigation and body text

-- PeterKlausner - 09 Jul 2001

There seems to be no viable solution for a sidebar, so for now lets keep the current templates as they are. This is fine since skins can override the templates.

-- PeterThoeny - 10 Jul 2001

How about this then: (page content is not in a table cell)

Left aligned:

TOP MENU
This is the side column.

This is the side column.

This is the side column.

This is the side column.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

 Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line.  Long PRE line. 
This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

  • This is the bitmap of left the aligned version:
    leftaligned.gif

Right Aligned:

TOP MENU
This is the side column.

This is the side column.

This is the side column.

This is the side column.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

This is the page content. This is the page content. This is the page content. This is the page content. This is the page content.

How does this look in various browsers?

-- AndrewTetlaw - 29 Jan 2002

Good idea.

I added the bitmap of the left aligned version for illustration, using Netscape 4.7. PRE text does get clipped but text above and below that does wrap around, which is the expected behaviour.

Browser, Platform: Renders OK?
Netscape 4.70, English, Win 95 yes
IE 4.72, Japanese, Win 95 yes
IE 6.0, English, Win XP yes
   
   
   
Please add above...

-- PeterThoeny - 29 Jan 2002

Topic attachments
I Attachment History Action Size Date Who Comment
GIFgif leftaligned.gif r3 r2 r1 manage 12.2 K 2002-01-30 - 05:30 PeterThoeny Bitmap of left aligned
HTMLhtml test.html   manage 1.7 K 2001-07-06 - 23:53 UnknownUser Table layout test
Edit | Attach | Watch | Print version | History: r17 < r16 < r15 < r14 < r13 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r17 - 2008-08-24 - TWikiJanitor
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.