RE: Barracuda docs....

Hi Kirk,

At 05:02 PM 2/24/2003 +0200, you wrote:
>Hi,
>I like the stylesheet route.
>
>All you need to do is have seperate stylesheets for 'style' and another 
>for 'layout'
>Pretty Simple..
>
>To manage 'site wide' changes you can further split the layout into 
>'global' and 'page-specic' layouts.
>I've done something similar in my current web-app.
>Works Great.
>
>Viva la Css Positioning.. ;)

Yes, stylesheets can do fabulous things.  Take a look at the demo I 
mentioned in my previous email (especially in Mozilla!):
http://www.visi.com/~hoju/barracuda/barracuda.html

Also, try clicking on the radio buttons to use alternate 
stylesheets.  Again, use Mozilla to see maximum prettyness.  IE just plain 
gets the layout wrong.  Verify this in Opera which lays things out 
properly, albeit not with the pretty curved corners that Mozilla supports.

However, my advice is to keep positioning to a minimum.  Positioned content 
is taken out of flow.  If you aren't careful, you'll get into a situation 
where you have content that you want to just flow after the pre-existing 
content, but since that pre-existing content is absolutely positioned, the 
following content has no clue about its existence and you end up with 
normally flowed content overlaying positioned content making it so you end 
up having to position all first-level containers on the page in order to 
prevent this from happening.  In addition, positioning can make it so that 
the page doesn't expand with the available size of the window.

In my demo, I use absolute positioning only within a relatively positioned 
container (the Barracuda banner).  That way, the container flows normally 
and the absolutely positioned content is positioned only inside the context 
of its relatively positioned container.  This means it doesn't affect the 
rest of the page.

All other "positioning" is done via floating elements and positive/negative 
margins.  As you can see, this page is entirely flowable...except for the 
fact that I set a minimum width so that the tabs on the top wouldn't wrap 
when the browser is a smaller size (which only works in Mozilla and recent 
Opera versions).  Try increasing/decreasing the size of the browser to see 
this.  The main thing is that the page can expand to the size of a 
maximized browser.  I could remove the min-width constraint, but that would 
make the top tabs in the demo wrap in an ugly way.  I could probably find a 
solution to this, but just haven't had the time to look into it lately.

Anyway, that's just my $0.02 about css positioning.

Jake