Re: CSS for positioning

Discussion in 'HTML' started by freemont, May 9, 2010.

  1. freemont

    freemont Guest

    On Sun, 09 May 2010 11:01:27 +0200, Alfred Molon writ:

    > My site uses tables for layout. I was experimenting yesterday with CSS
    > for positioning and ran into problems.
    >
    > More specifically I was trying to convert this table-based page:
    > http://www.molon.de/test/csspo/part2.html (ignore the links which do not
    > work)
    >
    > Here is as far as I got:
    > http://www.molon.de/test/csspo/
    >
    > There are the following problems:
    >
    > 1. The round logo on the top menu bar on the right should be aligned
    > vertically with the "Jordan 2009-10 Travelogue" header. No problem with
    > a table, but with CSS I had to give the logo an absolute position, which
    > is not good design in my opinion. How to position the logo correctly
    > without using an absolute position?


    Since your header is a fixed width, you can just add a margin to scoot it
    over.

    <div id="menu2"><font class="hline">Jordan 2009-10 Travelogue</font>
    <a href="../../../"><img style="border: 0px none;margin-left:360px;"
    src="logorund.gif" alt="" height="24" width="33"></a>
    </div>

    I'd forget I ever heard of <font> tags, if I were you. :) Use <h1> there
    instead. It's not a font, it's a heading.

    > 2. The vertical menu bar on the left should have rounded corners. But
    > the top and bottom gifs with the rounded corners are now not adjacent
    > with the vertical menu bar, no idea why. How to make them adjacent?
    >
    > 3. Then there is the mess with the central part of the page. It should
    > appear as shown on first link I posted (the one with the table-based
    > layout). What am I doing wrong?


    Looks like you straightened that out.

    > 4. One more question: does it really make sense to convert a table-based
    > layout of a thumbnail page like this for instance
    > http://www.molon.de/galleries/Jordan/Jerash/
    >
    > to a CSS-based layout?
    >
    > It would seem that for that page using tables for layout is much
    > simpler, or what do you think?


    I'm not a zealot. If tables are working for you for this site, *and the
    site behaves correctly*, why muck with it.

    That said, if you're going to convert to CSS layout, go all the way and
    make the page fluid. Leaving it set at 850px sort of defeats the purpose
    of moving away from tables. Try setting a "wrapper" div for the entire
    content of the page, set its width to, say, 85% or so, its margin to 0
    auto, and start working from there. :)
    --
    â‚ "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
     
    freemont, May 9, 2010
    #1
    1. Advertising

  2. freemont

    freemont Guest

    On Sun, 09 May 2010 15:53:03 +0000, freemont writ:

    > That said, if you're going to convert to CSS layout, go all the way and
    > make the page fluid.


    Sry to respond to me own post. :) Here's a quick re-do:

    <http://freemontsoffice.com/test/molon/>

    Strict doctype was necessary to make the centering obey in IE, and it'll
    make validation fail all over the place until you get rid of all those
    <font> tags. And there are other problems - all those pixel sizes, for
    instance. And a LOT of redundant styles. But the page "works", as far as
    fluidity.
    --
    â‚ "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
     
    freemont, May 9, 2010
    #2
    1. Advertising

  3. freemont

    123Jim Guest

    "Alfred Molon" <> wrote in message
    news:...
    > In article <>, Lewis says...
    >> Font is a HTML3 definition and has no place in HTML4 and hasn't for a
    >> decade.
    >>
    >> All pages you create should be HTML4.01 strict. Transitional should only
    >> have been used with pages that were in the process of transitioning from
    >> HTML3 to HTML4, it is not a free pass to legacy code in a new document.

    >
    > Ok, I'll remove all legacy code from the pages as soon as I find the
    > time.
    > But what specifically is the problem with transitional documents, given
    > that all browsers display them properly? Perhaps that browsers are
    > forced to contain code needed to correctly display legacy HTML and that
    > there is a burden on browser developers?
    > --
    >



    May I suggest you change this:
    <div style="border: medium none; position: absolute; top: 50px; left: 10px;
    width: 295px;">

    to this:
    <div style="border: medium none; position: relative; top: 50px; left: 10px;
    width: 295px;">

    notice the only change is 'absolute' to relative on this one div .. It's not
    the end of the layout problems but it at least bumps the main text to below
    the map.
     
    123Jim, May 9, 2010
    #3
  4. freemont

    freemont Guest

    On Sun, 09 May 2010 23:04:53 +0200, Alfred Molon writ:

    > In article <>, Lewis says...
    >> Font is a HTML3 definition and has no place in HTML4 and hasn't for a
    >> decade.
    >>
    >> All pages you create should be HTML4.01 strict. Transitional should
    >> only have been used with pages that were in the process of
    >> transitioning from HTML3 to HTML4, it is not a free pass to legacy code
    >> in a new document.

    >
    > Ok, I'll remove all legacy code from the pages as soon as I find the
    > time.
    > But what specifically is the problem with transitional documents, given
    > that all browsers display them properly? Perhaps that browsers are
    > forced to contain code needed to correctly display legacy HTML and that
    > there is a burden on browser developers?


    One important consideration is that Transitional doctype will prevent
    some markup from displaying correctly - margins in particular. Like I
    noted before, if that page of yours I uploaded has the Transitional
    doctype instead of Strict, the content will not center in IE. Try it and
    see.
    --
    â‚ "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
     
    freemont, May 9, 2010
    #4
  5. freemont

    freemont Guest

    On Sun, 09 May 2010 19:58:51 +0200, Alfred Molon writ:

    > In article <73263$4be6e956$6216f0ea$>, freemont says...
    >> On Sun, 09 May 2010 15:53:03 +0000, freemont writ:
    >>
    >> > That said, if you're going to convert to CSS layout, go all the way
    >> > and make the page fluid.

    >
    > Hmmm... thumbnail sizes are fixed and there is some text below each
    > thumbnail. I'm not sure a fluid design would work here.


    Did you ever consider using an existing photo gallery software?

    That said, I believe dorayme has a page or two up that demonstrate good
    fluid thumbnail/caption layout technique. My spidey sense tells me she'll
    be along to share...
    --
    â‚ "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
     
    freemont, May 10, 2010
    #5
  6. freemont

    BootNic Guest

    On Sun, 9 May 2010 19:58:51 +0200
    Alfred Molon <> wrote:

    >> On Sun, 09 May 2010 15:53:03 +0000, freemont writ:
    >>
    >>> That said, if you're going to convert to CSS layout, go all the
    >>> way and make the page fluid.

    >
    > Hmmm... thumbnail sizes are fixed and there is some text below
    > each thumbnail. I'm not sure a fluid design would work here.


    http://bootnic.bounceme.net/TemporaryPages/inlineBlock.php

    [snip]



    --
    BootNic Sun May 9, 2010 10:55 pm
    Complaining is good for you as long as you're not complaining to the
    person you're complaining about.
    *Lynn Johnston*

    â• 64 days remaining

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v2.0.12 (GNU/Linux)

    iEYEARECAAYFAkvnda4ACgkQmo2774GZ7qksJACdH59/qRkes1h5+Gbsx/ZmVlsf
    wUkAoIDuNXBuj44upOiodVvlRR1iLPyq
    =tI1B
    -----END PGP SIGNATURE-----
     
    BootNic, May 10, 2010
    #6
  7. freemont

    Neredbojias Guest

    On 09 May 2010, Alfred Molon <> wrote:

    > In article <>, Lewis says...
    >> Font is a HTML3 definition and has no place in HTML4 and hasn't for
    >> a decade.
    >>
    >> All pages you create should be HTML4.01 strict. Transitional should
    >> only have been used with pages that were in the process of
    >> transitioning from HTML3 to HTML4, it is not a free pass to legacy
    >> code in a new document.

    >
    > Ok, I'll remove all legacy code from the pages as soon as I find the
    > time.
    > But what specifically is the problem with transitional documents,
    > given that all browsers display them properly? Perhaps that browsers
    > are forced to contain code needed to correctly display legacy HTML
    > and that there is a burden on browser developers?


    Yes, that's a good part of it and I think you are pretty sharp to
    discern it. In addition, browsers will eventually drop the
    legacy-supporting routines and become more "standards pure", if you
    will. Ie has shown signs of this already.

    --
    Neredbojias

    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, May 10, 2010
    #7
  8. freemont

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <-september.org>,
    > BootNic says...
    > > http://bootnic.bounceme.net/TemporaryPages/inlineBlock.php

    >
    > Interesting. Does that also work if the thumbnails do not all have the
    > same width?


    Without looking at the details and just guessing, the beaut thing
    about inline boxes is that (if you don't over specify with the
    CSS to hobble them) they are smart enough to cope with most
    things you throw at them.

    You were asking about thumbnails and some layout I made. Yes,
    these were done with floats but are highly managed into same size
    thumbs, classified in blocks according to general shape and good
    for truly short captions.

    http://tinyurl.com/2jcs5r

    --
    dorayme
     
    dorayme, May 10, 2010
    #8
  9. freemont

    freemont Guest

    On Mon, 10 May 2010 21:50:12 +0200, Alfred Molon writ:

    > In article <>, dorayme
    > says...

    [thumbnail layout]
    >> http://tinyurl.com/2jcs5r

    >
    > Well, I gave a try to your design, but apparently it is not able to cope
    > with thumbnails with a variable width.
    >
    > See for instance here:
    > http://www.molon.de/test/csspo/index3.html
    >
    > All thumbnails are squeezed. Removing the width/height lock yields this:
    > http://www.molon.de/test/csspo/index4.html


    Try setting height and width to 100% and see what you think.
    --
    â‚ "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
     
    freemont, May 10, 2010
    #9
  10. freemont

    123Jim Guest

    "Alfred Molon" <> wrote in message
    news:...
    > In article <>, dorayme
    > says...
    >> Without looking at the details and just guessing, the beaut thing
    >> about inline boxes is that (if you don't over specify with the
    >> CSS to hobble them) they are smart enough to cope with most
    >> things you throw at them.
    >>
    >> You were asking about thumbnails and some layout I made. Yes,
    >> these were done with floats but are highly managed into same size
    >> thumbs, classified in blocks according to general shape and good
    >> for truly short captions.
    >>
    >> http://tinyurl.com/2jcs5r

    >
    > Well, I gave a try to your design, but apparently it is not able to cope
    > with thumbnails with a variable width.
    >
    > See for instance here:
    > http://www.molon.de/test/csspo/index3.html
    >
    > All thumbnails are squeezed. Removing the width/height lock yields this:
    > http://www.molon.de/test/csspo/index4.html


    You still have width constrained here:
    #wrapper div {
    float:left;
    margin:5px 5px 10px;
    padding:0;
    text-align:center;
    width:150px; <<------------ remove this width
    }

    I'm sure Dorayme will be along with the definitive fix ;)
     
    123Jim, May 10, 2010
    #10
  11. freemont

    123Jim Guest

    "Alfred Molon" <> wrote in message
    news:...
    > In article <hs9t72$g14$-september.org>, 123Jim says...
    >> width:150px; <<------------ remove this width

    >
    > http://www.molon.de/test/csspo/index5.html
    >
    > Now it floats, but there are huge empty spaces in the page, depending on
    > the width of the window. This float feature is not too smart at
    > rearranging thumbnails on the page.
    > --
    >



    Yeah I'm looking at that ... On your table version the space is taken up in
    the cells . it's still empty space.. but enclosed in a border .. I guess you
    could contain the images in a div which you can give a height, width and
    border that looks more uniform. ...
     
    123Jim, May 10, 2010
    #11
  12. freemont

    123Jim Guest

    "123Jim" <> wrote in message
    news:hs9v87$t0$-september.org...
    >
    > "Alfred Molon" <> wrote in message
    > news:...
    >> In article <hs9t72$g14$-september.org>, 123Jim says...
    >>> width:150px; <<------------ remove this width

    >>
    >> http://www.molon.de/test/csspo/index5.html
    >>
    >> Now it floats, but there are huge empty spaces in the page, depending on
    >> the width of the window. This float feature is not too smart at
    >> rearranging thumbnails on the page.
    >> --
    >>

    >
    >
    > Yeah I'm looking at that ... On your table version the space is taken up
    > in the cells . it's still empty space.. but enclosed in a border .. I
    > guess you could contain the images in a div which you can give a height,
    > width and border that looks more uniform. ...



    er... of course they [images] already are contained in a div .. but that div
    fits neatly on the image whereas it might be better if there is more empty
    space inside the div around the image . and the div's dimensions can be made
    closer in width and height to each other.. It might take some experiment to
    land on the best relative sizes ..
     
    123Jim, May 10, 2010
    #12
  13. freemont

    dorayme Guest

    In article <hs9t72$g14$-september.org>,
    "123Jim" <> wrote:

    > "Alfred Molon" <> wrote in message
    > news:...
    > > In article <>, dorayme
    > > says...
    > >> Without looking at the details and just guessing, the beaut thing
    > >> about inline boxes is that (if you don't over specify with the
    > >> CSS to hobble them) they are smart enough to cope with most
    > >> things you throw at them.
    > >>
    > >> You were asking about thumbnails and some layout I made. Yes,
    > >> these were done with floats but are highly managed into same size
    > >> thumbs, classified in blocks according to general shape and good
    > >> for truly short captions.
    > >>
    > >> http://tinyurl.com/2jcs5r

    > >
    > > Well, I gave a try to your design, but apparently it is not able to cope
    > > with thumbnails with a variable width.
    > >
    > > See for instance here:
    > > http://www.molon.de/test/csspo/index3.html
    > >


    This actually is a plus and your thumbs look brilliant in my
    opinion. In fact it instantiates an idea that I have deliberately
    done and I am sure have urged before. As long as the enlargements
    are the real McCoy, the way they are squeezed in the thumbs will
    catch on as a convention. Ever seen the beginnings and ends of
    some old movies (try Big Country), it looks interesting when the
    figures are elongated and marks the end of the film and aspect
    management in what turns out to be a spandrel like fortuitous
    symbiosis. The nice even look of all the thumbs being same size
    (you know, the 'Campbell's Soup Cans' look) and the bit of
    squeezing distortions *can trump* naive literalistic aims.

    > > All thumbnails are squeezed. Removing the width/height lock yields this:
    > > http://www.molon.de/test/csspo/index4.html

    >
    > You still have width constrained here:
    > #wrapper div {

    ....
    > width:150px; <<------------ remove this width
    > }
    >
    > I'm sure dorayme will be along with the definitive fix ;)


    You have helpfully saved me the bother in one respect, thank you.
    The main point is that Alfred seems to have seriously
    underestimated my words "but are highly managed into same size
    thumbs, classified in blocks according to general shape and good
    for truly short captions". I will repeat that inline-block is the
    way to go for the website maker who has reasons not to do this
    management and I better now add, who cannot see the value and
    beauty in some interesting thumbnail distortions.

    The gallery I made was really for a real project and mainly for
    pictures I had taken with a 35mmm film camera and some movies
    from another camera. This situation made it easy for the
    thumbnails to be either one size landscape or one size portrait.
    And seeing as I have a gift for brevity in words, naturally being
    reticent and not the lest typative, I tend to short captions.

    I repeat for Alfred's ears: I *liked* your URL above just as it
    is, look like they would be nice pics enlarged too!

    --
    dorayme
     
    dorayme, May 11, 2010
    #13
  14. freemont

    123Jim Guest

    "dorayme" <> wrote in message
    news:...
    > In article <hs9t72$g14$-september.org>,
    > "123Jim" <> wrote:
    >
    >> "Alfred Molon" <> wrote in message
    >> news:...
    >> > In article <>, dorayme
    >> > says...
    >> >> Without looking at the details and just guessing, the beaut thing
    >> >> about inline boxes is that (if you don't over specify with the
    >> >> CSS to hobble them) they are smart enough to cope with most
    >> >> things you throw at them.
    >> >>
    >> >> You were asking about thumbnails and some layout I made. Yes,
    >> >> these were done with floats but are highly managed into same size
    >> >> thumbs, classified in blocks according to general shape and good
    >> >> for truly short captions.
    >> >>
    >> >> http://tinyurl.com/2jcs5r
    >> >
    >> > Well, I gave a try to your design, but apparently it is not able to
    >> > cope
    >> > with thumbnails with a variable width.
    >> >
    >> > See for instance here:
    >> > http://www.molon.de/test/csspo/index3.html
    >> >

    >
    > This actually is a plus and your thumbs look brilliant in my
    > opinion. In fact it instantiates an idea that I have deliberately
    > done and I am sure have urged before. As long as the enlargements
    > are the real McCoy, the way they are squeezed in the thumbs will
    > catch on as a convention. Ever seen the beginnings and ends of
    > some old movies (try Big Country), it looks interesting when the
    > figures are elongated and marks the end of the film and aspect
    > management in what turns out to be a spandrel like fortuitous
    > symbiosis. The nice even look of all the thumbs being same size
    > (you know, the 'Campbell's Soup Cans' look) and the bit of
    > squeezing distortions *can trump* naive literalistic aims.
    >
    >> > All thumbnails are squeezed. Removing the width/height lock yields
    >> > this:
    >> > http://www.molon.de/test/csspo/index4.html

    >>
    >> You still have width constrained here:
    >> #wrapper div {

    > ...
    >> width:150px; <<------------ remove this width
    >> }
    >>
    >> I'm sure dorayme will be along with the definitive fix ;)

    >
    > You have helpfully saved me the bother in one respect, thank you.
    > The main point is that Alfred seems to have seriously
    > underestimated my words "but are highly managed into same size
    > thumbs, classified in blocks according to general shape and good
    > for truly short captions". I will repeat that inline-block is the
    > way to go for the website maker who has reasons not to do this
    > management and I better now add, who cannot see the value and
    > beauty in some interesting thumbnail distortions.
    >
    > The gallery I made was really for a real project and mainly for
    > pictures I had taken with a 35mmm film camera and some movies
    > from another camera. This situation made it easy for the
    > thumbnails to be either one size landscape or one size portrait.
    > And seeing as I have a gift for brevity in words, naturally being
    > reticent and not the lest typative, I tend to short captions.
    >
    > I repeat for Alfred's ears: I *liked* your URL above just as it
    > is, look like they would be nice pics enlarged too!


    The images look great (are they HDR?) even in the distorted version, but I'm
    don't think I would be able tolerate the distortion on thumbnails. Some of
    them are very different to the 'full size' thumbs.

    Some careful calculations and adjustments might have to made to make this
    work without squashing the thumbs. I would choose a width for div that fits
    three across on about a1000 pixel wide screen. Then choose a height that is
    not too small, because then I would adjust the sizes of the thumbs to fit
    into these identical dimensioned landscape container divs. (same size boxes
    makes the whole floating left thing work better)


    This would mean making the widest landscape thumb(s) a bit less wide, and
    making the tallest portrait thumbs a bit less tall, but without distortion.
    The reason I'd make the tallest thumbs shorter is to allow less empty space
    above the landscape images in the identical dimensioned divs)
     
    123Jim, May 11, 2010
    #14
  15. freemont

    Neredbojias Guest

    On 10 May 2010, Alfred Molon <> wrote:

    > In article <>,
    > Neredbojias says...
    >> In addition, browsers will eventually drop the
    >> legacy-supporting routines and become more "standards pure", if you
    >> will.

    >
    > Possibly yes, although I would imagine that there are lots of old web
    > pages which won't be updated and will continue containing legacy
    > code.


    Certainly, but if they're not updated, they will cease to function
    effectively. The day is coming; mark my words! <g>

    --
    Neredbojias

    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, May 11, 2010
    #15
  16. freemont

    123Jim Guest

    "123Jim" <> wrote in message
    news:hsab0d$vpe$-september.org...
    >
    > "dorayme" <> wrote in message
    > news:...
    >> In article <hs9t72$g14$-september.org>,
    >> "123Jim" <> wrote:
    >>
    >>> "Alfred Molon" <> wrote in message
    >>> news:...
    >>> > In article <>, dorayme
    >>> > says...
    >>> >> Without looking at the details and just guessing, the beaut thing
    >>> >> about inline boxes is that (if you don't over specify with the
    >>> >> CSS to hobble them) they are smart enough to cope with most
    >>> >> things you throw at them.
    >>> >>
    >>> >> You were asking about thumbnails and some layout I made. Yes,
    >>> >> these were done with floats but are highly managed into same size
    >>> >> thumbs, classified in blocks according to general shape and good
    >>> >> for truly short captions.
    >>> >>
    >>> >> http://tinyurl.com/2jcs5r
    >>> >
    >>> > Well, I gave a try to your design, but apparently it is not able to
    >>> > cope
    >>> > with thumbnails with a variable width.
    >>> >
    >>> > See for instance here:
    >>> > http://www.molon.de/test/csspo/index3.html
    >>> >

    >>
    >> This actually is a plus and your thumbs look brilliant in my
    >> opinion. In fact it instantiates an idea that I have deliberately
    >> done and I am sure have urged before. As long as the enlargements
    >> are the real McCoy, the way they are squeezed in the thumbs will
    >> catch on as a convention. Ever seen the beginnings and ends of
    >> some old movies (try Big Country), it looks interesting when the
    >> figures are elongated and marks the end of the film and aspect
    >> management in what turns out to be a spandrel like fortuitous
    >> symbiosis. The nice even look of all the thumbs being same size
    >> (you know, the 'Campbell's Soup Cans' look) and the bit of
    >> squeezing distortions *can trump* naive literalistic aims.
    >>
    >>> > All thumbnails are squeezed. Removing the width/height lock yields
    >>> > this:
    >>> > http://www.molon.de/test/csspo/index4.html
    >>>
    >>> You still have width constrained here:
    >>> #wrapper div {

    >> ...
    >>> width:150px; <<------------ remove this width
    >>> }
    >>>
    >>> I'm sure dorayme will be along with the definitive fix ;)

    >>
    >> You have helpfully saved me the bother in one respect, thank you.
    >> The main point is that Alfred seems to have seriously
    >> underestimated my words "but are highly managed into same size
    >> thumbs, classified in blocks according to general shape and good
    >> for truly short captions". I will repeat that inline-block is the
    >> way to go for the website maker who has reasons not to do this
    >> management and I better now add, who cannot see the value and
    >> beauty in some interesting thumbnail distortions.
    >>
    >> The gallery I made was really for a real project and mainly for
    >> pictures I had taken with a 35mmm film camera and some movies
    >> from another camera. This situation made it easy for the
    >> thumbnails to be either one size landscape or one size portrait.
    >> And seeing as I have a gift for brevity in words, naturally being
    >> reticent and not the lest typative, I tend to short captions.
    >>
    >> I repeat for Alfred's ears: I *liked* your URL above just as it
    >> is, look like they would be nice pics enlarged too!

    >
    > The images look great (are they HDR?) even in the distorted version, but
    > I'm don't think I would be able tolerate the distortion on thumbnails.
    > Some of them are very different to the 'full size' thumbs.
    >
    > Some careful calculations and adjustments might have to made to make this
    > work without squashing the thumbs. I would choose a width for div that
    > fits three across on about a1000 pixel wide screen. Then choose a height
    > that is not too small, because then I would adjust the sizes of the thumbs
    > to fit into these identical dimensioned landscape container divs. (same
    > size boxes makes the whole floating left thing work better)
    >
    >
    > This would mean making the widest landscape thumb(s) a bit less wide, and
    > making the tallest portrait thumbs a bit less tall, but without
    > distortion. The reason I'd make the tallest thumbs shorter is to allow
    > less empty space above the landscape images in the identical dimensioned
    > divs)
    >


    850 pixels wide I should have said above as that is the example page's table
    width. That might result in the landscape images being to small, if scaled
    into a third of the width available.
    how would it work if the container divs are the same height but varied in
    width?
     
    123Jim, May 11, 2010
    #16
  17. freemont

    dorayme Guest

    In article <hsab0d$vpe$-september.org>,
    "123Jim" <> wrote:

    >
    > "dorayme" <> wrote in message
    > news:...
    > > In article <hs9t72$g14$-september.org>,
    > > "123Jim" <> wrote:
    > >
    > >> "Alfred Molon" <> wrote in message
    > >> news:...
    > >> > In article <>, dorayme
    > >> > says...
    > >> >> Without looking at the details and just guessing, the beaut thing
    > >> >> about inline boxes is that (if you don't over specify with the
    > >> >> CSS to hobble them) they are smart enough to cope with most
    > >> >> things you throw at them.
    > >> >>
    > >> >> You were asking about thumbnails and some layout I made. Yes,
    > >> >> these were done with floats but are highly managed into same size
    > >> >> thumbs, classified in blocks according to general shape and good
    > >> >> for truly short captions.
    > >> >>
    > >> >> http://tinyurl.com/2jcs5r
    > >> >
    > >> > Well, I gave a try to your design, but apparently it is not able to
    > >> > cope
    > >> > with thumbnails with a variable width.
    > >> >
    > >> > See for instance here:
    > >> > http://www.molon.de/test/csspo/index3.html
    > >> >

    > >
    > > This actually is a plus and your thumbs look brilliant in my
    > > opinion. In fact it instantiates an idea that I have deliberately
    > > done and I am sure have urged before. As long as the enlargements
    > > are the real McCoy, the way they are squeezed in the thumbs will
    > > catch on as a convention. Ever seen the beginnings and ends of
    > > some old movies (try Big Country), it looks interesting when the
    > > figures are elongated and marks the end of the film and aspect
    > > management in what turns out to be a spandrel like fortuitous
    > > symbiosis. The nice even look of all the thumbs being same size
    > > (you know, the 'Campbell's Soup Cans' look) and the bit of
    > > squeezing distortions *can trump* naive literalistic aims.
    > >
    > >> > All thumbnails are squeezed. Removing the width/height lock yields
    > >> > this:
    > >> > http://www.molon.de/test/csspo/index4.html
    > >>
    > >> You still have width constrained here:
    > >> #wrapper div {

    > > ...
    > >> width:150px; <<------------ remove this width
    > >> }
    > >>
    > >> I'm sure dorayme will be along with the definitive fix ;)

    > >
    > > You have helpfully saved me the bother in one respect, thank you.
    > > The main point is that Alfred seems to have seriously
    > > underestimated my words "but are highly managed into same size
    > > thumbs, classified in blocks according to general shape and good
    > > for truly short captions". I will repeat that inline-block is the
    > > way to go for the website maker who has reasons not to do this
    > > management and I better now add, who cannot see the value and
    > > beauty in some interesting thumbnail distortions.
    > >
    > > The gallery I made was really for a real project and mainly for
    > > pictures I had taken with a 35mmm film camera and some movies
    > > from another camera. This situation made it easy for the
    > > thumbnails to be either one size landscape or one size portrait.
    > > And seeing as I have a gift for brevity in words, naturally being
    > > reticent and not the lest typative, I tend to short captions.
    > >
    > > I repeat for Alfred's ears: I *liked* your URL above just as it
    > > is, look like they would be nice pics enlarged too!

    >
    > The images look great (are they HDR?) even in the distorted version, but I'm
    > don't think I would be able tolerate the distortion on thumbnails. Some of
    > them are very different to the 'full size' thumbs.
    >
    > Some careful calculations and adjustments might have to made to make this
    > work without squashing the thumbs. I would choose a width for div that fits
    > three across on about a1000 pixel wide screen. Then choose a height that is
    > not too small, because then I would adjust the sizes of the thumbs to fit
    > into these identical dimensioned landscape container divs. (same size boxes
    > makes the whole floating left thing work better)
    >
    >
    > This would mean making the widest landscape thumb(s) a bit less wide, and
    > making the tallest portrait thumbs a bit less tall, but without distortion.
    > The reason I'd make the tallest thumbs shorter is to allow less empty space
    > above the landscape images in the identical dimensioned divs)


    You are probably right but one needs to see a real situation and
    the caption and understand more about what would make for someone
    likely to click to see the enlargement. Most times it is hard to
    tell between two similar pictures as represented in *small*
    thumbnails anyway, they might as well be distorted sometimes for
    all that the thumbnail is a factor.

    The management I mentioned previously was to do with grouping and
    sizing. You are mentioning other ones about thumbnail
    preparations. There are even others where the thumbs are preapred
    with loving attention and a detail of the significant parts are
    fitted into a set size for thumbnail. Full enlargement shows a
    feet to hair man holding a stamp. Thumbnail might show the hand
    to forehead. Lot of work!

    --
    dorayme
     
    dorayme, May 11, 2010
    #17
  18. freemont

    Jenn Guest

    --
    Jenn (from Oklahoma)
    "Neredbojias" <> wrote in message
    news:...
    > On 10 May 2010, Alfred Molon <> wrote:
    >
    >> In article <>,
    >> Neredbojias says...
    >>> In addition, browsers will eventually drop the
    >>> legacy-supporting routines and become more "standards pure", if you
    >>> will.

    >>
    >> Possibly yes, although I would imagine that there are lots of old web
    >> pages which won't be updated and will continue containing legacy
    >> code.

    >
    > Certainly, but if they're not updated, they will cease to function
    > effectively. The day is coming; mark my words! <g>


    Ideas:
    http://snipurl.com/w4xqb

    http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
     
    Jenn, May 11, 2010
    #18
  19. freemont

    rf Guest

    "Jenn" <> wrote in message
    news:hsai3l$s5r$-september.org...

    > Ideas:
    > http://snipurl.com/w4xqb
    >
    > http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm


    which, like just about everything at dynamicdrive, fails miserably if
    Javascript is disabled. The thumbnails are not even *displayed* on that page
    without Javascript, although, stupidly, the credits for them are :)

    Hint: the single most important visitor to your site does not have
    javascript enabled.
     
    rf, May 11, 2010
    #19
  20. freemont

    Jenn Guest

    "rf" <> wrote in message
    news:y84Gn.24098$...
    >
    > "Jenn" <> wrote in message
    > news:hsai3l$s5r$-september.org...
    >
    >> Ideas:
    >> http://snipurl.com/w4xqb
    >>
    >> http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

    >
    > which, like just about everything at dynamicdrive, fails miserably if
    > Javascript is disabled. The thumbnails are not even *displayed* on that
    > page without Javascript, although, stupidly, the credits for them are :)
    >
    > Hint: the single most important visitor to your site does not have
    > javascript enabled.



    Do you know anyone who disables javascript on purpose? FWIW.. most people
    have no idea how to do that, let alone would disable js unless they are just
    specifically looking to do so.. and then, such people would know how to turn
    it back on.

    The problem I have with all this stuff is that there is no code that will be
    perfect to work in every scenario for every browser and every viewer that
    hits a page. If someone disables javascript on a page that uses it, then
    it's too bad for them. If they want to view the page.. let them enable
    javascript.
    --
    Jenn (from Oklahoma)
     
    Jenn, May 11, 2010
    #20
    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. Guest

    OT ...CSS positioning

    Guest, Apr 7, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    372
    Kevin Spencer
    Apr 7, 2004
  2. Eric

    Datalist and CSS positioning

    Eric, Sep 14, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    575
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 14, 2005
  3. PeterMcC

    Re: css positioning vs. tables

    PeterMcC, Jun 23, 2003, in forum: HTML
    Replies:
    0
    Views:
    861
    PeterMcC
    Jun 23, 2003
  4. David Graham

    Re: CSS positioning help - Mozilla

    David Graham, Jun 28, 2003, in forum: HTML
    Replies:
    1
    Views:
    5,530
    Lorne Cameron
    Jun 28, 2003
  5. brucie
    Replies:
    8
    Views:
    2,054
    Wipkip
    Jun 29, 2003
Loading...

Share This Page