I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with
bottom: 0px
position: fixed
but using
margin: auto auto 0px auto or margin-left: auto
doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!
display: flex now makes this very easy! See below:
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.content {
background: grey;
}
<div class="footer">
<div class="content">My bottom-fixed content</div>
</div>
With this solution, there is no need to set a fixed width which can be more flexible.
You can use a left property of 50% and a negative left margin equal to half the width of the footer.
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
To center an element you need to specify width and set left and right margins to auto.
Then to stick such an element to the bottom of the page you need to wrap it in another element which has fixed width, say 100% and is positioned on the bottom. And yes, css you can.
<section style="position: fixed; bottom: 0px; width: 100%;">
<p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>
#myElemId {
width: 100px;
}
Note the fixed width; this is essential for margin: auto to work. If this doesn't solve it, then there must be a problem elsewhere.
Edit: You'll also need this (jQuery):
$("#myElemId").css({
left: window.innerWidth/2 - $(this).css("width")/2
});
This allows you to set the width to whatever you want without having to update the rest of the CSS code.
Related
I have a square image that I want to have centered on the screen. Problem is that I want the image to stay a square, while being not more than 80% of both the width and the height. I have used the following code, which makes my image 80% of the height (when height < width), and centers the image vertically, but not horizontally of course. When using a fixed width, I could have used margin-left: 50%; margin-right: 50%, but with relative size, this would set the left side of the image at 50%. Any ideas?
.my_img{
max-width: 80%;
max-height: 80%;
margin-left: 10%;
margin-top: 10%;
}
Try this:
.my_img_container {
position: relative;
}
.my_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is a fiddle:
http://jsfiddle.net/l0wskilled/voubtxrt/
if your image has display: block then you can probably use margin: auto auto and remove the % margins. If its display is inline or inline-block, you can use text-align: center on the parent element of the image to make it horizontally centered. I have not tested this code. If this doesn't work, and you have no problem with jQuery, this can be done with few lines of jQuery.
You could also try:
<div class="container">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" />
</div>
With the style:
.my_img {
max-width: 80%;
max-height: 80%;
margin-left: auto;
margin-right: auto;
display: block;
}
I think this is what you are wanting anyway, maybe i'm wrong!
https://jsfiddle.net/dLozvcmo/2/
I have a little problem with my responsive design. I am using a normal <footer> with this style.
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
It works fine and when I am using a smaller screen I have to scroll, that's normal.
The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.
I hope you understand what I mean.
Thanks!
Make Position fixed, This may look something like this
footer {
width: 100%;
height: 20px;
position: fixed;
bottom: 5px;
left: 0;
}
The idea is to position the element fixed to the bottom. Set the bottom offset with bottom or margin-bottom parameters.
You could go with this:
footer {
position:fixed;
height:20px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
I hope I get your problem correctly. Your problem is that the footer is at the middle of the screen when there is little content in that page, right?
To solve the problem, you should make the parent element take up the full screen. For example,
<head>
<style>
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
body {
min-height: 100%;
}
</style>
</head>
<body>
<div>
some other content
</div>
<footer>
Some content inside footer
</footer>
</body>
Or if you don't mind the footer is always visible at the bottom of the screen, use position:fixed . Then you don't need to consider the height of the parent element.
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I have a container div, within that div are other div's. In there I use jQuery .show() to show stuff.
#container {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-color: white;
height: 100%;
}
#content {
font-size: 15;
margin: 0 auto 0 auto;
width: 550px;
}
The content div grows longer than the container div, so the white background stops when I scroll down, leaving me with no white background there.
How can this be fixed?
http://jsfiddle.net/K6PAn/8/
I think this will be your answer, Adding padding to the top and bottom will always make the white shown.
Hope this helps, If it's not the correct answer, sorry! D:
Add an extra div at the end of the content with clear:both e.g.
<div style="clear:both"></div>
Dave
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}