attn dorayme and others who recognise the sig

Discussion in 'HTML' started by Jim S, May 26, 2008.

  1. Jim S

    Jim S Guest

    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.
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 26, 2008
    #1
    1. Advertising

  2. Jim S

    dorayme Guest

    In article <>,
    Jim S <> wrote:

    > 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.

    --
    dorayme
     
    dorayme, May 26, 2008
    #2
    1. Advertising

  3. Jim S

    Jim S Guest

    On Tue, 27 May 2008 08:49:00 +1000, dorayme wrote:

    > In article <>,
    > Jim S <> wrote:
    >
    >> 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.


    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
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 27, 2008
    #3
  4. Jim S

    Jim S Guest


    > 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

    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 27, 2008
    #4
  5. Jim S

    dorayme Guest

    In article <1d9muj5db2l61$>,
    Jim S <> wrote:

    > > 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


    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>

    --
    dorayme
     
    dorayme, May 28, 2008
    #5
  6. Jim S

    Jim S Guest

    On Wed, 28 May 2008 10:05:08 +1000, dorayme wrote:

    > In article <1d9muj5db2l61$>,
    > Jim S <> wrote:
    >
    >>> 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

    >
    > 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>


    That's more like it - I get me centred text back :eek:)
    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
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 28, 2008
    #6
  7. Jim S

    dorayme Guest

    In article <hqfm24iev4kc$>,
    Jim S <> wrote:

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

    >
    > That's more like it - I get me centred text back :eek:)
    > 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


    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.

    --
    dorayme
     
    dorayme, May 28, 2008
    #7
  8. Jim S

    Jim S Guest

    >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.
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 28, 2008
    #8
  9. Jim S

    dorayme Guest

    In article <19pgo7a71j453$>,
    Jim S <> wrote:

    > >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.


    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?

    --
    dorayme
     
    dorayme, May 28, 2008
    #9
  10. Jim S

    Jim S Guest

    >> 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.

    >
    > 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
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 28, 2008
    #10
  11. Jim S

    Jim S Guest

    Jim S, May 28, 2008
    #11
  12. Jim S

    dorayme Guest

    In article <c4yz7kl2qfrr$>,
    Jim S <> wrote:

    > 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.

    --
    dorayme
     
    dorayme, May 28, 2008
    #12
  13. Jim S

    Jim S Guest

    On Thu, 29 May 2008 08:16:47 +1000, dorayme wrote:

    > In article <c4yz7kl2qfrr$>,
    > Jim S <> wrote:
    >
    >> 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.


    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 :eek:)
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 29, 2008
    #13
  14. Jim S

    Jim S Guest

    Jim S, May 29, 2008
    #14
  15. Jim S

    dorayme Guest

    In article <>,
    Gus Richter <> wrote:

    > Jim S wrote:
    > > 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

    >
    > 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.

    --
    dorayme
     
    dorayme, May 30, 2008
    #15
  16. Jim S

    Jim S Guest

    On Thu, 29 May 2008 21:32:08 -0400, Gus Richter wrote:

    > Jim S wrote:
    >> 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

    >
    > 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>
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, May 30, 2008
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    [OT] Dorayme and movies

    Luigi Donatello Asero, Jan 6, 2006, in forum: HTML
    Replies:
    0
    Views:
    391
    Luigi Donatello Asero
    Jan 6, 2006
  2. Nikita the Spider
    Replies:
    10
    Views:
    531
    Nikita the Spider
    Nov 15, 2006
  3. Joe (GKF)
    Replies:
    1
    Views:
    340
    dorayme
    Dec 14, 2006
  4. matchstick86

    sig : process vs. process(sig)

    matchstick86, Oct 12, 2009, in forum: VHDL
    Replies:
    1
    Views:
    571
    power_hf2005
    Oct 13, 2009
  5. Travis
    Replies:
    3
    Views:
    383
Loading...

Share This Page