forrest-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Robert Koberg" <>
Subject RE: Incubator home page (was Tapestry)
Date Sun, 05 Jan 2003 22:46:29 GMT

are you addressing me (it was not clear from the organization of your email)?

NKB asked for some examples. That was the point. To clear up anymore confusion,
the example was to show how to:
a) use a title attribute to add information to a nav item in a limited space
b) scroll something ('pre' in this case) in a div
-- the pre tag as it was used caused the entire page to scroll horiz. I tried to
offer a simple solution to keep the content on the page and just scroll the code



> -----Original Message-----
> From: Miles Elam []
> Sent: Sunday, January 05, 2003 2:13 PM
> To:
> Subject: Re: Incubator home page (was Tapestry)
> If the nav has important content and that content is crowding other
> things out, perhaps the layout should simply be rethought.  Even in
> Nikola's centipede skin with its smaller fonts, a browser at 640x480 (or
> someone with visually-assistive technologies that make fonts larger)
> could run into this problem.
> So am I correct in interpreting that the example is intended to make the
> content area keep a minimum size?  Isn't using a <pre /> tag bowing to
> the forces of browser hacks?  What ever happened to semantic meaning in
> markup?  Also, in your example, wouldn't the breakable nav text just
> wrap and excessively long identifiers  -- without breaks -- punch
> through the right side of the nav?
> Some other options that don't scroll but keep the nav width tamed:
>   2) allow the nav item text to wrap
>   3) use CSS to clip the contents to fit a given width
> #2 allows all of the text to be seen, and the nav bottom will simply
> extend further down the page;  However, if there are no breakable
> whitespace characters (eg. reallylongidentifiersthatgoonandonandon) this
> will blow out the layout.
> #3 Here you tell the browser (in CSS) to keep the nav item heights
> static, the widths static, and clip the ends (with title attributes to
> show the full content).  Browsers that don't handle CSS won't have the
> nav on the left crowding things anyway.  The drawback of course being
> that you cannot see the whole identifier at once without the tooltip.
> Then again, is this something we want to encourage anyway?  Excessively
> long identifiers in a nav only tend to blur the information for the
> user.  Perhaps this would be a gentle nudge to the documentation author
> that they should rethink their nav identifier?
> The third item has a related set of disadvantages.  If the nav is a
> fixed width (pixel-based width), as people raise the font size for
> readability, the visible portion of the identifiers will become shorter
> and shorter -- possibly obscuring their meaning.  If it is font-flexible
> (em-based width), as the font size is increased, the nav will take more
> and more screen real-estate.
> -------
> I guess the issues to work out are whether we should tweak font sizes in
> the nav, take measures to maintain a minimum size of the content area,
> and/or use some sort of truncation technique on nav identifiers.
> Overall, this is a general layout/design issue that may only be
> correctly be answered by site using Forrest.  Maybe a skin should be
> prepared that doesn't have the nav on the left side for sites that
> consider this an issue?  Personally, I hate pages that make me scroll
> horizontally to get to the main page content.  But I am not everyone;
> That may just be my pet peave.  What does everyone else think?
> - Miles
> >>>Also, what about putting the <pre/> in a horzizontally scrolling DIV
> >>>(width:100%)? I don't know how this would work with all browsers (fail
> >>>gracefully?).
> >>>
> >>>
> >>Can you add an example of that too? Seems cool, I wanna try it.
> >>
> >>
> >
> >how about something like:
> >
> ><div style="width:100%">
> ><div style="position:absolute;left:0px;width:170px;">
> ><!-- On rollover in most browsers the title displays like a tooltip -->
> ><a href="apage.html" title="The title or full label">yyyyyyyy</a>
> ></div>
> ><div style="margin-left:180px;margin-right:185px;width:70%;overflow:scroll;">
> ><pre>
> >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
> xxxxxxxxxxx
> >xxxxxxxxxxxxxxxxxx
> ></pre>
> ></div>
> ></div>
> >
> >Of course some tweaking will be necessay :)
> >
> >

View raw message