CSS Position Fixed on one axis

[Nap]

Is there a way of fixing an element's position (say a DIV) vertically only.

I want my Nav bar to be at the top of the screen. However, if the user makes the browser window narrow, then the position: fixed; property makes it impossible for them to scroll to the right and see things off the page.

Cheers,
Nap

[factor]

Can you show us the page in question?

[Nap]

It's on a local server not accessable from the net.
It's a template I'm working for a Joomla installation.

I've uploaded the relevant files. If you have a Joomla install available, you can install the template. I'm modifying one of the default ones that comes with 1.0.11.

Cheers,
Nap

[Nap]

CSS is the most idiotic invention I've seen so far.
Wish they would reinvent Wordstar.

[factor]

Hi!

I have a Joomla installation on my localhost also, I have installed your template and I see the problem. Unfortunately I don't know a quick solution for this issue. position: fixed positions the element relative to the browser window, so it will not scroll with the page. It also requires a hack to work in IE. Your main content area looks pretty messed up in my browsers, but it's not finished I assume.

[Nap]

Hey Factor,

You're right on all accounts.
I have continued to work on the layout and have it now the way I set out to do it (though still with the fixed positioning problem).
Now I have to decide if that's how I want it to look. hehe.

I'm quite pleased with myself since the template doesn't use Tables at all. I've included the updated files. I still need to work on the IE template since I've only made the FF version work.

In addition to the positioning problem, I seem to have a problem with Z-index. The SEARCH button moves behind the fixed element instead of in front.

Cheers,
Nap

[factor]

As the next step I'd correct the width of your content tables, they are set to fixed 700px, now when you have two columns in your content area it messes up.

If you want to build your Joomla site completely without using tables, you can use accessible Joomla.

For the fixed position navigation I think I'd make a part of the left menu fixed (instead of the top), so the negative effect would be minimal. I also recommend optimizing the page for 1024x768 screen resolution.

I'm looking forward to see the next version of the template.

[Nap]

As the next step I'd correct the width of your content tables, they are set to fixed 700px, now when you have two columns in your content area it messes up.
Are you saying it shouldn't be fixed width or it should be some other size? (can you recommend a size, since I don't have any content on my site yet.)

If you want to build your Joomla site completely without using tables, you can use accessible Joomla.
I just wanted the challenge of making the template without tables. The rest of the site/content, I'm not really worried about (as long as it is rendered correctly).
Is accessible Joomla and addon or something?

For the fixed position navigation I think I'd make a part of the left menu fixed (instead of the top), so the negative effect would be minimal.
Do you mean like the logo that shows on the first line of the Left Column?

I also recommend optimizing the page for 1024x768 screen resolution.
I'm intending to have 3 CSS files (per browser type), 800x600, 1024x768, 1280x1024 & higher.
I've used the $_SESSION variable to detect the browser type, but don't know how to detect the user's resolution (except through Javascript). Is there a way of telling the screen size from the PHP variables?

I'm looking forward to see the next version of the template.
Np, will post when I get there.

Cheers,
Nap

[factor]

I'd set the width to fixed 980 or less pixels for 1024x768 resolution, or a liquid layout which stretches with the browser. I would not make different css files for each browser, nor for different screen resolutions.

You can check, our PHP Scripts (http://www.phpzen.com) joomla website is built completely without tables, it's a 2-3 column layout. It uses a single css file and a single template file. Using more css and/or template files just would make the redesign harder.

Accessible joomla is a version built without tables (not completely I think, I never used it, I made our site tableless myself), you can download it from here (http://forge.joomla.org/sf/go/projects.accessible_joomla/frs.accessible_joomla)

Yes, like a logo on the top of the left column, so it does not take that much space on the top of the page

[Ultimater]

In the past I used to fix an element to the top via a class:

.fixed{
position:fixed;
_position:absolute;
top:0;
_top:expression(parseInt(document.body.scrollTop)+"px");
}

However that:
1. Relies upon JavaScript being enabled
2. Looks unprofessional when ran in IE due to the DIV jumping up and down onscroll due to the lag and just doesn't feel the same as position:fixed.

However all that changed when I found:
http://www.divinentd.com/experiments/emulating-position-fixed.html
which focuses upon the idea of placing all of the page contents within a container DIV that will overflow instead of the BODY.

I tend to personally use it like this:

<!--[if IE]><style type="text/css">
html, body {height:100%; overflow:hidden;}
body{margin-right:0;margin-top:0;}
#body {height:100%; overflow:auto; padding-top:10px; position:relative;}
.fixed{position:absolute;}
</style><![endif]-->
<![if !IE]><style type="text/css">
.fixed{position:fixed;}
</style><![endif]>

Then:

<body>
<div id="body">...</div>
<div class="fixed" style="top:0;left:30px;">...</div>
</body>

That way Firefox will get it's "fixed" and IE get served.