Topic: Space Twixt Images

OK, I write something like this ...

<DIV>
<IMG blah>
<IMG blah>
<IMG blah>
</DIV>

... and I get a few pixels worth of space between each image. If I delete the carriage return between each IMG tag, the space goes away, but I've got 19 images in there and having them all on one line will be a pain to read. Giving them margins of 0 doesn't help.

Additionally, every other image is smaller vertically and they all drop to the bottom of the DIV. Am I going to have to position each image absolutely?

Ugh ... it's like learning HTML all over again with these damn things. With tables, I could do what I want in a matter of minutes and not worry about it.

As far as I know, the "space between elements" thing is a quirk of HTML.

As for the vertical positioning of the images, it might help to see the page or your CSS. I'm not sure what you mean at this point.


___________________________
Suho: www.liminality.org

Wes: We had a problem like that at the GN in one of the browsers - check to see if line-height is set on one of the containing elements.

___________________
Emps

The Emperor dot org

If all else fails, you can code them like this:

<img blah
><img blah
><img blah
><img blah>

quote:

---

As far as I know, the "space between elements" thing is a quirk of HTML.

---

No, this is a browser bug (at least they don't do it right). Use Slime's suggestion.



[This message has been edited by HZR (edited 11-28-2003).]

Well, that's kind of what I meant. A quirk in the rendering of HTML by most browsers out there...


___________________________
Suho: www.liminality.org

I remember now discovering that quirk several years ago. I've been avoiding it out of habit and I guess I assumed it had worked itself out by now.

Slime's trick works for the spacing -- never would have thought of that.

As for the vertical positioning, I fixed it with a bottom margin (and top just to be sure). Still not sure why it was aligning at the bottom, though. Is this normal? (And did I fix it safely? Seems to test OK.)

Example.




[This message has been edited by Wes (edited 11-29-2003).]

It looks fine, but now that I see what you're doing (and have taken a look at your code), I think there is a far more efficient way to accomplish this. What I would do is format the images as a list, and then use the arrow graphic in place of the default bullets. This would eliminate a lot of extra code, and you wouldn't have to worry about aligning the arrows vertically. For the first image in the series, you could just give it a special class with "list-style:none", thus eliminating the bullet (arrow graphic).

That's just the concept. If you decide to try it out and need a hand with the CSS, let me know.


___________________________
Suho: www.liminality.org

Have you tried setting the images to display:block and setting all their padding/margin/border to 0?

Or, if you're trying to display them horizontally, have you tried setting the white-space property of the containing div?

a lot of people have moaned about vertical aligning and how the css property for doing it isn't supported or doesn't work. Well it does work but you have to use it right and by right I mean that it is specifically aimed at aligning images. I was trying to find an example of it's use but the only thing I had ever used it for has been changed by my boss so I'm sorry about. If you have a look on the w3c site they should explain how to use it, it is a little tricky to get the hang of.

worth looking at tho.

although I think the unordered list idea is a better way to do it.

visit my CryoKinesis Online Gallery

img {display: block; float: left; } should work, or am I misunderstanding something?

OK, so setting it up as a list worked, but as with everything I do, I had to go and complicate matters.

You can see what I've done so far at: http://www.texastwisted.com/attr/jfk/

I added some rollover and visited effects which, I think, are pretty nifty. The faded visited effect is accomplished by offsetting a background image. (I can't take credit for that; I learned it somewhere else.)

However, to make it work equally well, with no elements shifting on hover, in IE6, Moz1, NN6 and Op7, it took some real hacking. And now when I try to add the arrows as the bullets, it just goes haywire and appears impossible to make all the effects work for everything without elements shifting in at least one of the browsers.

So, I think I'm going to go instead with osphactor's simple float:left solution and suffer the longer code. My question now is this:

Since I still want to use the shifting background image for my visited effect, I'm going to need to link a block-level element. Is it legal to do that? I mean, adding anchors outside a DIV or a P?

(Otherwise, I'll have to use a spacer, like <DIV><A><IMG spacer></A></DIV>, which I don't really want to do.)





[This message has been edited by Wes (edited 12-09-2003).]

Hold the phone ...

It appears all I have to do is set my anchors, put nothing inside them, then apply display:block and set the size. I swear a tried this 10 minutes ago and it didn't work!

DIV.tour-nav A {

	display: block;

	float: left;

	width: 40px;

	height: 30px;

	margin: 0px;

	padding: 0px;

	}

DIV.tour-nav IMG {

	display: block;

	float: left;

	margin: 0px;

	padding: 0px;

	}

#jfk-tour-00 {

	background-image: url(nav_tour_home.gif);

	}

#jfk-tour-01 {

	background-image: url(nav_oswalds_apartment.gif);

	}

<DIV CLASS="tour-nav">



<A ID="jfk-tour-00" HREF="/attr/jfk/" ALT="Home: The JFK Assassination Tour"></A

><IMG SRC="/attr/tour_nav_arrow.gif" WIDTH="11" HEIGHT="15" BORDER="0"

><A ID="jfk-tour-01" HREF="/attr/jfk/01/" ALT="#1: The Oswalds' Apartment"></A>



</DIV>

The only problem is that I can't seem to get rid of that space around the arrow in IE6. Argh!



[This message has been edited by Wes (edited 12-09-2003).]

Yep, amking the <a> block level is the way a *lot* of effects are generally acheived.

=)

OK, after much tweaking, I think it's working properly.

Here's how it looks on the site. (I incorporated a couple extra tricks on the intro page to replace the "home" thumbnail with "Begin.")

Here's everything in one document so you can look at it.

Now, I'd like to include some functionality to detect which page it's on and highlight the current page's thumbnail. I'm sure I'll be asking some questions in this thread, which I just realized is in the wrong forum.

Thanks for the help!




[This message has been edited by Wes (edited 12-11-2003).]

Looks good.

The only thing I could complain about was not having the current icon highlighted, and you're already addressing that, so...

It looks nice. I'm just wondering about the spacing... how about another pixel or two on either side of the arrows, just to give them a little more breathing room? I can see the downside to that, though, since it would make the list (sorry, it's still a list in my mind) that much wider. Just a thought--not sure if it will actually work or not.


___________________________
Suho: www.liminality.org

Thanks for the feedback.

Unfortunately, I can't add anymore spacing because it's already squeezed in and I need the remaining few pixels for the "current" highlight I'm planning to add. I have, however, thought of sizing the thumbnails down just a bit, which would open up some room. I may give that shot ...

quote:

---

Now, I'd like to include some functionality to detect which page it's on and highlight the current page's thumbnail.

---

Well, if you're okay with Javascript, go with the solution Slime explained in the other thread. There is a pure CSS solution, although I'm not sure if it's worth the trouble...

First, you give every one of your thumbnails a unique ID, like so:

<img id="thumb1" .../>

<img id="thumb2" .../>

<img id="thumb3" .../>

...then, attach another ID to the <body> element that corresponds with the thumbnail you want highlighted on that particular page:

<body id="page1">

...then use CSS contextual selectors to apply whatever effect you want:

#page1 #thumb1,

#page2 #thumb2,

#page3 #thumb3

{...do something...}

ALA actually uses this method to highlight the appropriate button in the navigation bar, so that's where I got the idea. The Javascript solution may be simpler in your case, though.

Hmm ... I was going to use a technique I had used once before whereby I detected a substring of the URL, then I was going to switch the style. But I think I've left my templates flexible enough to stick something in the BODY tag unique to each page, so I might try that, thanks.