Image stacking

Discussion in 'HTML' started by Samuel Marin, May 9, 2008.

  1. Samuel Marin

    Samuel Marin Guest

    EDIT:

    Oops. I found my solution. Just put the slices in a table. Easy as that!


    Sam.

    Hi.

    In an attempt to make a nice menu, I sliced horizontally a picture
    containing the different links. I get 6 pictures, each one a part of the
    full image.
    I used javascripting - not my own code - to show an altered image on the
    MouseOver event.

    My problem is: if I just stack the pictures, they will fit nicely and
    recreate the full picture, but when I associate an anchor to each of the
    6 images, they are separated by a couple of pixel lines, thus breaking
    my full picture.

    Does anyone know an easy workaround? Thanks.


    Sam.
     
    Samuel Marin, May 9, 2008
    #1
    1. Advertising

  2. On May 8, 7:59 pm, Samuel Marin <> wrote:
    > Oops. I found my solution. Just put the slices in a table. Easy as that!


    Unless your solution includes a complete re-writing of this site, you
    HAVE NOT found the solution. Your site sucks. Yes, I am being blunt,
    but it is the truth, your site sucks. A kindergartener could shit on
    the floor and produce a better site than this.

    Lose the flash header. It does nothing for your site. What the ****
    is with the green? do you even have a clue about design? Be glad you
    life does not depend on your web skills because you would be the first
    to be killed.

    Who the hell is letting these people design sites?

    Look at the archives of this group. LEARN Here, let me type it again
    L E A R N take a look at your site, then take a look at sites created
    by your competition. Do you not see s difference???? How do you even
    think you are ready to produce a real website?

    Now the good news. You are about 2 weeks away from producing a
    freaking awesome site. Look, listen, LEARN That is all you have to
    do.

    I am not trying to be mean. I am not trying to be cruel or harsh, but
    facts are facts. you are NOT ready to be a web developer. Not if
    this is the best you can do. But you are not far away from making
    something great. DESIGN That is the key. ANYONE can produce a shit
    website like yours. There is nothing special about it. It is nothin
    more than a minnow in the ocean. you need to create a whale. And you
    can. It is not hard. but you have to suck it up and admit you
    haven't a clue. But, you can learn. Please learn. Please IMPROVE the
    web, don't put crap out there that is mediocer at best.

    Take a few weeks off and just look, and study, then blow us away with
    your new design. It will pay you off in spades if you do that.
     
    Travis Newbury, May 9, 2008
    #2
    1. Advertising

  3. Samuel Marin

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-05-08, Samuel Marin <> wrote:
    > > EDIT:
    > >
    > > Oops. I found my solution. Just put the slices in a table. Easy as that!

    >
    > That only works in quirks mode.
    >
    > If you put the strict mode doctype at the top of each of your HTML pages
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > which is recommended for all new pages, you get the gaps between the
    > slices again.
    >
    > The gaps are because img is display: inline and so sits on the text
    > baseline as if it were a glyph. Some explanation here:
    > http://tinyurl.com/2x3t8f.
    >
    > You can use vertical-align: bottom as that link suggests, or, more
    > simply, just set display: block on the images.
    >


    Yes, this works nicely for where there is no inline text involved.
    Perhaps we can say that the vertical-align way is best for when bottom
    line-up of images with text is desired (for some aesthetic reason
    perhaps) but that display: block is neater where there is just images.
    or is this perhaps too obvious to say. Anyway, I said it and, as usual,
    disgracefully, have no shame.

    (Reminds me of an old site of mine with some slices and js, so that is
    why I keep it Transitional! I will revisit it one day and see about
    using block. <g>)



    > > Sam.
    > >
    > > Hi.
    > >
    > > In an attempt to make a nice menu, I sliced horizontally a picture
    > > containing the different links. I get 6 pictures, each one a part of the
    > > full image.
    > > I used javascripting - not my own code - to show an altered image on the
    > > MouseOver event.
    > >
    > > My problem is: if I just stack the pictures, they will fit nicely and
    > > recreate the full picture, but when I associate an anchor to each of the
    > > 6 images, they are separated by a couple of pixel lines, thus breaking
    > > my full picture.
    > >
    > > Does anyone know an easy workaround? Thanks.
    > >
    > >
    > > Sam.


    --
    dorayme
     
    dorayme, May 9, 2008
    #3
  4. Samuel Marin wrote:
    > EDIT:
    >
    > Oops. I found my solution. Just put the slices in a table. Easy as that!
    >


    Well not crazy about the design, very inefficient with all those image
    slices. Far better approach is to setup links in a UL, set background of
    the UL with the signpost without any signboards. Make larger enough for
    some text scaling. Use a plain text for your "signposts" the links can
    be styled as block and you can hover a "pointer" graphic to simulate
    your pointy signpost. Far less bandwidth and a bit more flexible....


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 9, 2008
    #4
  5. Samuel Marin

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-05-09, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> The gaps are because img is display: inline and so sits on the text
    > >> baseline as if it were a glyph. Some explanation here:
    > >> http://tinyurl.com/2x3t8f.
    > >>
    > >> You can use vertical-align: bottom as that link suggests, or, more
    > >> simply, just set display: block on the images.
    > >>

    > >
    > > Yes, this works nicely for where there is no inline text involved.
    > > Perhaps we can say that the vertical-align way is best for when bottom
    > > line-up of images with text is desired (for some aesthetic reason
    > > perhaps) but that display: block is neater where there is just images.

    >
    > I think if what you want is blocks then use display: block. A stack of
    > slices really is a stack of blocks if you ask me (people end up putting
    > <br> between the inline images, which is already a bit bogus).
    >
    > Also the number of people in the world who _really_ understand how
    > vertical-align on inline boxes is supposed to work can be counted on the
    > fingers of one hand. I reckon it's best avoided except for obvious
    > things like superscript and subscript.


    As I said, I agree about display: block being best when just images are
    involved. But if text is also wanted on the same line, then display:
    block is not quite the thing.

    This thread has been interesting to me because many moons ago when I
    started website building, I had a commercial site and a page with a
    sliced set up and js (I simply would not do it this way these days) -
    though it is still working as it happens.

    I used to puzzle why it all broke when I tried to move from transitional
    to strict doctype, so I just left it at Transitional and forgot about
    it. But this reminds me to change it and display: block works nicely to
    allow it to be a strict doctype.

    Earlier on in this thread, Ben, you were saying about doctypes and
    quirks mode. My experience was that the trouble you were mentioning also
    has to do with which doctype. In Strict, there is trouble with gaps with
    OP's original. But perhaps not with Transitional. I will show you my
    experience on this below.

    For anyone interested, here are two pages that show the effect of
    different doctypes on a stack of images that are *not* display:blocked.
    (I imagine the js is old fashioned or something, but don't worry about
    that.)

    <http://netweaver.com.au/alt/slices/map_transitional.html>

    <http://netweaver.com.au/alt/slices/map_strict.html>

    Better still is:

    <http://netweaver.com.au/alt/slices/map_strict_block.html>

    which gets one Strict 4.01 and no gaps

    --
    dorayme
     
    dorayme, May 10, 2008
    #5
  6. Samuel Marin

    Samuel Marin Guest

    Jonathan N. Little a écrit :
    > Samuel Marin wrote:
    >> EDIT:
    >>
    >> Oops. I found my solution. Just put the slices in a table. Easy as that!
    >>

    >
    > Well not crazy about the design, very inefficient with all those image
    > slices. Far better approach is to setup links in a UL, set background of
    > the UL with the signpost without any signboards. Make larger enough for
    > some text scaling. Use a plain text for your "signposts" the links can
    > be styled as block and you can hover a "pointer" graphic to simulate
    > your pointy signpost. Far less bandwidth and a bit more flexible....
    >
    >


    Hi. I've thought of your solution. Sounds interesting, especially now
    that I'm thinking of translations. I don't see, however, how a simple
    text list - if that's what ULs are - can actually fit on the background
    image, with absolute precision, and not be subject to any font size
    change - user's fonts, magnification, screen resolution, etc.

    Thanks for any help again :)

    Sam.
     
    Samuel Marin, May 10, 2008
    #6
  7. Samuel Marin wrote:
    > Jonathan N. Little a écrit :
    >> Samuel Marin wrote:
    >>> EDIT:
    >>>
    >>> Oops. I found my solution. Just put the slices in a table. Easy as that!
    >>>

    >>
    >> Well not crazy about the design, very inefficient with all those image
    >> slices. Far better approach is to setup links in a UL, set background
    >> of the UL with the signpost without any signboards. Make larger enough
    >> for some text scaling. Use a plain text for your "signposts" the links
    >> can be styled as block and you can hover a "pointer" graphic to
    >> simulate your pointy signpost. Far less bandwidth and a bit more
    >> flexible....
    >>
    >>

    >
    > Hi. I've thought of your solution. Sounds interesting, especially now
    > that I'm thinking of translations. I don't see, however, how a simple
    > text list - if that's what ULs are - can actually fit on the background
    > image, with absolute precision, and not be subject to any font size
    > change - user's fonts, magnification, screen resolution, etc.
    >
    > Thanks for any help again :)
    >


    Hint: Build text block scaled in em's and design with a range of sizes
    in mid from the start. Allow of at least 2 bumps up on the text without
    having it break should do. For folks that require 2" letter in order to
    read the screen expect the layouts to be less that perfect...but they
    will be able to read your data...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 10, 2008
    #7
    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. Jerry J
    Replies:
    0
    Views:
    561
    Jerry J
    Jul 18, 2003
  2. Mike John
    Replies:
    0
    Views:
    524
    Mike John
    Jul 28, 2003
  3. Leif K-Brooks
    Replies:
    3
    Views:
    527
    Nik Coughlin
    Mar 12, 2006
  4. Laszlo Zsolt Nagy
    Replies:
    1
    Views:
    1,392
    Kartic
    Jan 26, 2005
  5. Samuel Marin

    Image stacking

    Samuel Marin, May 9, 2008, in forum: HTML
    Replies:
    14
    Views:
    834
    Travis Newbury
    May 10, 2008
Loading...

Share This Page