How do I place an object in css to move in relation to the size of the window browser?
I tried the following types of positioning: Fixed, Absolute, and Relative. The problem I have with these are that when ever I change the size of the window browser, it stays in the same exact spot and does not move with the browser size.
Thanks in advance for the help!
You must be defining top, bottom, left, right using px, so you need to use % instead
Demo
<div class="hello">
Whatever
<div>
.hello {
position: absolute;
top: 50%;
left: 50%;
}
Make sure if you are using absolute position, than wrap it inside a relative positioned container, so that it doesn't flow out in the wild
Without any information I'm going to assume your using pixels as your top and left? What you may want to try is:
.my-class {
position: absolute;
top: 20%;
left: 20%;
}
You can also position based on specific sizes using #media queries in css
Related
I'm trying to position the anchor 'Link' in the centre of the red section of the image at all times (all breakpoints). Here I have set the position: absolute; and adjusted it to be perfect.
However if I was add more text to the 'paragraph section' or adjust the current breakpoint, the position of this link would move. I put all my code on CodePen here:
https://codepen.io/anon/pen/PrVQgm?editors=1100
Hard positioning as below;
.hero-hub-image .btn-tertiary {
left: 175px;
top: 120px; }
If you are trying position element on fluid background image you have to use fluid units, so try use calc() function with %units to best fit your elements, e.g.
left: calc(15% + 100px);
I have a banner-image, on that image I've placed a link. This page is not getting aligned properly when I zoom-in or zoom-out the browser window or when I resize it.
The link is not getting aligned properly with respect to the image as it was showing in the default view(100% zoom ).
How to make this link responsive? I want the Read More button to be aligned exactly below the text Driving Value creation with ..... text, and the Read More link to be responsive with respect to the image on which it is present. How can I do that?
Here's my JSFiddle
<p class="homeImageLink">
<span>Read More</span>
</p>
Please help.
I am not sure this will work, but I think it would:
.image_container span
{
margin-left:-100px;
}
DEMO
DEMO1
You need to tweak your css so that the positioning is a bit more clear, I've fixed it somewhat here.
The important parts are here:
.image_container {
position: relative;
}
.homeImageLink {
position: absolute;
bottom: 10%;
right: 3%;
}
On the container, position: relative; means that any internal positioning will work from this container. Any positioning apart from static would do here and it's important no intermediate elements in the tree have position set or it will work from that element instead.
The the link container itself is position: absolute; with % values used to keep it proportional to the size of the container. Note also that right is used instead of left so the element appears relative to the right of the container. Now it will never go off the right hand side of the image.
To make this clearer I've removed all the other css from the example and as you can see it still demonstrates the effect you desire.
I have currently having issues keeping my div in the same place when the window is resized. In the example, it is .add div. The issue I am having is that it is going above the view region of the page, and I can't scroll to that portion of the page so I can't even see that when I resize.
Here is the code.
http://jsbin.com/kazizeruxi/1/
This is the part that I have tried dealing with
<div class = "add" align = "center">
<!--Everything inbetween -->
</div>
Ideally I am trying to keep the entry (in the farthest up left) to stay in the upper left no matter how it is resized.
I have tried messing around with media queries, but to no avail. It just turned out to be very inefficient with different browser sizes.
Any suggestions?
Just give them a absolute position.
.add {
position: absolute;
}
The proper way to do that is to give your element the position : fixed then it will have a fixed position from the root element or the body not the parent.
let us say you want it to be centered on the screen you can use this
.add{
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0)
}
of if you have a fixed with and height you can use margin instead of transform
.add{
position: fixed;
top: 50%;
left: 50%;
margin: -50% 0 0 -50%
}
if you give it an position: absolute and the parent has a position: relaive then it will move with the parent element on resize
I'm trying to make a website and as I'm making it I test it out on two monitors: my 1366 x 768 laptop and a 1080p monitor hooked up to it. I am trying to align a div tag to always stay in the same place and I am using this:
nav{
position:absolute;
left: 40%;
top: 60%
}
However this does not seem to get the job done. It works fine on one monitor but not the other. I would have assumed that if I use percentages instead of pixels then it would work. Any advice on whats going wrong here would be very appreciated.
With using position:absolute; all fixed elements will be based on the <html>.
This means that it will left of 40% of whatever monitor you are using. A larger width and its position will change.
To fix this, you will need a parent container with position: relative.
Now anything with position:absolute inside of the parent element with pos:rel will be relative to this element and the parent will still follow the documents flow.
In short:
//html
<body>
<element>
<nav>
</nav>
</element>
</body>
//css
element {
position:reletive;
}
nav{
position:absolute;
left: 40%;
top: 60%
}
Your div has class = nav or id = nav? In that case, prefix nav in your css with . in case of class and # incase of id.
And if you want div to be exactly at the same place with respect to your browser's top and left, switch back to px
% will be relative to your browser size.
I assume you're trying to position an element relative to the browser window (which is what I assume you want to do when you're talking about monitor size. i.e. browser in full-screen.
In that case you'll want to use
nav{
position:fixed;
left: 40%;
top:60%;
}
This breaks the element out of the normal rules of flow and moves it relative to the viewport.
I'm not aware of any CSS rule that target the window position relative to OS desktop space.
I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.