I am attempting to create a custom world map using an image where you can click on a button that is over a "continent". This is an ionic app and is expected to be launched on both mobile and desktop. The only real answer i can find to fixing this problem is using CSS with position: absolute; and then setting the pixels (ex: top: 50px; left: 30px;). I am worried that the buttons will not stay in the correct position when it is viewed on different web browsers and when used via a mobile device. Is there a way that i can make sure that the buttons stay in the desired position no matter what, or is the only way to do it is through CSS positioning and px manipulation? attached is the photo of the world map (some parts cut out: https://imgur.com/a/yzPRVh1 ) i am trying to implement this on. I want to have a clickable element on top of each continent and centered. Thank you!
You can place a div over the picture and use percentages over pixels but it will still need to be adjusted with #media-queries.
Related
I’m currently trying to wrap my head around solving this layout with Ionic and CSS:
This is the result I achieve even after spending quite some time with it:
I've recreated the basic setup on the home page: here
The layout consists of a navbar, a fullscreen image and text-content below that. The gradient is constructed using a ::after attribute in CSS as I don't want to hard embedd the gradient in the image file with Photoshop and the likes. I had to construct the fullscreen image using a ‚position:absolute‘ attribute:
.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }
because for reasons beyond my knowledge, not using ‚position:absolute’ results in the image not being displayed in fullscreen but being 2 or 3 pixels smaller than the total width and thus leaving a slim border of background color around the image:
Once I do use the ‚position:absolute’ attribute however my layout becomes a complete mess because the text content is being placed all over the image content.
This is where I'm struggling to come up with a solution that tidly places the text content below the fullscreen image. Using padding is, to my understanding, not possible as quick fix as I need the layout to be independent from the image content:
if I use padding based on the height of portrait sized images, the content gets too much offset when for landscape sized images and vice versa. I could try to target landscape and portrait images using different .css classes for each and setting and matching padding, I do however feel that using padding is not the best solution.
Can someone point me to my error or a robust, content-independent solution here that keeps Image and text content tidly in order while maintaining the layout?
According to your example, the border around the image is happening because of the padding attribute in the ion-content tag, here:
If you remove that padding the image will have no space around.
By the way, the position:absolute; did the trick, because it makes the image get out of the page flow, and so, it acted as a child of the body, which doesn't have any padding/margin around.
Edited
Also, you need to remove the position:absolute from your image and add padding:0; to the tag above it, as it is adding a little space around from padding.
And from what I understood, the image and text will behave as you wished.
I am trying to do this fun resume site and am stuck with the backgrounds itself. I have 3 backgrounds in all: a picture with a mountain and some sky, another picture with just the mountain cut out, and a nice little Easter egg hidden in between. I made the front and back layers scroll-able, and the middle one fixed, so the little dickbutt hides behind the mountain when the user scrolls down.
But the problem is, the dickbutt image is somehow not positioned properly even if I manually positioned it in Photoshop before saving it as an image. So I used the background-position tool to set it right, and it's all right now, except, it is so just for that specific browser size. In the mobile view, not only is the background not centered on the mountain peak, but the dickbutt is way off with respect to position.
TL;DR: I want to position one of my multiple backgrounds with respect to one of the other backgrounds, but instead it is getting positioned with respect to the viewport. What should I do?
Here's my code: (github link)
I want the page to look like this:
There is no way to position of images with respect to other background . but you can achieved your task with multiple div having multiple background and arrange them using position absolute and z-index
I am trying to create a virtual gallery that dynamically generates an image (or set of images) based on what artwork is being shown and how large it is. I am having trouble keeping the image positions absolute when scaling the image size in my browser. That is, the images will scale unevenly when the browser display height changes. See the CodePen below for what I mean.
Does anyone have suggestions as to how to fix this? I noticed that Fine Art Multiple (click the link, then the View in Room button) seems to auto-generate their image using either a custom function or a 3rd party program. Does anyone know how I could viably do this, if what I want isn't possible in CSS?
Fine Art Multiple`s virtual gallery:
https://fineartmultiple.com/buy-art/alex-katz-reclining-figure/
FAM's example gallery works because it's not as responsive as yours. As you noted, it's a generated image that is positioned in the center.
Instead of using percentages I set some fixed widths for you and also moved the room image into a background property instead of having it as an additional img element.
I also made sure the person's silhouette disappears on small screens by shifting to the left and off-screen just like in the example.
Most of this positioning is reliant on a left margin combined with transform:
margin-left: 50%;
transform: translate(-50%,0);
This technique can be used to perfectly center and offset any element.
http://codepen.io/anon/pen/RKpver?editors=0100
I'm currently stuck on a problem I can't fix on my own.
I've cut a image into different layers I want to overlay on a website. Basically you can enable and disable various layers.
An example would be this:
Image of a tree without leaves
Actual leaves of the tree
Now there is a checkbox and when you click on it it'll either enable or disable the leaves.
Now I have some options to position those elements via css:
Make all images the same size and fill smaller ones with transparency. Something like this: http://i.imgur.com/GRd4eaI.png
Crop those large images into smaller ones. Here I don't know how to position them via css properly so they'll resize with the other pictures.
Create a canvas and draw the image onto it, then display that canvas.
I've currently implemented this and it works like I want. Problem though is that it'll lag when using the phone (Only renders part of the image till it finally finish after ~20 seconds to display the image properly)
I guess that would be the proper way to go but my problem here is that I don't know how to set the size of the overlaying smaller images.
Html Code:
<div class="container">
<img style="top:0%; left:0%;" src="img.png" />
<img style="top:69.56%; left:26.16%;" src="smallImage.png" />
<img src="images/null.png" id="last">
</div>
And the css code to that:
#container {
position: relative;
}
#container img:not(#last) {
position: absolute;
width: 100%;
height: 100%;
}
The null image is just there that overlaying other images work with that method.
The problem I have here is now that the smaller image will be positioned correctly but it wont shrink down to the proper size inside the div: http://i.imgur.com/4EgGIAl.png
I don't think that this would be the proper way, or easy way to do it. But I guess I'll use this then when I need to.
Also I think it's good to say that I'm working with image maps and areas. So perhaps that'll make it a bit more difficult to use then.
It would be very great if you could help me here, thanks :)
I created this image gallery that an image is revealed on hovering but the revealed image is in a different place in every computer/browser i open it in but for the life of me I can't figure out why.
I just want the revealed image to appear in the middle without being on top of other images but when i get it to that setting on one computer it looks different on another.
I'm new to coding so I really hope someone helps. Here's the link to my codepen: image gallery
[1]: http://codepen.io/zenturtle/pen/ezDGC
For consistent placement, you need to give the #perimeter div position: relative, so that the positioning of the large images will always be in relation to the containing div, which has a fixed width. Otherwise, the positioning is in relation to the browser/viewport, meaning that it will be different depending on the size/width of the browser.
#perimeter {position: relative;}
You will probably have to adjust all of the large image coordinates now. There are more efficient ways to do this, though. You should be able to place all of those images with one CSS rule, rather than separate ones for each image.