PDA

View Full Version : HTML: Putting images edge-to-edge


CookingWithGas
11-16-2005, 09:01 PM
I have several images I am trying to "glue" together to form what will appear to be a single image. But the page shows a gap between all the images, instead of putting them edge-to-edge seamlessly.

Is there a way to do this that is consistent with most major browsers?

ultrafilter
11-16-2005, 09:08 PM
Make a single image.

Omphaloskeptic
11-16-2005, 09:39 PM
What does your HTML look like, and what browsers are you using? This simple code<html><head></head><body><img src="1.jpg"><img src="2.jpg"></body></html>gave no spaces between the images for me (recent IE and Mozilla).

Make sure you don't include any whitespace (including CR/LF!) between your IMG tags. For example, this:<html><head></head><body><img src="1.jpg">
<img src="2.jpg"></body></html>will give a space between the two images (they're thought of as inline with text, separated by a space).

Alternately, you should be able to insert the images into a table, and set all borders and margins to zero; this will let you format the HTML more easily:<html><head>
<style>
table { border-collapse: collapse; }
td { border: 0px; padding: 0px; }
</style>
</head><body>
<table><tr>
<td><img src="pic1.jpg"></td>
<td><img src="pic1.jpg"></td>
</tr></table>
</body></html>

ZipperJJ
11-16-2005, 10:53 PM
If you go with Omphaloskeptic's table idea (which is what I would have suggested) be sure to format the table cells like s/he shows - the <td> and image tags on one line.

IE, and I think Firefox, will put space around images if they're not on one line with the cell tags. Not sure why, but they do.

Harmonious Discord
11-16-2005, 11:28 PM
You can also make one picture in a jpeg format that loads the pictures in blocks, and each block is in full resolution. Another jpeg format fills in the details over time. You see a blury image that resolves into a high definition image over time. It's not the question you asked, but a possible solution for loading a graphics image in an internet friendly manner. You don't have to worry about multiple files or locational errors leaving spaces between images used for one larger image.

Oswald Bastable
11-17-2005, 06:43 AM
If you go with Omphaloskeptic's table idea (which is what I would have suggested) be sure to format the table cells like s/he shows - the <td> and image tags on one line.

IE, and I think Firefox, will put space around images if they're not on one line with the cell tags. Not sure why, but they do.

I you use PhotoShop you could also use the slice tool and Save for web to generate the image slices and code. Other image manipulation software may also have a similar feature.

OB

CookingWithGas
11-17-2005, 09:54 AM
Make sure you don't include any whitespace (including CR/LF!) between your IMG tags.This appears to be the issue. I have line breaks to make the code more readable. I forgot about the inserted space.

The reason I am using multiple images is that some of the images have anchor tags to link to other pages. I guess I could do that with a map instead but I'm too lazy to learn how to do that. ;)

simster
11-17-2005, 01:48 PM
If you do a table.. be sure to set the cellpadding, cellspacing and border attributes to 0 (zero)...

Also, there are hspace and vspace attributes for the image tags that control some amount of whitespace around the images... set them to 0 as well.

and of course, the stylesheet idea from above would also do the trick.