Three images below each other WITHOUT little white boarder line possible?

[+Team On]

Hi guys, this is a rather technical question. In my listing, I would like to have 3 images below each other. https://www.geocaching.com/geocache/GC7HJAM_money-money-money

In this listing, there is orange, blue, green below each other, but unfortunately there is a little white line between them. How can I get rid of this with HTML? There should not be any space, white line, black line etc. between.

Thanks for any ideas!

Edited March 4, 2018 by Team On

[+Mudfrog]

Does there have to be three separate colored images? If not, can you create one image with all three colors and upload it to the page?

[+Team On]

No, not possible in one image. The three images are just an example. A solution within the editable html of the listing would be best.

 

[+Team On]

one workaround I thought about was creating a table with only one column and invisible border, so the result would look like there is no table. But I do not know if that is possible.

[+arisoft]

This is one way to fine tune your image positions:

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRp8iHH5qhW4LBsHzxE8U9i-WEO7CK7BFEXFPqw2GkivuxZLqti" /><br />
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG" style="position:relative;top:-20px;" /><br />
<img src="https://image.slidesharecdn.com/masqueofthereddeathsymbolismpresentation-140723140437-phpapp02/95/masque-of-the-red-death-color-symbolism-3-638.jpg" style="position:relative;top:-40px;" />

Actually this makes those images to overlap so there is nothing between them.

[+Team On]

Awesome!!! You accidently even solved another question I was thinking about! I wanted to put a Gif animation with transparency in some places over a background jpg. Now I was able to partly put a Gif animation with transparent background in front of the blue jpg. I could surely manually play with the -20px  and the width and length values until Gif and jpg are 100% over each other, but is there also some easy automatic command for that?

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRp8iHH5qhW4LBsHzxE8U9i-WEO7CK7BFEXFPqw2GkivuxZLqti" /><br />
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG" style="position:relative;top:-20px;" /><br />
<img src="https://s14.postimg.org/o61el2wup/qm400turn.gif" style="position:relative;top:-200px;" />

[+arisoft]

Here are some more complicated examples.   https://coord.info/GC46BX5

Watch the geochecker banner for a minute here you can see an example of animated transparent gif over png. More transparent images are placed over the main image.

To get things synchronized correctly you can make a zero height DIV to move anything where you want without messing rendering of other parts at all.

<div style="position:relative;top:-52px;left:547px;height:0px;">

 

Edited March 5, 2018 by arisoft

[+Team On]

Thanks arisoft! I take it if I try to have a nice background png with an animation Gif over it it well be displayed correctly in the common browsers?

[+arisoft]

2 hours ago, Team On said:

Thanks arisoft! I take it if I try to have a nice background png with an animation Gif over it it well be displayed correctly in the common browsers?

I have noticed no problems.This is a very basic CSS function and should be pixel perfect adjustment. It works also with mobile browsers.

[+thebruce0]

Yeah here are a couple things to know...

The images are much larger than the width of the listing, so the website shrinks them and assumes you want to be able to click and zoom to the larger size - that's why there's the magnifying glass and the spacing.

* If you don't care about the zoom option (it's not all that necessary unless someone has to be finding really really small details in an image and isn't sure how to view and zoom in on web page or embedded image) then:

1. You can add width="100%" to the img tag (ie: <img src="..." width="100%" /> ) and that will shrink the image to the listing width before the code makes it a magnifier

2. You can add style="display:block;" to the img tag (ie: <img src="..." style="display:block;" /> ) to get rid of any extra spacing there may be around or below the image. This will put the image on its own line though, nothing to the left or right, without additional coding.

Basically for 3 full width images fitting snug vertically in the listing which adapts to whatever is showing the description, I'd go with both 1 and 2:

<img src="..." width="100%" style="display:block;" />

Quickest and easiest way to accomplish what (it sounds like) you're looking for.  Using CSS positioning by pixels could get problematic depending on users' browsers an what default style or accessibility settings they may have.

You can play with simplified positioning and widths using tables and css floats and other relatively basic html markup. But the above I think would be sufficient to get around Groundspeak's html sanitizing.

Edited March 5, 2018 by thebruce0

[+Viajero Perdido]

If you make the images 670 pixels wide, they'll fit perfectly into the fixed width Groundspeak provides, and you won't get the magnifier.  Nothing special needed in the HTML for that; I typically go p img /p, and that's enough.

