I am just starting out making my first website.
What I am trying to do is put a chart over top of a picture. I have a tiled background image, and then I have another large image onto of the background. I want a chart to be put on top of the large image. In my CSS panel I have set the placement to where I want the chart to be (on top of the image), but when I change the position to "absolute" the chart just disappears. I think it might be behind my other picture? When I change the position to "relative" it goes where I want it to be, but of course I don't want it relative (moving with the window) I want it to be in the same place when the window changes.
I'm hoping there is a quick fix for this that I'm not aware of.
For absolute to work the element must be inside an element with its position set to relative, fixed, or absolute.
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute;top:100px;left:100px">
blah
</div>
</div>
edited to remove link. Just google "position absolute values"
Related
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
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I'm trying to add a Pin it button that appears on hover on images on my website, but the positioning is totally wrong.
Basically the button's position is calculated relative to the window, and it will always stay at the initial distance from top of the window.
You can see what is happening by entering here.
I've tried adding position relative to the images, but it won't help. My guess is that the problem comes from the fact that my pages are positioned absolute.
I need to have a page with a responsive layout that has the following elements (see picture):
Legend:
"folds" for the menu means that it just becomes a small button, which unfolds the menu again on click);
When the left menu folds, the content and canvas div need to slide to the left side of the page. When it unfolds, they get pushed to the right again;
The bottom menu 2 is folded by default (you can only see a button). If you click it, then the small menu opens (above the other elements);
The content div is scrollable;
The elements both in content and canvas should be selectable;
Right now I have the following code:
<div id="background">
<div id="menu></div>
<div id="content"></div>
<div id="canvas"></div>
<div>
The position of background is "relative", the menu and canvas are set as "fixed".
The problem right now is that something (background div) is covering all the other elements, so I can't select the elements inside the content div and the canvas div.
I tried setting z-index correctly (lowest for the background, highest for the canvas) – didn't work.
I don't understand what the problem is.
Can somebody help me, please? Maybe you can just tell me from scratch how I should arrange those elements in CSS, so that I get the arrangement I need?
Thank you!
It seems that you have forgotten to set the position attribute for the content div? z-index only works on elements with fixed, absolute or relative position. (the default is static position, so the z-index is not working)
No idea why the other elements are covered. Maybe posting the css as well would help.
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/