Image stacking

S

Samuel Marin

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

Travis Newbury

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

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

dorayme

Ben C said:
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.
Click to expand...

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


 
J

Jonathan N. Little

Samuel said:
EDIT:

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

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

dorayme

Ben C said:
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.
Click to expand...

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
 
S

Samuel Marin

Jonathan N. Little a écrit :
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....
Click to expand...

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

Jonathan N. Little

Samuel said:
Jonathan N. Little a écrit :

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 :)
Click to expand...

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image stacking 14
Image overlay and comparison code error. 2
Centering picture element for larger screen sizes 2
How can I remove the extra space marked in the image attached to my Email HTML template? 2
Horizontal scrollable table that is responsive 11
Issue with passing fetched data to POST form. How can I? 0
How do I upload image to firebase and retrieve it using picasso 14
Fading an image 6

Members online

No members online now.
Total: 25 (members: 0, guests: 25)
Robots: 383

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top