I'm using this CSS to postion a div horizontally and vertically to the window which works fine until you scroll down the page, then the div remains in the same centred position as if the page hadn't been scrolled.
width:600px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -300px;
z-index:99;
Can this be done using CSS?
That's because your position is absolute!
You should try using position: fixed; instead.
Take a look at:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed
position: fixed; might be what you're looking for.
Try the following CSS: position:fixed;
Related
I have a div that I have centered both vertically and horizontally:
#mydiv {
width:960px;
height:400px;
position:fixed;
margin-left:-480px;
margin-top:-200px;
top:50%;
left:50%;
}
When I am using the Smoothscroll.js library it won't work. If I remove the "position:fixed/position:absolute" it do, but then my div is no longer centered. Is it any whay I can achieve both smooth scroll and centering?
I found a solution to this problem by myself. I made a fake (invisible) div at the top of the screen that changes height after screen-size. Then I put my visible (#mydiv) under that without any css positioning.
#mydivfake {
width:1000px;
height: calc(50vh - 310px); /*310px is half of the height of my visible centered div*/
margin-left:-500px;
left:50%;
}
I want resize an image HTML with jQuery.
It's easy elt.css({height: '42px'}), but my problem is the magnification of the image is at the bottom, ie the top of the image does not move and it's the bottom that stretches or shortcut.
Like here : http://jsfiddle.net/763wumr0/
EDIT with absolute: http://jsfiddle.net/763wumr0/12/
I'd like to do it the other way! The bottom of the image is fixed and that's the top of the image that increases or decreases.
How can I do that?
thx.
With absolute positionning ?
http://jsfiddle.net/OxyDesign/pss3ysru/
CSS
.img-container{
width: 50px;
height: 50px;
position:relative;
}
.img-bottom
{
width: 50px;
height: 50px;
position:absolute;
bottom:0;
left:0;
}
I am using a formula method to center the image inside the div.
Here is the link: http://fiddle.jshell.net/bPM73/10/
I don't know what is wrong in the formula, that image is not getting centered.
I mean I want both vertically and horizontally
Please help.
you can made it only with css3 box-align property… working with all browsers (with prefix hack)
http://fiddle.jshell.net/bPM73/28/
#i4 {
display: block;
width:300px;
height:160px;
top:0px;
left: 0px;
right: 0px;
bottom: 0px;
position:absolute;
margin: auto;
}
Here is a trick. You can copy it into your fiddle and see it will works.
I have edited the js and added position:relative to your wrapper div. check this out http://fiddle.jshell.net/bPM73/24/
I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.
How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?
Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck
You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.
CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.