attn dorayme and others who recognise the sig

[Jim S]

Hi again

I've gone back and produced this one
http://www.jimscot.myby.co.uk/jims_page_js.htm
It's a bit smaller (in bytes) then my current version of this page.
The problem for me now seems to be centring the image and text in the way
that a table-cell allows.
I can also imagine that it would be a major leap to designing my index page
by this method.

 

[dorayme]

Hi again

I've gone back and produced this one
http://www.jimscot.myby.co.uk/jims_page_js.htm
It's a bit smaller (in bytes) then my current version of this page.
The problem for me now seems to be centring the image and text in the way
that a table-cell allows.
I can also imagine that it would be a major leap to designing my index page
by this method.

To stay close to your markup and buttons (I won't revisit my view about
bringing the navigation arrows together and where to put them...), lets
tidy up the html first.

First thing to do is get rid of your line breaks (you are using these to
limit widths and it is not necessary or a good practice to do this in
your circumstances. And you should put in the width and height for the
main image.

The pic is 610px wide and so let us use this for another purpose, namely
to limit the width of the text as you want without needing those <br>s.
Let's enclose the pic and the para describing in a div and later width
it to about 610px.

I will not discuss the navigation further here.

You had:

<div>

<img src="River/River_images/Ice_Maiden_1.jpg" alt="Ice Maiden"> <br>
<p>The Ice Maiden - formerly the MV Paardeberg, a 14,000- tonne Russian
Class AAA icebreaker <br> arrives from Mobile, USA on semi-submersible
Fjord - May 24th 2008</p>

<div class="nav">....</div>

</div>

But I suggest:

<div class="pic_caption">
<img src="River/River_images/Ice_Maiden_1.jpg" width="610" height="322"
alt="Ice Maiden">
<p>The Ice Maiden - formerly the MV Paardeberg, a 14,000- tonne Russian
Class AAA icebreaker arrives from Mobile, USA on semi-submersible Fjord
- May 24th 2008</p>
</div>

<div class="nav">....</div>

And for CSS:

..pic_caption {
width: 610px;
font-family: "Comic Sans MS";
margin: auto;
text-align: left;
}

If you want to text-align: center, it is your prerogative. But you will
be questioned by St Peter when you get to the gates. I have it on High
Authority that he takes an interest in these modern technologies and
does not like ragged left edges.

 

[Jim S]

To stay close to your markup and buttons (I won't revisit my view about
bringing the navigation arrows together and where to put them...), lets
tidy up the html first.

First thing to do is get rid of your line breaks (you are using these to
limit widths and it is not necessary or a good practice to do this in
your circumstances. And you should put in the width and height for the
main image.

The pic is 610px wide and so let us use this for another purpose, namely
to limit the width of the text as you want without needing those <br>s.
Let's enclose the pic and the para describing in a div and later width
it to about 610px.

I will not discuss the navigation further here.

You had:

<div>

<img src="River/River_images/Ice_Maiden_1.jpg" alt="Ice Maiden"> <br>
<p>The Ice Maiden - formerly the MV Paardeberg, a 14,000- tonne Russian
Class AAA icebreaker <br> arrives from Mobile, USA on semi-submersible
Fjord - May 24th 2008</p>

<div class="nav">....</div>

</div>

But I suggest:

<div class="pic_caption">
<img src="River/River_images/Ice_Maiden_1.jpg" width="610" height="322"
alt="Ice Maiden">
<p>The Ice Maiden - formerly the MV Paardeberg, a 14,000- tonne Russian
Class AAA icebreaker arrives from Mobile, USA on semi-submersible Fjord
- May 24th 2008</p>
</div>

<div class="nav">....</div>

And for CSS:

.pic_caption {
width: 610px;
font-family: "Comic Sans MS";
margin: auto;
text-align: left;
}

If you want to text-align: center, it is your prerogative. But you will
be questioned by St Peter when you get to the gates. I have it on High
Authority that he takes an interest in these modern technologies and
does not like ragged left edges.

I could probably adjust to that.
Here's the page before and after as well with the right links working
http://www.jimscot.myby.co.uk/jims_page_1_js.htm.

 

[Jim S]

If you want to text-align: center, it is your prerogative. But you will
be questioned by St Peter when you get to the gates. I have it on High
Authority that he takes an interest in these modern technologies and
does not like ragged left edges.

Two problems arise from the last markup/css:
One is that although I tend to save my pics as 610 px wide (to fit 800x600
screens), they are not all that width ,which means I would have to keep the
style criteria on every page rather than in a remote stylesheet
Secondly I sometimes wish to have some of the text centred. Here I have put
the picture location above the picture to achieve this when I would rather
have had it just above the main text. This also makes the nav icons behave
oddly when viewed in 800x600 IE or any Firefox page, but I dont like having
them at the top of the screen.
http://www.jimscot.myby.co.uk/jims_page_MH.htm

 

[dorayme]

If you want to text-align: center, it is your prerogative. But you will
be questioned by St Peter when you get to the gates. I have it on High
Authority that he takes an interest in these modern technologies and
does not like ragged left edges.

Two problems arise from the last markup/css:
One is that although I tend to save my pics as 610 px wide (to fit 800x600
screens), they are not all that width ,which means I would have to keep the
style criteria on every page rather than in a remote stylesheet
Secondly I sometimes wish to have some of the text centred. Here I have put
the picture location above the picture to achieve this when I would rather
have had it just above the main text. This also makes the nav icons behave
oddly when viewed in 800x600 IE or any Firefox page, but I dont like having
them at the top of the screen.
http://www.jimscot.myby.co.uk/jims_page_MH.htm[/QUOTE]

Your page is not showing up at the moment on my browsers (your server
down?) but I understand some of the things you are saying. (I don't know
what you mean by your "the picture location").

Please reconsider having the nav arrows flung off to the corners; it is
so much simpler and straightforward to have them under or over each pic.
I gave them an absolute position because that would be fine for most
people but there are are other ways, they can be floated left and right
too... I would need to see the page again.

Let's look, given your page is unavailable, at a page I made for you at:

<http://netweaver.com.au/alt/jim.html>

Here the arrows are floated and work nicely and are always within the
bounds of the main wrapper div.

Basically, the problem you face is that you want shrink to fit the
current pic for the main wrapper without server side or js help!

Let me suggest you put the biggest size that covers most of your pics as
the width dimension for the main wrapper in the global css file. This
will then cover smaller pics and look not too bad. Let me adjust the
markup[ for you to be able to do this without having to be so exact.
Notice the way the image is now text-aligned to center to cope with the
fact that the block it is in is centered. Images, being inline by
default, will also by default align to the left. This needs correcting
now that we are being generous with the size of the block.

<http://netweaver.com.au/alt/jimWithMoreLeeway.html>

 

[Jim S]

Two problems arise from the last markup/css:
One is that although I tend to save my pics as 610 px wide (to fit 800x600
screens), they are not all that width ,which means I would have to keep the
style criteria on every page rather than in a remote stylesheet
Secondly I sometimes wish to have some of the text centred. Here I have put
the picture location above the picture to achieve this when I would rather
have had it just above the main text. This also makes the nav icons behave
oddly when viewed in 800x600 IE or any Firefox page, but I dont like having
them at the top of the screen.
http://www.jimscot.myby.co.uk/jims_page_MH.htm

Your page is not showing up at the moment on my browsers (your server
down?) but I understand some of the things you are saying. (I don't know
what you mean by your "the picture location").

Please reconsider having the nav arrows flung off to the corners; it is
so much simpler and straightforward to have them under or over each pic.
I gave them an absolute position because that would be fine for most
people but there are are other ways, they can be floated left and right
too... I would need to see the page again.

Let's look, given your page is unavailable, at a page I made for you at:

<http://netweaver.com.au/alt/jim.html>

Here the arrows are floated and work nicely and are always within the
bounds of the main wrapper div.

Basically, the problem you face is that you want shrink to fit the
current pic for the main wrapper without server side or js help!

Let me suggest you put the biggest size that covers most of your pics as
the width dimension for the main wrapper in the global css file. This
will then cover smaller pics and look not too bad. Let me adjust the
markup[ for you to be able to do this without having to be so exact.
Notice the way the image is now text-aligned to center to cope with the
fact that the block it is in is centered. Images, being inline by
default, will also by default align to the left. This needs correcting
now that we are being generous with the size of the block.

<http://netweaver.com.au/alt/jimWithMoreLeeway.html>[/QUOTE]

That's more like it - I get me centred text back )
On the page you could not access for whatever reason I moved the first line
of text above the graphic to be able to centre it without losing the left
formatted text below.
Now the only problem is the nav buttons. Given my self-imposed restraints
that they of a decent size so that the user has no problem clicking on them
and that whenever possible the page should not be forced to scroll, it
seems daft to have the buttons off the bottom of the screen when there are
vast areas of empty space on either side.
I'm off to modify that page again
http://www.jimscot.myby.co.uk/jims_page_MH.htm

 

[dorayme]

<http://netweaver.com.au/alt/jimWithMoreLeeway.html>

That's more like it - I get me centred text back )
On the page you could not access for whatever reason I moved the first line
of text above the graphic to be able to centre it without losing the left
formatted text below.
Now the only problem is the nav buttons. Given my self-imposed restraints
that they of a decent size so that the user has no problem clicking on them
and that whenever possible the page should not be forced to scroll, it
seems daft to have the buttons off the bottom of the screen when there are
vast areas of empty space on either side.
I'm off to modify that page again
http://www.jimscot.myby.co.uk/jims_page_MH.htm[/QUOTE]

In that case, why not delete from the CSS:

..up {
position: absolute;
left: 5px;
bottom: 5px;
}
..next {
position: absolute;
right: 5px;
bottom: 5px;
}


and replace with:

..nav .up {
float: left

}
..nav .next {
float: right;
}

And also, this time in the HTML, move:

<div class="nav">
<a
href="http://www.jimscot.myby.co.uk/Local_History/LH_000_thumbnails.html" <img class="up" src="http://www.jimscot.myby.co.uk/Up_red.png"
alt="Up" height="36" width="36"></a>
<a href="jims_page_2_js.htm">
<img class="next" src="http://www.jimscot.myby.co.uk/Next_red.png"
alt="Next" height="36" width="36"></a>
</div>

up to the top.

 

[Jim S]

8

That results in this
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_MH_topnav.htm
which I don't like, compared to
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_MH.htm
which I do.
Imagine you are leafing through a coffee table book. You look at the
pictures and turn the page at the bottom right corner (no need to lick your
finger here). If you wish to read the text the it should be there, if not
then a downward scroll once in a while won't hurt.

 

[dorayme]

8

That results in this
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_MH_topnav.htm
which I don't like, compared to
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_MH.htm
which I do.
Imagine you are leafing through a coffee table book. You look at the
pictures and turn the page at the bottom right corner (no need to lick your
finger here). If you wish to read the text the it should be there, if not
then a downward scroll once in a while won't hurt.[/QUOTE]

You can put back your top margin back so that the pic does not jam up to
the top.

You have a funny character showing up on your style sheet before "div"

i>>?div {
width: 700px;
....
}

About the placement of the arrows, where do you want them exactly? I did
give you a design where they were always in the bottom corners because
that is what I thought you wanted but you said you had a problem with
that?

 

[Jim S]

Imagine you are leafing through a coffee table book. You look at the

You can put back your top margin back so that the pic does not jam up to
the top.

You have a funny character showing up on your style sheet before "div"

i>>?div {
width: 700px;

Could that be because I changed charset=utf-8 to charset=ISO-8859-1 ?
It was giving me trouble on a validation site.
I've changed it back.

About the placement of the arrows, where do you want them exactly? I did
give you a design where they were always in the bottom corners because
that is what I thought you wanted but you said you had a problem with
that?

The layout which suits me best so far is :
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_MH.htm
If I have confused you, I apologise.

 

[Jim S]

Is this the way forward?

I surprise myself sometimes
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_CorrH.htm

 

[dorayme]

Is this the way forward?

I surprise myself sometimes
http://www.jimscot.pwp.blueyonder.co.uk/jims_page_CorrH.htm

Yes, this is a way out of tables into some flexibility for you.

A few points.

Look at your text editor's preferences or options or settings and see if
you can set it to save in "Unicode UTF-8 no BOM", the "no" being the
important bit to watch for. There is a bit of trouble from your
settings, it is something to do with byte order of saved files.

Consider making the arrows the same colour as the blue background of the
page so the are not too distracting. The white surround guarantees
attention enough. Now and then, in rare cases of using absolute
positioning for such things I tend to make the objects, whether they be
page numbers or other things like acknowledgements/brand, a bit faint,
more translucent to serve a couple of purposes: to not be distracting,
to be not too bad if they overlay other material in extreme user window
or browser settings.

Consider putting a main horizontal menu at top to serve as main
navigation for the whole site and not having to put such a large top
margin for your pics (which looks fine normally; but some people fight
for height in their browsers.

 

[Jim S]

Yes, this is a way out of tables into some flexibility for you.

A few points.

Look at your text editor's preferences or options or settings and see if
you can set it to save in "Unicode UTF-8 no BOM", the "no" being the
important bit to watch for. There is a bit of trouble from your
settings, it is something to do with byte order of saved files.

Consider making the arrows the same colour as the blue background of the
page so the are not too distracting. The white surround guarantees
attention enough. Now and then, in rare cases of using absolute
positioning for such things I tend to make the objects, whether they be
page numbers or other things like acknowledgements/brand, a bit faint,
more translucent to serve a couple of purposes: to not be distracting,
to be not too bad if they overlay other material in extreme user window
or browser settings.

Consider putting a main horizontal menu at top to serve as main
navigation for the whole site and not having to put such a large top
margin for your pics (which looks fine normally; but some people fight
for height in their browsers.

Here we go again. I was just showing off a little that I found out how to
put two pictures side by side, without the text being squeezed between
them and without copying blindly from stuff you provided.
Whether I could go on to produce this
http://www.jimscot.myby.co.uk/index.html
or this
http://www.jimscot.myby.co.uk/bells/index.html
is another question.
The condition being that I like the way they look! If I can do this using
<div>s then all well and good, if it means that I have to change the look
then perhaps it has all been in vain.
It is like learning a foreign language without any intention of going
anywhere foreign at the moment. I enjoy the challenge, but as yet it seems
pointless.
As for the arrow colour, well I use several different coloured pages and I
want the arrow to be a recognisable feature on all of them, hence its
colour and position.
I'm off to bed now and I guess you have most of a day to go )

 

[Jim S]

Would you be good enough to have a look at a couple of pages I've done.
I'm happy with the way they look, but used trial and error to get there.
If there are errors of markup/style that can be improved without changing
the look please point them out.
http://www.jimscot.myby.co.uk/jims_page_Graffiti.htm
http://www.jimscot.myby.co.uk/jims_page_BaT.htm

 

[dorayme]

My screen is set to 1280x1024 and the arrows are at the bottom without
any vertical scrollbars.
If I reduce to 800x600 the arrows are also at the bottom which is
somewhere at the midpoint of the image and I must scroll down to see the
rest of the image and text (there is a vertical scrollbar).
When scrolling, the arrows move up with the image. Is this what you want?

If Jim does not want this, one way to fix is to


..nav {width: 100%;}

..up {float: left;}
..next {float: right;}

instead of

..up {
position: absolute;
left: 5px;
bottom: 5px;
}
..next {
position: absolute;
right: 5px;
bottom: 5px;
}

Jim, I have forgot if I have replied to your latest post, but try not to
use <br> to help your layout quite so much. It breaks the spirit of the
endeavour. The idea is to use CSS to do as much of the presentation, the
look, as possible. I had hoped that my examples would have been a guide
to this sort of thing. But I do realise it is hard to get the hang of
the thing in practice.

 

[Jim S]

My screen is set to 1280x1024 and the arrows are at the bottom without
any vertical scrollbars.
If I reduce to 800x600 the arrows are also at the bottom which is
somewhere at the midpoint of the image and I must scroll down to see the
rest of the image and text (there is a vertical scrollbar).
When scrolling, the arrows move up with the image. Is this what you want?

I'm not sure to be honest.
If I could put them at the bottom, as happens in my 'tabled' site, they are
off the bottom on occasions and made to appear by scrolling. The way these
ones have turned out (in 800 x 600), you can use them immediately if you
don't want to read the text. I think it is called serendipity <g>