Nav bar/buttons

[Jim S]

I have been playing with variants of Lightbox and although it is pretty, it
wastes too much page space (and time).
My pages used to look like this
http://www.jimscot.myby.co.uk/Local/LH_020_governors_tree.html, but it
takes a lot of work to keep the next/up/back buttons in a fixed position.
Well it did for me ?

Using the lightview script I can place the ' command bar' and it never
moves, but I don't want the image and text as a box, I want to use the
whole screen for my image and text.
What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.html,
if you click on a thumbnail.

All I want is the (red) bar (only with prev/up/next and maybe close), but
it must sit still near the bottom of the screen.!

Please point me to a script or a CSS way of achieving this.

 

[Jan C. Faerber]

I have been playing with variants of Lightbox and although it is pretty, it
wastes too much page space (and time).
My pages used to look like thishttp://www.jimscot.myby.co.uk/...tree.html, but it takes a lot of work to keep the next/up/back buttons in a fixed position.

Yes - I think it is really a waste of time to start like this.
Maybe you can squeeze all your pages through a search'n'replace tool(/
script).
Or take your time to learn more about computers. (o;

 

[Doug Miller]

I have been playing with variants of Lightbox and although it is pretty, it
wastes too much page space (and time).
My pages used to look like this
http://www.jimscot.myby.co.uk/Local/LH_020_governors_tree.html, but it
takes a lot of work to keep the next/up/back buttons in a fixed position.

You've been told several times, in this newsgroup, how to fix that problem.
Yet you refuse to implement the advice you've been given.

 

[dorayme]

I have been playing with variants of Lightbox and although it is pretty, it
wastes too much page space (and time).
My pages used to look like this
http://www.jimscot.myby.co.uk/Local/LH_020_governors_tree.html, but it
takes a lot of work to keep the next/up/back buttons in a fixed position.
Well it did for me ?

Using the lightview script I can place the ' command bar' and it never
moves, but I don't want the image and text as a box, I want to use the
whole screen for my image and text.
What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.html,
if you click on a thumbnail.

All I want is the (red) bar (only with prev/up/next and maybe close), but
it must sit still near the bottom of the screen.!

Please point me to a script or a CSS way of achieving this.

When I clicked on a thumbnail at one of your above URLs I got just a
picture. What red bar where? Never mind, read on old chum...

If you want something at the bottom of the screen then there are a
number of ways of doing this with varying side effects. With the page at
the last URL, you could safely put something at the bottom with absolute
positioning.

Do this:

1. Wrap all the markup you have in BODY in

<div style="position: relative"> [all your stuff] </div>

2. Now *inside* above DIV, anywhere at all *outside* TABLE, add this:

<div style="position:absolute; bottom: 0; width: 100%; text-align:
center;">... A few things here...</div>

 

[Jim S]

You've been told several times, in this newsgroup, how to fix that problem.
Yet you refuse to implement the advice you've been given.

Assume I'm plain stupid and point me to where this was.

 

[Jim S]

I have been playing with variants of Lightbox and although it is pretty, it
wastes too much page space (and time).
My pages used to look like this
http://www.jimscot.myby.co.uk/Local/LH_020_governors_tree.html, but it
takes a lot of work to keep the next/up/back buttons in a fixed position.
Well it did for me ?

Using the lightview script I can place the ' command bar' and it never
moves, but I don't want the image and text as a box, I want to use the
whole screen for my image and text.
What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.html,
if you click on a thumbnail.

All I want is the (red) bar (only with prev/up/next and maybe close), but
it must sit still near the bottom of the screen.!

Please point me to a script or a CSS way of achieving this.

When I clicked on a thumbnail at one of your above URLs I got just a
picture. What red bar where? Never mind, read on old chum...

If you want something at the bottom of the screen then there are a
number of ways of doing this with varying side effects. With the page at
the last URL, you could safely put something at the bottom with absolute
positioning.

Do this:

1. Wrap all the markup you have in BODY in

<div style="position: relative"> [all your stuff] </div>

2. Now *inside* above DIV, anywhere at all *outside* TABLE, add this:

<div style="position:absolute; bottom: 0; width: 100%; text-align:
center;">... A few things here...</div>

Thanks again.
I already have a wrapper #page in my stylesheet that sets the max width,
margin and font properties. Do I add your first <div> or just add position
relative to mine?

 

[dorayme]

....

What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.ht
ml,
if you click on a thumbnail.

....

If you want something at the bottom of the screen then there are a
number of ways of doing this with varying side effects. With the page at
the last URL, you could safely put something at the bottom with absolute
positioning.

Do this:

1. Wrap all the markup you have in BODY in

<div style="position: relative"> [all your stuff] </div>

2. Now *inside* above DIV, anywhere at all *outside* TABLE, add this:

<div style="position:absolute; bottom: 0; width: 100%; text-align:
center;">... A few things here...</div>
....

btw. The text in your captions are way too far vertically from the
thumbnails

Thanks again.
I already have a wrapper #page in my stylesheet that sets the max width,
margin and font properties. Do I add your first <div> or just add position
relative to mine?

There is no wrapper at the URL you quote above. So if you do exactly
what I said above for that page, you should be right. As for other
pages, I can only explain the general principle for you as best as I
understand it:

In brief, because of the rules of absolute positioning, any element so
positioned takes as its reference either the viewport (top: 0; left: 0;
gets the absolutely positioned box's top left corner nuzzled right up to
the top left corner of a normal visual browser window), or else the
closest ancestor element that is any position: x; where x is relative,
absolute or fixed. The default, which you almost never actually see, is
position: static. That is no good for our purpose here. That is what you
and I usually operate with and it is supplied automatically by the
browser.

The real and proper function for relative position is to offset stuff
from its normal position. But some people who know what they are doing
use it to have something else but the viewport (the html element for
some browsers no doubt) to be the reference point for some element that
is needing to be positioned. Simply because it is *other* than position:
static, an element can act as the reference point for a child or
descendant that *is* absolutely positioned. It is a useful side effect.
A bit like how it might be appreciated that one's partner has a high
fever - for a bug that one is immune to - on a freezing night.

Anyway, for practical purposes, and to simplify, if you want some
element B to be in a very specific place inside some element A, it is a
worthwhile ploy to position: relative that A element. This makes B
suddenly rush to place itself with respect to A. It treats A as home
rather than the cold imperious viewport. Believe me, VIEWPORT has no
warmth or any real empathy for its contents. I have evidence that it is
contains stuff on sufferance, duty, not out of loyalty or good
heartedness.

<http://dorayme.netweaver.com.au/alt/absolutely_one.html>
<http://dorayme.netweaver.com.au/alt/absolutely_two.html>

may help you understand this matter a little more. Copy paste the source
from the view menu of the latter especially and stick it on in your text
editor and remove position: relative from body and put it on the green
div and see what happens.

In case you are puzzled by the effect of position: relative on the real
position of the element so positioned, it has no effect at all if you do
not supply offsets with the top, left, bottom, right properties. It just
quietly announces that it is staying right where it is and that any
decendant that is positioned absolute is welcome to call it home.

 

[Jim S]

What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.ht
ml,
if you click on a thumbnail.
...

If you want something at the bottom of the screen then there are a
number of ways of doing this with varying side effects. With the page at
the last URL, you could safely put something at the bottom with absolute
positioning.

Do this:

1. Wrap all the markup you have in BODY in

<div style="position: relative"> [all your stuff] </div>

2. Now *inside* above DIV, anywhere at all *outside* TABLE, add this:

<div style="position:absolute; bottom: 0; width: 100%; text-align:
center;">... A few things here...</div>
...

btw. The text in your captions are way too far vertically from the
thumbnails

Thanks again.
I already have a wrapper #page in my stylesheet that sets the max width,
margin and font properties. Do I add your first <div> or just add position
relative to mine?

There is no wrapper at the URL you quote above. So if you do exactly
what I said above for that page, you should be right. As for other
pages, I can only explain the general principle for you as best as I
understand it:

In brief, because of the rules of absolute positioning, any element so
positioned takes as its reference either the viewport (top: 0; left: 0;
gets the absolutely positioned box's top left corner nuzzled right up to
the top left corner of a normal visual browser window), or else the
closest ancestor element that is any position: x; where x is relative,
absolute or fixed. The default, which you almost never actually see, is
position: static. That is no good for our purpose here. That is what you
and I usually operate with and it is supplied automatically by the
browser.

The real and proper function for relative position is to offset stuff
from its normal position. But some people who know what they are doing
use it to have something else but the viewport (the html element for
some browsers no doubt) to be the reference point for some element that
is needing to be positioned. Simply because it is *other* than position:
static, an element can act as the reference point for a child or
descendant that *is* absolutely positioned. It is a useful side effect.
A bit like how it might be appreciated that one's partner has a high
fever - for a bug that one is immune to - on a freezing night.

Anyway, for practical purposes, and to simplify, if you want some
element B to be in a very specific place inside some element A, it is a
worthwhile ploy to position: relative that A element. This makes B
suddenly rush to place itself with respect to A. It treats A as home
rather than the cold imperious viewport. Believe me, VIEWPORT has no
warmth or any real empathy for its contents. I have evidence that it is
contains stuff on sufferance, duty, not out of loyalty or good
heartedness.

<http://dorayme.netweaver.com.au/alt/absolutely_one.html>
<http://dorayme.netweaver.com.au/alt/absolutely_two.html>

may help you understand this matter a little more. Copy paste the source
from the view menu of the latter especially and stick it on in your text
editor and remove position: relative from body and put it on the green
div and see what happens.

In case you are puzzled by the effect of position: relative on the real
position of the element so positioned, it has no effect at all if you do
not supply offsets with the top, left, bottom, right properties. It just
quietly announces that it is staying right where it is and that any
decendant that is positioned absolute is welcome to call it home.

Before I received the above, I had gone through all my 'Local History'
folder and tried what you said earlier. I could not get it to work using
the second <div> * inside* the first, but it looks ok at this end if I put
it (the absolute one) *outside* and immediately before </body>.
I added the details to my stylesheet to cut down on typing and had to
change the width to 99% or a horizontal scrollbar appeared in all browsers.
the pages I have changed start here
http://www.jimscot.myby.co.uk/Local/LH_010_correction_house.html

 

[dorayme]

On Thu, 24 Sep 2009 11:49:04 +1000, dorayme wrote:

What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.
ht
ml,
if you click on a thumbnail.
...

If you want something at the bottom of the screen then there are a
number of ways of doing this with varying side effects. With the page at
the last URL, you could safely put something at the bottom with absolute
positioning.

Do this:

1. Wrap all the markup you have in BODY in

<div style="position: relative"> [all your stuff] </div>

2. Now *inside* above DIV, anywhere at all *outside* TABLE, add this:

<div style="position:absolute; bottom: 0; width: 100%; text-align:
center;">... A few things here...</div>
...

btw. The text in your captions are way too far vertically from the
thumbnails

Thanks again.
I already have a wrapper #page in my stylesheet that sets the max width,
margin and font properties. Do I add your first <div> or just add
position
relative to mine?

There is no wrapper at the URL you quote above. So if you do exactly
what I said above for that page, you should be right. As for other
pages, I can only explain the general principle for you as best as I
understand it:

In brief, because of the rules of absolute positioning, any element so
positioned takes as its reference either the viewport (top: 0; left: 0;
gets the absolutely positioned box's top left corner nuzzled right up to
the top left corner of a normal visual browser window), or else the
closest ancestor element that is any position: x; where x is relative,
absolute or fixed. The default, which you almost never actually see, is
position: static. That is no good for our purpose here. That is what you
and I usually operate with and it is supplied automatically by the
browser.

The real and proper function for relative position is to offset stuff
from its normal position. But some people who know what they are doing
use it to have something else but the viewport (the html element for
some browsers no doubt) to be the reference point for some element that
is needing to be positioned. Simply because it is *other* than position:
static, an element can act as the reference point for a child or
descendant that *is* absolutely positioned. It is a useful side effect.
A bit like how it might be appreciated that one's partner has a high
fever - for a bug that one is immune to - on a freezing night.

Anyway, for practical purposes, and to simplify, if you want some
element B to be in a very specific place inside some element A, it is a
worthwhile ploy to position: relative that A element. This makes B
suddenly rush to place itself with respect to A. It treats A as home
rather than the cold imperious viewport. Believe me, VIEWPORT has no
warmth or any real empathy for its contents. I have evidence that it is
contains stuff on sufferance, duty, not out of loyalty or good
heartedness.

<http://dorayme.netweaver.com.au/alt/absolutely_one.html>
<http://dorayme.netweaver.com.au/alt/absolutely_two.html>

may help you understand this matter a little more. Copy paste the source
from the view menu of the latter especially and stick it on in your text
editor and remove position: relative from body and put it on the green
div and see what happens.

In case you are puzzled by the effect of position: relative on the real
position of the element so positioned, it has no effect at all if you do
not supply offsets with the top, left, bottom, right properties. It just
quietly announces that it is staying right where it is and that any
decendant that is positioned absolute is welcome to call it home.

Before I received the above, I had gone through all my 'Local History'
folder and tried what you said earlier. I could not get it to work using
the second <div> * inside* the first, but it looks ok at this end if I put
it (the absolute one) *outside* and immediately before </body>.
I added the details to my stylesheet to cut down on typing and had to
change the width to 99% or a horizontal scrollbar appeared in all browsers.
the pages I have changed start here
http://www.jimscot.myby.co.uk/Local/LH_010_correction_house.html

No, that has a side effect which you would not want. It makes the abs
pos in respect to viewport, which means that when the user has a narrow
height to his browser, your buttons will go on top of content (like your
pictures). This might be acceptable to you but you do not have to suffer
such a side effect. Jim, I realise you have not had the time to study
the URLs and explanation I supplied but perhaps you will now.

If you do and still really cannot follow, I will put it in a simpler and
easier to understand way. Please take some time to study the matter
first.

 

[Jim S]

On Thu, 24 Sep 2009 11:49:04 +1000, dorayme wrote:

What I am getting is shown here
http://www.jimscot.myby.co.uk/Newcastle_Quayside/Quayside_000_thumbnails.
ht
ml,
if you click on a thumbnail.

...

If you want something at the bottom of the screen then there are a
number of ways of doing this with varying side effects. With the page at
the last URL, you could safely put something at the bottom with absolute
positioning.

Do this:

1. Wrap all the markup you have in BODY in

<div style="position: relative"> [all your stuff] </div>

2. Now *inside* above DIV, anywhere at all *outside* TABLE, add this:

<div style="position:absolute; bottom: 0; width: 100%; text-align:
center;">... A few things here...</div>

...

btw. The text in your captions are way too far vertically from the
thumbnails

Thanks again.
I already have a wrapper #page in my stylesheet that sets the max width,
margin and font properties. Do I add your first <div> or just add
position
relative to mine?

There is no wrapper at the URL you quote above. So if you do exactly
what I said above for that page, you should be right. As for other
pages, I can only explain the general principle for you as best as I
understand it:

In brief, because of the rules of absolute positioning, any element so
positioned takes as its reference either the viewport (top: 0; left: 0;
gets the absolutely positioned box's top left corner nuzzled right up to
the top left corner of a normal visual browser window), or else the
closest ancestor element that is any position: x; where x is relative,
absolute or fixed. The default, which you almost never actually see, is
position: static. That is no good for our purpose here. That is what you
and I usually operate with and it is supplied automatically by the
browser.

The real and proper function for relative position is to offset stuff
from its normal position. But some people who know what they are doing
use it to have something else but the viewport (the html element for
some browsers no doubt) to be the reference point for some element that
is needing to be positioned. Simply because it is *other* than position:
static, an element can act as the reference point for a child or
descendant that *is* absolutely positioned. It is a useful side effect.
A bit like how it might be appreciated that one's partner has a high
fever - for a bug that one is immune to - on a freezing night.

Anyway, for practical purposes, and to simplify, if you want some
element B to be in a very specific place inside some element A, it is a
worthwhile ploy to position: relative that A element. This makes B
suddenly rush to place itself with respect to A. It treats A as home
rather than the cold imperious viewport. Believe me, VIEWPORT has no
warmth or any real empathy for its contents. I have evidence that it is
contains stuff on sufferance, duty, not out of loyalty or good
heartedness.

<http://dorayme.netweaver.com.au/alt/absolutely_one.html>
<http://dorayme.netweaver.com.au/alt/absolutely_two.html>

may help you understand this matter a little more. Copy paste the source
from the view menu of the latter especially and stick it on in your text
editor and remove position: relative from body and put it on the green
div and see what happens.

In case you are puzzled by the effect of position: relative on the real
position of the element so positioned, it has no effect at all if you do
not supply offsets with the top, left, bottom, right properties. It just
quietly announces that it is staying right where it is and that any
decendant that is positioned absolute is welcome to call it home.

Before I received the above, I had gone through all my 'Local History'
folder and tried what you said earlier. I could not get it to work using
the second <div> * inside* the first, but it looks ok at this end if I put
it (the absolute one) *outside* and immediately before </body>.
I added the details to my stylesheet to cut down on typing and had to
change the width to 99% or a horizontal scrollbar appeared in all browsers.
the pages I have changed start here
http://www.jimscot.myby.co.uk/Local/LH_010_correction_house.html

No, that has a side effect which you would not want. It makes the abs
pos in respect to viewport, which means that when the user has a narrow
height to his browser, your buttons will go on top of content (like your
pictures). This might be acceptable to you but you do not have to suffer
such a side effect. Jim, I realise you have not had the time to study
the URLs and explanation I supplied but perhaps you will now.

If you do and still really cannot follow, I will put it in a simpler and
easier to understand way. Please take some time to study the matter
first.

I think you might have to do that.
In the meanwhile, here is what happens if I move the </div> (relative) to
the end.
http://www.jimscot.myby.co.uk/Local/LH_010_correction_house_test.html
I will leave it for an hour or two as the wife wants to be taken out to
lunch )

 

