CSS: a simple layout won't work in CSS

Discussion in 'HTML' started by liketofindoutwhy@gmail.com, Mar 19, 2008.

  1. Guest

    A simple layout is attempted in CSS but can't be made into practice...


    The result desired is displayed on:
    http://www.0011.com/layout/want_to.html

    (it is validated as HTML 4.01 Strict)

    but that is done using a table. I don't want to use a table because i
    think for some browsers, if there are 100 rows... then the table won't
    be rendered until all 100 rows of images have been detected for the
    width and height... the page may be empty until all 100 images are
    loaded. (that might be for some older browsers). Nevertheless, I want
    to try using span or div to do it.


    A big issue is that I don't know the size of the image in advance (it
    can be any image in the database).

    so I tried just using a div with "vertical-align: middle" and it
    doesn't work, as in

    http://www.0011.com/layout/try1.html

    and then "line-height:100%" using a span and it doesn't work, as in

    http://www.0011.com/layout/try2.html


    and also floating the 2 div left and right, and with the right hand
    side "height:1em;margin:auto 0" just like centering a div
    horizontally and won't work.

    http://www.0011.com/layout/try3.html


    i tried height: 100% and vertical-align: middle and even the the
    height: 100% won't work, as indicated by the dashed border.

    http://www.0011.com/layout/try4.html


    again, the image on the left is unknown for the size as it is an image
    from the database. Does somebody know how to make it happen without
    using a table and without using javascript to get the size of the
    image? thanks very much!
    , Mar 19, 2008
    #1
    1. Advertising

  2. wrote:
    > A simple layout is attempted in CSS but can't be made into practice...
    >
    >
    > The result desired is displayed on:
    > http://www.0011.com/layout/want_to.html
    >
    > (it is validated as HTML 4.01 Strict)
    >
    > but that is done using a table. I don't want to use a table because i
    > think for some browsers, if there are 100 rows... then the table won't
    > be rendered until all 100 rows of images have been detected for the
    > width and height... the page may be empty until all 100 images are
    > loaded. (that might be for some older browsers). Nevertheless, I want
    > to try using span or div to do it.
    >
    >
    > A big issue is that I don't know the size of the image in advance (it
    > can be any image in the database).


    <snip old complaint about vertical alignment>

    100 images? Maybe you should cut you page down to show maybe 25 at a
    time. That is your real problem. Next will the world collapse if the
    text is not centered vertically with the image? If it is so important
    use a table, or set div to "display: table-cell" and let IE users go hang...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 19, 2008
    #2
    1. Advertising

  3. Guest

    On Mar 19, 5:29 am, "Jonathan N. Little" <> wrote:

    > 100 images? Maybe you should cut you page down to show maybe 25 at a
    > time. That is your real problem. Next will the world collapse if the
    > text is not centered vertically with the image? If it is so important
    > use a table, or set div to "display: table-cell" and let IE users go hang...


    hm... even if it is 25, the page may load slower... such as for people
    who don't have broadband... (but i found that IE 7 and Firefox 2 will
    both show the page before any image is loaded). So this may be out
    of pure attempt to know how to do it in CSS....

    the display: table-cell will work so long as height: 100px is added...
    then the line is centered vertically. however, if the height: 100px
    is not specified, then it won't work.... that's a problem because the
    image size is unknown. Do you think you can provide the 2 or 3 lines
    that will make it work? The BIGGEST reason why this is to be
    vertically centered is that, the line is actually a "Delete" link...
    so if the word "Delete" is shown at top or at bottom, then the user
    may accidentally click the "Delete" for the wrong image. So centering
    it vertically is very helpful.
    , Mar 19, 2008
    #3

  4. > The BIGGEST reason why this is to be
    > vertically centered is that, the line is actually a "Delete" link...
    > so if the word "Delete" is shown at top or at bottom, then the user
    > may accidentally click the "Delete" for the wrong image. So centering
    > it vertically is very helpful.
    >


    Well you could give visual clues to help. If each image with control
    links where in a block, "pixbox" you could float image images had have
    the control links have a top and bottom margins that "push" them visibly
    with the top and bottom dimensions of the image. You can add margins to
    the "pixbox" container to give visual separation and|or borders!

    div.pixbox {
    margin: 2em 0; padding: .5em; border-top: 1px solid #000;
    clear: left; overflow: hidden;
    }

    div.pixbox img {
    display: block; float: left; margin-right: 1em;
    }

    div.pixbox ul {
    margin: 3em 0; padding: 0; list-style: none;
    }



    <div class="pixbox">
    <img src="someimage.jpg" alt="image" width="300" height="300">
    <ul>
    <li><a href="removalscript.cgi?someimage">Delete Me</a></li>
    <li><a href="manglescript.cgi?someimage">Mangle Me</a></li>
    <li><a href="whaterverscript.cgi?someimage">Show Me That You Care</a></li>
    </ul>
    </div>


    SAPTT (Salt And Pepper To Taste)

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 19, 2008
    #4
  5. Guest

    On Mar 19, 7:32 am, "Jonathan N. Little" <> wrote:
    >
    > Well you could give visual clues to help. If each image with control
    > links where in a block, "pixbox" you could float image images had have
    > the control links have a top and bottom margins that "push" them visibly
    > with the top and bottom dimensions of the image. You can add margins to
    > the "pixbox" container to give visual separation and|or borders!


    i tried and it seems to shift the 3 text lines 2em down... so it is
    somewhat more centered and it is very practical and thanks very much.
    I wonder... is there any method to center it vertically and "very"
    centered if table is not used? (so that if the image is 20px tall,
    it is centered. if the image is 800px tall, it is centered). (hoping
    to understand the mechanics of CSS along the way)
    , Mar 19, 2008
    #5
  6. dorayme Guest

    In article
    <
    m>,
    wrote:

    > (so that if the image is 20px tall,
    > it is centered. if the image is 800px tall, it is centered). (hoping
    > to understand the mechanics of CSS along the way)


    earlier you mentioned 100 images per page, ten the discussion
    turned to 25 sort of, throughout you are concerned with speed of
    [page loading, now you are talking 800px high images, what is
    going on? Are you loading thumbnails (the sensible thing to do
    so that the user can leverage up his requirements)?

    --
    dorayme
    dorayme, Mar 19, 2008
    #6
  7. Bergamot Guest

    wrote:
    >
    > The result desired is displayed on:
    > http://www.0011.com/layout/want_to.html
    >
    > A big issue is that I don't know the size of the image in advance (it
    > can be any image in the database).


    If it's coming from a database, get the image dimensions from there as
    well and set the appropriate sizes when the HTML is generated. Should be
    easy enough to do in your server-side script, whatever language it may be.

    --
    Berg
    Bergamot, Mar 19, 2008
    #7
  8. Guest

    On Mar 19, 8:30 am, dorayme <> wrote:

    > earlier you mentioned 100 images per page, ten the discussion
    > turned to 25 sort of, throughout you are concerned with speed of
    > [page loading, now you are talking 800px high images, what is
    > going on? Are you loading thumbnails (the sensible thing to do
    > so that the user can leverage up his requirements)?


    the real thing is... i want to find out how to vertically center that
    text on the right without using table but just using div and span.
    turns out it is rather difficult... and maybe i can do it after
    reading the whole chapters of CSS Definitive Guide for Inline elements
    and Positioning. I already read the whole chapter for Block elements.
    , Mar 20, 2008
    #8
  9. Gus Richter Guest

    wrote:
    > On Mar 19, 8:30 am, dorayme <> wrote:
    >
    >> earlier you mentioned 100 images per page, ten the discussion
    >> turned to 25 sort of, throughout you are concerned with speed of
    >> [page loading, now you are talking 800px high images, what is
    >> going on? Are you loading thumbnails (the sensible thing to do
    >> so that the user can leverage up his requirements)?

    >
    > the real thing is... i want to find out how to vertically center that
    > text on the right without using table but just using div and span.
    > turns out it is rather difficult... and maybe i can do it after
    > reading the whole chapters of CSS Definitive Guide for Inline elements
    > and Positioning. I already read the whole chapter for Block elements.


    What do you find difficult or perhaps wrong with my suggestion?

    --
    Gus
    Gus Richter, Mar 20, 2008
    #9
  10. rf Guest

    "Gus Richter" <> wrote in message
    news:...
    > wrote:
    >> On Mar 19, 8:30 am, dorayme <> wrote:
    >>
    >>> earlier you mentioned 100 images per page, ten the discussion
    >>> turned to 25 sort of, throughout you are concerned with speed of
    >>> [page loading, now you are talking 800px high images, what is
    >>> going on? Are you loading thumbnails (the sensible thing to do
    >>> so that the user can leverage up his requirements)?

    >>
    >> the real thing is... i want to find out how to vertically center that
    >> text on the right without using table but just using div and span.
    >> turns out it is rather difficult... and maybe i can do it after
    >> reading the whole chapters of CSS Definitive Guide for Inline elements
    >> and Positioning. I already read the whole chapter for Block elements.

    >
    > What do you find difficult or perhaps wrong with my suggestion?


    Possibly the difficulty is that the OP can't see your post. I can't.

    --
    Richard.
    rf, Mar 20, 2008
    #10
  11. Guest

    On Mar 19, 8:18 pm, Gus Richter <> wrote:

    > > the real thing is... i want to find out how to vertically center that
    > > text on the right without using table but just using div and span.
    > > turns out it is rather difficult... and maybe i can do it after
    > > reading the whole chapters of CSS Definitive Guide for Inline elements
    > > and Positioning. I already read the whole chapter for Block elements.

    >
    > What do you find difficult or perhaps wrong with my suggestion?


    Right, Hi Gus... the previous post you put there is the only post i
    see in this thread...
    , Mar 20, 2008
    #11
  12. Gus Richter Guest

    wrote:
    > On Mar 19, 8:18 pm, Gus Richter <> wrote:
    >
    >>> the real thing is... i want to find out how to vertically center that
    >>> text on the right without using table but just using div and span.
    >>> turns out it is rather difficult... and maybe i can do it after
    >>> reading the whole chapters of CSS Definitive Guide for Inline elements
    >>> and Positioning. I already read the whole chapter for Block elements.

    >> What do you find difficult or perhaps wrong with my suggestion?

    >
    > Right, Hi Gus... the previous post you put there is the only post i
    > see in this thread...


    Don't know why since I see it, LOL. Here it is again:

    Give the div position:relative;
    Give the span position:absolute;top:45%;

    --
    Gus
    Gus Richter, Mar 20, 2008
    #12
  13. Gus Richter Guest

    Gus Richter wrote:
    > wrote:
    >> On Mar 19, 8:18 pm, Gus Richter <> wrote:
    >>
    >>>> the real thing is... i want to find out how to vertically center that
    >>>> text on the right without using table but just using div and span.
    >>>> turns out it is rather difficult... and maybe i can do it after
    >>>> reading the whole chapters of CSS Definitive Guide for Inline elements
    >>>> and Positioning. I already read the whole chapter for Block elements.
    >>> What do you find difficult or perhaps wrong with my suggestion?

    >>
    >> Right, Hi Gus... the previous post you put there is the only post i
    >> see in this thread...

    >
    > Don't know why since I see it, LOL. Here it is again:
    >
    > Give the div position:relative;
    > Give the span position:absolute;top:45%;


    This wa in reply to the OP.

    --
    Gus
    Gus Richter, Mar 20, 2008
    #13
  14. Gus Richter Guest

    Gus Richter wrote:
    > wrote:
    >> On Mar 19, 8:18 pm, Gus Richter <> wrote:
    >>
    >>>> the real thing is... i want to find out how to vertically center that
    >>>> text on the right without using table but just using div and span.
    >>>> turns out it is rather difficult... and maybe i can do it after
    >>>> reading the whole chapters of CSS Definitive Guide for Inline elements
    >>>> and Positioning. I already read the whole chapter for Block elements.
    >>> What do you find difficult or perhaps wrong with my suggestion?

    >>
    >> Right, Hi Gus... the previous post you put there is the only post i
    >> see in this thread...

    >
    > Don't know why since I see it, LOL. Here it is again:


    I took out ALT.HTML and left only CIWAS so you guys looking at
    ALT.HTML don't see it. Did so since it's a pure CSS problem.

    --
    Gus
    Gus Richter, Mar 20, 2008
    #14
  15. rf Guest

    "Gus Richter" <> wrote in message
    news:...
    > Gus Richter wrote:
    >> wrote:
    >>> On Mar 19, 8:18 pm, Gus Richter <> wrote:
    >>>
    >>>>> the real thing is... i want to find out how to vertically center that
    >>>>> text on the right without using table but just using div and span.
    >>>>> turns out it is rather difficult... and maybe i can do it after
    >>>>> reading the whole chapters of CSS Definitive Guide for Inline elements
    >>>>> and Positioning. I already read the whole chapter for Block elements.
    >>>> What do you find difficult or perhaps wrong with my suggestion?
    >>>
    >>> Right, Hi Gus... the previous post you put there is the only post i
    >>> see in this thread...

    >>
    >> Don't know why since I see it, LOL. Here it is again:

    >
    > I took out ALT.HTML and left only CIWAS so you guys looking at
    > ALT.HTML don't see it.


    So you intentionally confused us? Dipstick!

    If you took out alt.html in your first post why did you not take alt.html
    out of your second post? Perhaps the OP was only looking at alt.html,
    knowing, or at least hoping, that messages would be crossposted to both
    groups. Maybe the OP was like me, in a hurry, and only checked alt.html,
    leaving CWIAS for later in the day.

    And what is wrong with CSS problems in alt.html anyway, which covers just
    about everything?

    --
    Richard.
    rf, Mar 20, 2008
    #15
  16. Gus Richter Guest

    rf wrote:
    >
    > So you intentionally confused us? Dipstick!
    >
    > If you took out alt.html in your first post why did you not take alt.html
    > out of your second post? Perhaps the OP was only looking at alt.html,
    > knowing, or at least hoping, that messages would be crossposted to both
    > groups. Maybe the OP was like me, in a hurry, and only checked alt.html,
    > leaving CWIAS for later in the day.
    >
    > And what is wrong with CSS problems in alt.html anyway, which covers just
    > about everything?


    If he's going to post to both, then he should check both.
    I don't like posting to where I don't subscribe, because I might not see
    responses to what I wrote. Just as happened to you here.

    One good thing is that next time you won't be so easily confused.

    --
    Gus
    Gus Richter, Mar 20, 2008
    #16
  17. Summercool Guest

    On Mar 19, 11:51 pm, Gus Richter <> wrote:
    > Gus Richter wrote:
    > > wrote:
    > >> On Mar 19, 8:18 pm, Gus Richter <> wrote:

    >
    > >>>> the real thing is... i want to find out how to vertically center that
    > >>>> text on the right without using table but just using div and span.
    > >>>> turns out it is rather difficult... and maybe i can do it after
    > >>>> reading the whole chapters of CSS Definitive Guide for Inline elements
    > >>>> and Positioning. I already read the whole chapter for Block elements.
    > >>> What do you find difficult or perhaps wrong with my suggestion?

    >
    > >> Right, Hi Gus... the previous post you put there is the only post i
    > >> see in this thread...

    >
    > > Don't know why since I see it, LOL. Here it is again:

    >
    > > Give the div position:relative;
    > > Give the span position:absolute;top:45%;


    so this is absolute within a relative positioned div... i think it
    will work almost... because the top: 45% is more like 50% - 1em
    (50% minus 1em). Another person in sitepoint or digitalpoint
    suggested using relative div outside and absolute div inside with
    bottom and right being 0, and height: 60%... so it is more like 50% +
    1em... and if using table, the text can be 1 line or 2 lines or 3
    lines... it is still centered. if done using this method, it is "sort
    of" centered...
    Summercool, Mar 21, 2008
    #17
  18. Guest

    , Mar 21, 2008
    #18
  19. Neredbojias Guest

    On 19 Mar 2008, wrote:

    > A simple layout is attempted in CSS but can't be made into practice...
    >
    >
    > The result desired is displayed on:
    > http://www.0011.com/layout/want_to.html
    >
    > (it is validated as HTML 4.01 Strict)
    >
    > but that is done using a table. I don't want to use a table because i
    > think for some browsers, if there are 100 rows... then the table won't
    > be rendered until all 100 rows of images have been detected for the
    > width and height... the page may be empty until all 100 images are
    > loaded. (that might be for some older browsers). Nevertheless, I want
    > to try using span or div to do it.
    >
    >
    > A big issue is that I don't know the size of the image in advance (it
    > can be any image in the database).


    Uh, text can be vertically-aligned to an image as in the following example.
    Dunno what else you mean.

    http://www.neredbojias.com/tsttst/vctst.html

    Sorry if this was covered in the thread, but I didn't grok it.

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
    Neredbojias, Mar 21, 2008
    #19
  20. Gus Richter Guest

    wrote:
    > so eric.j had a nice solution on
    >
    > http://www.sitepoint.com/forums/showthread.php?p=3761981#post3761981
    >
    > it is simplest... and probably can lead to more understanding of the
    > inline elements (probably need to read some reference like the CSS
    > Definitive guide by Eric Meyer)


    Does not work right for me. Had to use 11% for 300x300 img.
    Try using different size images.

    --
    Gus
    Gus Richter, Mar 21, 2008
    #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. Eric
    Replies:
    4
    Views:
    713
    clintonG
    Dec 24, 2004
  2. Chad
    Replies:
    4
    Views:
    8,329
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,005
  4. Replies:
    1
    Views:
    572
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,010
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page