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/
Related
I have a page I have 3 separate DIV's aligned, one right, center, then left. Which looks perfect when the page is at default size, however on smaller re-sizes they all 3 could rest on top of one another, which makes them unreadable.
My current CSS, all the same except the right value.
.Cat_One {
margin-left: 2%;
position:fixed;
left: 170px;
min-width: 20%;
max-width: 20%;
max-height: 350px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
}
My body CSS
body {
width: 100%;
min-height: 690px;
min-width: 1275px;
margin-left: -0px;
overflow-x: scroll;
overflow-x: scroll;
}
I just need to figure out a way to stop them from overlapping on resize. Tried many of the similar posts and doesn't seem my case is the same and the suggestions there don't exactly work out.. Perhaps I missed something.
Without more code, my best guess is the issue is with your position:fixed. Dump that. Depending on what you are looking to do, you can do display:inline-block; or use flexbox, or float:left; or if this is tabular data you could even use a table.
Position fixed though, I would put money on that not being what you want.
I had the same issue (Kinda). What i did was add this into the css:
top: 0px;
Right: 0px;
Position: Absolute;
This will make the div lock to the upper right corner of the page, and then use:
Transform: Translate(XXvw, XXvh);
The transform is used to relocate objects to where you want it ^^
You must also specify this in the css for html,body else it won't work:
Min-height: 100vh;
Min-width: 100vw; (100% of the viewport/browser window).
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.
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I'm using the RefineSlide responsive slideshow and I can't center it, it always sticks to the left of my page.
#slideshow{
position: relative;
width: 960px;
height:auto;
left: 50%;
margin-left: -480px;
}
I've tried adding the above to my CSS, and although this successfully centers it, it's unfortunately no longer responsive as when I test on the iPhone the slideshow doesn't fit to the screen.
#slideshow{
position: relative;
width: 100%;
height:auto;
}
When I style it like this, it is responsive... but sticks to the left. What do I need to change with this CSS to center it and keep it responsive?
It somewhat depends on your other markup, but in general this is enough:
#slideshow {
margin: auto;
width: Npx;
/* also display: block if the element doesn't already have it */
}
Sample.
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;
}