I have a Flash page that is a bit off center on smaller resolution screens. If the site was centered, and the sides were cut off, then all would be well. But the site starts in the top-left corner, so some content is clipped. I know the problem can be solved in JavaScript, but I'm wondering if there is a more elegant, possibly CSS-way, to solve the problem.
Thank you
horizontally centering a div using css - something like this:
.content {
width: 960px;
margin: 0 auto;
}
that's it.
if you want to center you content:
.content {
width: 800px;
height: 600px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Related
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I am working on a lightbox for ios devices that should have these features:
+ fit into the screen
+ center both horizontally and vertically
+ maintain an aspect ratio of the background image
+ display information above the background image
+ I would love to have a CSS only solution
+ Should work on iOS, ne IE support necessary :-)
I have a pretty elegant solution, but the (red) div behaves somewhat differently than the image. Just play with the window size and see for yourself.
This centers the image and make it scale down. The same code doesn't work for the DIV because it has no inherent maximum dimensions like IMG.
.lb-bg {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
max-height: 100%;
max-width: 100%;
margin: auto;
}
Here is a DEMO
'http://jsfiddle.net/nL4M5/'
Can anyone come up with a solution?
Thank you
After a good nights sleep I finally found a suitable solution.
It uses vw and vh units, which should work in all major browesers including ie9+.
.lb { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
width: 95vw;
height: 98.99vw;
max-width: 91.17vh;
max-height: 95vh;
}
http://jsfiddle.net/YnwD5/
I will like to get help please with building a responsive design.
The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.
Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top.
So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.
How can I make the elements to go up and shrink the space from top when window resize please?
http://jsfiddle.net/QV6DR/
.container {
width: 100%;
height: 1000px;
position: relative;
background: #eee;
}
.container div {
height: 0;
position: absolute;
background: #ccc;
}
.elm1 {
width: 20%;
padding-bottom: 20%;
top: 20%;
left: 5%;
}
.elm2 {
width: 30%;
padding-bottom: 30%;
top: 40%;
right: 10%;
}
Because your container has a height of 1000px and your elements are positioned 20% relative to the top of the container(which is always 200px), they wouldn't be able to shift up when the browser window is resized.
If you change the container styles to the following:
.container {
width: 100%;
height: 100%;
position: absolute;
background: #eee;
}
The elements will shift up when your browser window is resized vertically.
I believe the only way to shift them up vertically without resizing the window vertically, would be by using media queries and modifying the top: 40%; styles on your elements.
Here's the fiddle without media queries.
I've just noticed and I should have realized but continuing on, If I zoom in on my website everything is screwed up. I'm not entirely understanding how to get it to center and not move objects around.
Example
Zoomed in
http://gyazo.com/d868f6ebb249c8aa0b4a20e8cba24e86
I'm looking for it to stay centered no matter what you do.
Simple answer: wrap your whole site in a container <div> and give it the id "site-container"
Then add this to your CSS
Fluid width:
#site-container
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
Fixed width:
#site-container
{
width: 900px;
position: relative;
left: 50%;
margin-left: -450px; /* -(width/2) */
}
Obviously adjust the sizes as necessary
Or with
margin: auto;
I made you a JSfiddle
http://jsfiddle.net/9Mqza/
I have been struggling with this for quite some time now and I'm in need of some help. I would like to get the same affect as this website where an image floats next to the wrapper id but when resizing the page the image stays in place.
http://pack155.com/
Just look at the code there:
#page is the wrapper of the image #bear
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#bear {
position: absolute;
right: 3px;
top: 250px;
}