Frustrated that I still can't grasp certain CSS concepts but anyway, here's the problem:
I want to center a LINE of TEXT at the bottom of my site (basic index.html splash page). I also want the text to float 10-20 pixels at the footer based on various monitor resolution so that it's always at the bottom.
What options do I need to tick off within the "Positioning" Style Sheet Properties? Relative? Fixed? Absolute?
So far my settings are "Relative" with 600px at the Top, and 200px at the Bottom. But it looks great on a 13" monitor and it goes right in the middle of the page on a 27" monitor, for example.
Just want to center the damn thing at the bottom with a little breathing space before the status bar in a browse - independent of monitor size.
Use position: fixed to stick the footer to the bottom of the window. I've drawn up a quick demo here.
The CSS:
div#footer {
position: fixed;
background: red;
text-align: center;
padding-bottom: 20px;
bottom: 0;
left: 0;
right: 0;
}
The red background can obviously be removed, and the padding-bottom can be changed to your requirements.
The bottom: 0, left: 0 and right: 0 properties force the footer to the bottom of the page, and stretch it all the way across.
To make a a footer that doesn't stretch all the way across, try this JSFiddle out instead. It uses an inner element and automatic left and right margins.
Related
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I found some great help on this site that helped me tile an image on either side of my fixed header. One issue I am having is the scroll bar on the right is being covered by the tiled image and becoming inaccessible. I am sure it is something simple but I am at a loss at the moment. You can view an example here: http://www.jzandecki.com/example
You'll need to rebuild your header from scratch. First of all create a div (this will be your header container), name it with id let's say "header". Add as a background your tiled black image. The position of that div should be FIXED and not ABSOLUTE.
position: fixed;
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent;
background-repeat: repeat-x;
height: 178px;
width: 100%;
In your header div add another div having for width size the width of your power plant image. Set the css of this div to margin: auto (to center it in the screen).
margin: auto;
This should do the job.
If this works you should have the same view you had before but your scroll bar will be on top of your header and not hidden.
Edit:
By the way I saw your body is 900 px and sticks on the left of the screen. I recommend you to have the following attribute for your body:
margin: 0;
padding: 0;
The body should occupy the whole page.
If you want a 900 px wrapper block for your content add a div AFTER your header div (described above). This new div should have the following css attributes:
width: 900px;
margin: auto; //this centers your div in the middle of your screen
//Other styles that have nothing to do with positioning
Good luck.
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.