[dorayme]

....

I think you might have to do that.
In the meanwhile, here is what happens if I move the </div> (relative) to
the end.
http://www.jimscot.myby.co.uk/Local/LH_010_correction_house_test.html

Well, that's it for the basic task. What you need now to make it look
nicer is more space between your last element that is in the normal HTML
flow, (your table element) and the buttons. Do it in your CSS sheet but
essentially here are at least two basic ways, one of them might seem
rather puzzling (on account of the fact that absolute positioning is
what goes on in a corner of Wonderland that would surprise even Alice
had she gone there. The other is straightforward intuitively:

<table style="...; margin-bottom: 2em">

or

<div style="position: absolute; ...; margin-bottom: -2em;">

or whatever margin you fancy.

-------

btw, why have you got a heading in a paragraph. Use an h heading
element, probably h1 in this case:

<h1 style="text-align: center;">House of Correction and Justice Room</h1>

 

[Jim S]

...


Well, that's it for the basic task. What you need now to make it look
nicer is more space between your last element that is in the normal HTML
flow, (your table element) and the buttons. Do it in your CSS sheet but
essentially here are at least two basic ways, one of them might seem
rather puzzling (on account of the fact that absolute positioning is
what goes on in a corner of Wonderland that would surprise even Alice
had she gone there. The other is straightforward intuitively:

<table style="...; margin-bottom: 2em">

or

<div style="position: absolute; ...; margin-bottom: -2em;">

or whatever margin you fancy.

-------

btw, why have you got a heading in a paragraph. Use an h heading
element, probably h1 in this case:

<h1 style="text-align: center;">House of Correction and Justice Room</h1>

Once again we are at cross purposes.
Using the method you have described - true the 'buttons' are at the bottom
of the screen, but if I were to use a bigger picture then they would
disappear off the bottom. I don't want that.
Nor do I want them to sometimes be touching the statusbar and sometimes be
2 cm above it. I want them to be eg 2 mm above the status bar and never to
move whatever happens to the text or picture above.
The javascript I have used for the Newcastle/Gateshead and other sections
does just that for my screen, but lord knows what it does on yours.
That works OK when there is only one picture and not too much text, but it
gets messy otherwise.

 

[dorayme]

Once again we are at cross purposes.
Using the method you have described - true the 'buttons' are at the bottom
of the screen, but if I were to use a bigger picture then they would
disappear off the bottom. I don't want that.

OK, you are wanting the buttons visible at all times. To my way of
thinking, this looks natural:

<http://dorayme.890m.com/roger.html>

Resize your window all ways and see how this works. Users can see they
have not got to the bottom of the page by various means (scrollbars for
a start) and should expect some nav arrows at the bottom if they have
many times seen them on your pages that have little by way of height.

If you position the navigation div in respect to the viewport, the
arrows will overlay your pictures. I can't imagine you would want that.

The alternative is simple, you get the arrows always in view and not
interfering if you simply put them at top under the heading. No need for
any absolute positioning.