I have a div (the green one) positioned in the middle of the window but I want that when I resize the window, this div ALWAYS respect a margin (the height of the logo and the footer).
I really don't get it. Could anyone have a look at it? The proyect is this one: http://sfrpsicologia.com/inicio.html
Thanks for everything
give ol & li width using %
Related
I'm looking for some help with the position of my nav. I'm using the jquery.pin.js script to make it sticked within a container. That works.
But I would like to attribute a top at 50% of the windows when scrolling on the container and not just a padding value. Something like that :
top:50%;margin-top:-40px;//half of nav height
A basic Fiddle here without top value : http://jsfiddle.net/vdqfvqh5/
An image of the nav behavior if it's helped : link (to dropbox)
Thanks a lot for helping !
Is it possible to (temporarily) hide the main window (vertical) scrollbar (the one on body/html) without (slightly) moving centered content?
Setting overflow: hidden on body, html hides the scrollbar but the centered content is moved half of the scrollbars width to the right when doing this. I could add padding-right: <width-of-scrollbar> but that varies, and also would move the content if there is no scrollbar to begin with.
You could position the centered piece relatively (left: 50%) and use javascript to set the position fixed in pixels afterwards. In jQuery:
$(".centered").offset({left : $(".centered").offset().left});
See it in action here: http://jsfiddle.net/willemvb/jP3PK/4/
I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.
I want a DIV element fixed but relative to a parent DIV for as the screen resized that fixed DIV will move as the parents moved/resized so when you scroll down the page it will stick to that position. As i know when use position fixed on css, it will be relatively fixed to the entire screen, so the position of that fixed div will be relative to the size of your screen. What i want is that to stick or let the DIV stay to that location of the screen even if you scroll the page but its position will be relative to its parent DIV container. Is there any way to do that on CSS/Javascript/jquery?
Note: The effect should be like position:fixed where the DIV wont move when you scroll the page.
Any answer is greatly appreciated.
You may use position: absolute. You should nest the div inside a parent div. Assign top: 0, left: 0.
Here is the demo.
and if you want the div fixed in a location, Here is the demo.
Hope this helps
I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.
Whatever comes after should be positioned below the tallest of the first two divs.
How can I do this?
The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/
edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/
Thanks to both #Christopher Smithson and #gmebeh whose answers helped me to get to this solution.
Here's a fiddle to consider for your solution.
http://jsfiddle.net/f2Muj/5/
With percentage-based width's you can make this happen:
jsFiddle
#d1 is 5% from the left, center-aligned content
#d2 is centered relative to the browser window, and will never overlap #d1
Both use fixed heights to accomodate fixed amounts of content
Play around with the percentages to get the exact width you you want.