[+thebruce0]

You won't get the magnifier, but there's a vpsace padding below the image (margin and padding to 0 doesn't remove it) for a standard img tag on the site. 3 stacked images won't be snug.  Using the display:block option above fixes that.

[+Team On]

ok, I will look into it, if worse comes to worse I just downscale both picture to 670 px width.

This one puts a rotating ? animation over a orange fruit background http://playground.e-smog.org/gimpforum/gif-bg.html ,unfortunately when the html is pasted into a gc listing, the background image is not visible anymore. https://www.geocaching.com/geocache/GC7HJAM_money-money-money

[+arisoft]

This works when I tested in my own cache.

<div style="height:400px;width:400px;background-color:#808000;background-repeat:no-repeat;background-image:url(https://www.thenational.ae/image/policy:1.692075:1514817351/lf-key-ingredient.jpg);"><img src="https://s14.postimg.org/o61el2wup/qm400turn.gif" /></div>

 

[+thebruce0]

2 hours ago, arisoft said:

This works when I tested in my own cache.

Ya, I was trying to keep the complex coding to a minimum for a basic and flexible display

Listing width, any height, no outer padding, no magnifying glass:

<img src="url" width="100%" style="display:block;"/> 

Done!

Edited March 6, 2018 by thebruce0

[+Team On]

Haha, it is even possible to put rotating question marks at a delicate position.

https://www.geocaching.com/geocache/GC7HJAM_money-money-money

Only thing is, the text in the listing body gets moved downwards.

[+arisoft]

50 minutes ago, Team On said:

Haha, it is even possible to put rotating question marks at a delicate position.

https://www.geocaching.com/geocache/GC7HJAM_money-money-money

Only thing is, the text in the listing body gets moved downwards.

You have to put it inside a zero height DIV to render other parts without that effect.

[+thebruce0]

Yep, I made use of some 'creative' css to have this listing..um.. think outside the box.  Problem is the more HTML markup you add to a listing the harder it'll be to read on non-html native or advanced devices/readers.

[+Team On]

Yeah, I agree. I was playing around and noticed, that the question mark rotating inside the attributes next to the <1 km attribute gets moved downwards its box when zooming into the whole screen. https://www.geocaching.com/geocache/GC7HJAM_money-money-money

1.It would be cool if it stayed inside the box no matter what, at least in windows on a computer, but I guess there is nothing I can do about it? 

2. This is the "code" for it. 

<div style="position:relative;top:-4217px;;left:835px;"><img width="27" height="26" src="https://s14.postimg.org/o61el2wup/qm400turn.gif" /></div></span>

It is apparently as it says "relative" to its position in the text near the geochecker. If there was no -4217px;;left:835px , it would appear near the geochecker. However, if later I put in new stuff anywhere above the geochecker and everything gets moved down, the rotating qm will be way down of that little attribute box as well. Therefore instead of relative to the position in the html, I would prefer it being "absolute and independent" to the whole html. Of course just starting the html part with it (instead of inserting at the end behind the geochcker) would be the apparent work around to acoid it being affected by later editing, but I am just curious if an independent from the html solution, maybe just depending on the maximum top of the screen would also be possible (Jesus, I make it sound really complicated, I don't know how to describe better, hope it is understandable).

 

Edited March 14, 2018 by Team On

[+thebruce0]

Yes, unfortunately the santizing of the description HTML removes the position:absolute CSS option, so elements can only be positioned relative to the description container, which means shifting with everything that shifts with the top of the description box element.

It's already a risk anyway, since designing the html that way makes its reception very limited - devices that don't display more advanced html or styling may have difficulty with it. It's not the best style of puzzling or cache listing design; it's really just more of a gimmick than anything, which takes advantage of an aesthetic loophole in the allowance of HTML and some CSS in the cache listing.

[+Team On]

Ok, thanks for explaining. I have a feeling some reviewers might not be happy to see people messing with the display outside the description box, so I have decided to not use it heavily.

[+Team On]

In the listing it works good to offset an images with 

style="position:relative;top:-190px;;left:223px;">

, however in geocheck.org it is disabled? Was trying with the usual pc browsers. It just displayed the offseted image below the other image, like Cgeo would with a listing.