Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Image stacking

Reply
Thread Tools

Image stacking

 
 
Samuel Marin
Guest
Posts: n/a
 
      05-08-2008
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.
 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      05-09-2008
On May 8, 7:59 pm, Samuel Marin <(E-Mail Removed)> 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 **** 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 ****
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.

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      05-09-2008
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2008-05-08, Samuel Marin <(E-Mail Removed)> 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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      05-09-2008
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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-10-2008
In article <(E-Mail Removed)>,
Ben C <(E-Mail Removed)> wrote:

> On 2008-05-09, dorayme <(E-Mail Removed)> wrote:
> > In article <(E-Mail Removed)>,
> > Ben C <(E-Mail Removed)> 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
 
Reply With Quote
 
Samuel Marin
Guest
Posts: n/a
 
      05-10-2008
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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      05-10-2008
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Image stacking Samuel Marin HTML 14 05-10-2008 12:43 AM
3560 Stacking amyl@paxemail.com Cisco 3 04-02-2005 09:57 AM
Stacking 2501s Fred Atkinson Cisco 1 01-13-2005 07:48 AM
Stacking 3550s with Gigastack Johnny Noitargim Cisco 4 10-03-2004 08:24 AM
differences btw stacking 2950 and 3750 evil duck Cisco 1 03-04-2004 05:21 PM



Advertisments