Fixed Option Bar at bottom

[JohnandSwifty]

Hi,

I want to have a page that displays options in a 'scrollable area' with a fixed block (approx 40px high) at the bottom for ok, proceed cancel etc buttons.

Best example of this is the 'Window colour and appearance' area in the control panel of Vista.

Any thoughts would be great.

Thanks.
John

 

[BillyRayPreachersSon]

Options... would these be options just as text labels, or would you want soem form elements (such as radio buttons / checkboxes)? Or maybe even a select element with options in it? Perhaps you could clarify, as your post really doesn't give much away.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Create an HTML element to contain your 'options'.
Give it a unique ID.
Use CSS to set it's height to 'approx 40px'.
Use CSS to position it at the bottom of the window.

Does that help?

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[JohnandSwifty]

Hi Guys,

Fair point BillyRay - so here goes.

The 'options' area can contain various different form elements be it select, input, radio etc etc.

Foamcow - the problem with positioning the options bar as (for example) a div with bottom 0 is that when the page is resized it doesnt 'squash' the options area above it, it rolls over it so the options become hidden. If that doenst sound right could you show me some code as to how you would do it?

John

 

[Foamcow]

So you have:
1. An area with stuff in and an area for 'options' below it?
2. You want the options area to be at the bottom of the window?
3. When the browser is resized the top area resizes but the options window remains the same size, still at the bottom of the window?

-----------------------------------
|                                 |
|            Area 1               |
|          (resizes)              |
|                                 |
-----------------------------------
|           Options               |
-----------------------------------

I've not got time right now to work out the code, but try thinking of the problem a little differently.

Instead of fixing the options part to the bottom of the window, try to get it to display after 'Area 1' and then work out how to make 'Area 1' 40px short of the page bottom.



<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

Try this for starters.
Though I have a suspicion it won't work in IE.

Seems ok in Firefox on my Mac though

CSS

	html {
		height:100%;
	}
	body {
		margin:0;
		padding:0;
		height:100%;
	}
	#area1 {
		background-color:#ccc;
		height:100%;
		margin-bottom:-40px;
	}
	
	#options {
		background-color:green;
		height:40px;
	}

HTML

<div id="area1">
stuff here
</div>
<div id="options">
options here
</div>

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

Slight modification to the CSS to prevent the bottom bar and content of the top area from overlapping.

* {
		margin:0;
		padding:0;
	}
	html {
		height:100%;
	}
	body {
		height:100%;
	}
	#area1 {
		background-color:#ccc;
		height:100%;
		margin-bottom:-40px;
		overflow:auto;
	}
	
	#area1 p {
		background-color:red;
	}
	
	#options {
		background-color:green;
		height:40px;
		overflow:auto;
	}

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.