I have simple login box, which is centered to the middle of page (vertical and horizontaly).
Here you can find DEMO for it:
http://encodable.com/uploaddemo/files/login.html
Problem is that everytime I resize browser window manually the content of div (#login-logout-box) is being resized, if someone is trying to view this login form in browser window, which height is lower then 380px, it should add scrollbars to the page. But atm instead of that box is just cutten off. Means that under low resolution this form is partically shown without ability to scroll :S (tryed several phones - Iphone and Android 2.3)
But again I don't want that div to be scrollable but whole page.
I've checked www and stackoverflow for possible answer, but nothing at all, also I'm sorry if question is unclear, I've tryed my best to describe it.
Your code should not be working in any browser at all. As per the W3C Spec, "Boxes with fixed position that are larger than the page area are clipped."
Simply change position: fixed; to position: absolute;
#login-loguout-box {
width: 380px;
height: 380px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -190px;
margin-top: -190px;
margin-bottom: 20px;
border: 2px solid #cacaca;
}
Working Code
Full Screen Demo
Use the overflow setting in css, e.g.
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
Related
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
I'm currently having issues with some CSS/HTML code.
http://codepen.io/anon/pen/bgHGn
I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.
I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?
I'm not sure if that makes any sense or is even possible.
Thanks!
you want to set the text-alignment property to center
.largeheader{
position: fixed;
margin: 0 auto;
font-size: 100px;
z-index:2;
text-align: center;
top: 50%;
left: 50%;
}
The core issue being this isn't exactly in the center of the page,so as #RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.
See the CSS code for the solution:
http://codepen.io/anon/pen/GqeBa
.largeheader {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
margin: -50px 0 0 -112px;
font-size: 100px;
z-index: 2;
}
Fixed positioning allows the element to stay put while you scroll the page.
To get the large header horizontally centered you can use text-align: center; as #metsales suggested.
In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.
You'll end up with something like this:
.largeheader {
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 0px;
}
To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.
I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.