Re: TECH: Website Navigation Question

On 3/26/07, Remi Villatel <maxilys@...> wrote:
> On lundi 26 mars 2007, David J. Peterson wrote:
>
> > With every strategy I've tried, the bar ends at the end of the
> > navbar text.  If I could have it extend to the end of the page, I
> > could get rid of the images, and define the length in ems.  Indeed,
> > I would be happy to do so: even though the image is tiny, the
> > fewer images the better.  Do you know a way around this problem?
>
> That's easy. Enclose your whole page in a <div> container that has the same
> background color than your navbar... and don't forget to (re-)give the
> appropriate background color to the main content area. Schematically:
That only works if the main content area is at least as big as the
navbar.  If you have a page with short content, then you'll have
David's original problem in reverse - the main content color won't
extend to the bottom of the window.

The equal-height columns thing is probably the first problem most
people try to solve when getting started with CSS, and one of the most
annoying things about CSS is how easy the solution isn't.  The fact
that tables "just work" in this instance is keeping many people using
tables for layout and hindering the growth of the semantic web.  CSS
2.1 does let you say "treat these divs like table cells", but those
attributes aren't widely supported.

 But I digress.

The most popular solution is called "faux columns" - faux, because the
alignment of the background colors with the column content is not
achieved structurally.   Instead of giving each column its own
background color individually, you set the background of the columns'
*container* to an image containing both (or all, for >2 column
layouts) colors in the appropriate proportions.  When the image is
tiled vertically, the colors line up with the content (at least, if
you've sized everything right), and it appears as though each column
has its own solid background color.

It's natural to assume that this solution only works with fixed column
widths: make an image that's, say, 800 pixels wide with the leftmost
200 pixels red and the rightmost 600 pixels blue, then set your page
to be 800px wide and the left column to be 200px wide and the main
content to be 600px wide.  Works, but isn't fluid.  Fortunately, as
Zoe Gillenwater demonstrated, there's no need to be so restrictive.

You can position a background image anywhere relative to the box it's
the background of.  If you specify a point in pixels, that tells the
browser where to put the upper left hand corner of the image.  But if
you specify percentages instead, that tells the browser where to put
the *corresponding* point on the image.  You can specify, in other
words, that you want the image at (33%, 33%), and the point that is
placed there is not the upper left hand corner of the image, but the
point 33% of the way over and 33% of the way down the image.  (And of
course, any portion of the image that winds up outside the box isn't
displayed at all.)

You can use this to make fluid faux columns: instead of an 800-pixel
image, make one as wide as the widest browser window you care about,
say 2000px.  Figure out what proportion of that width you want to use
for the navbar - if it's 200px out of 800px, like above, then that's
25%.  So make the leftmost 500 pixels of the 2000-pixel image the
navbar color, and the rightmost 1500 pixels the content color.  Then
specify for the container (a containing div, as in Remi's solution, or
the body itself):

div#container { background: url(zhyler-bg.png) 25% 0 }

And voila!  No matter how wide your window is (at least up to the size
of the image), the leftmost 25% will be one color and the rightmost
75% the other.  Then you specify the column widths to match:

div#navbar { float: left; width: 25% }
div#content { float: left; width: 75% }

and there ya go.

Anyway, you can see an example I made here:

http://thereeds.org/~mreed/fluid_faux.html

and the article introducing the idea here:

http://www.communitymx.com/content/article.cfm?cid=AFC58









--
Mark J. Reed <markjreed@...>

Reply