Image stacking

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.

On May 8, 7:59 pm, Samuel Marin <samuelma... (AT) wanadoo (DOT) fr> 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 fuck
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.

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

In article <slrng28lqh.l5e.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-09, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng27ttj.l5e.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> 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

On 2008-05-10, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrng28lqh.l5e.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-09, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng27ttj.l5e.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> 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.
[...]
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.

Yes that was what I was trying to say: OP was using some sort of quirks
mode (I don't know if it was Transitional or not-- it's all quirks as
far as I'm concerned) and inline img slices.

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