I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.
Related
I have been trying to set a text to center of a screen. so i placed a div with some text inside the body directly with some text and added height to it as 50% and margin-top as 50%. I thought it would hold the div's top position always at 50%. But i am wrong.
HTML:
<div id="test">test.. !</div>
CSS:
html, body {
width:100%;
height:100%;
margin:0;
}
div {
margin-top:50%;
text-align:center;
width:100%;
height:50%;
}
Do you have any ideas on why it is misbehaving? Please do not suggest any new ideas. I know other ideas for centering it. But I wonder why this snippet is not working.
DEMO
This is primarily a question of "50% in relation to what?"
Setting the height of the div to 50% makes the height 50% of its container, in this case the body element.
Setting the margin-top to 50% then puts a top margin to half the width of the div.
Please see this question on SO for clarification: Why are margin/padding percentages in CSS always calculated against width?
Additionally, the top margin is applied between the parent and the top edge of the div, not the vertical centre.
All these factors play a role in the resulting div not being centered in its container.
Try This
html, body {
width:100%;
height:100%;
margin:0;
}
div {
width:100%;
height:50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align:center;
border:1px solid black;
}
DEMO-JSFiddle
The code I'm working on is in http://jsfiddle.net/truxx/v8jnyn9h/
I would like to make everything that is in the header tag fixed (that it does not move when i scroll the site).
I found out that a code like:
div#header{
position:fixed;
}
does that, but it sends the header to the left, and I want it centered.
If I type
div#header{
margin:auto;
position:fixed;
}
the margin doesn't work at all... how should I correct this?
(I would also like to add a bar in the right of the page, that does not move either while i scroll down. Made an experiment, but something similar happened. The elements of that div box did get a fixed position, but they moved to the left, so i'm guessing it's the same problem).
Your header (which isn't in your fiddle or your question) will need a width, and top:0;
div#header {
position: fixed;
top: 0px;
margin: auto;
width:100%; /*or whatever width you want */
}
This should work for the css:
div#header {
position: fixed;
top: 0px;
margin: auto;
//AND A WIDTH PROPERTY (in pixels, percent, or em) LIKE:
margin: 100%;
}
You need to fix it to the top, as well as margin: auto to center. I couldn't find the header element in your code in the link provided, but if you code the rest correctly, that should work.
I am trying to put a gray bar on the bottom of the screen of my webpage, regardless of the resolution. However, when I try, it seems to just go up or down when I go in a different resolution. Is there any way to fix this?
Also, the bar is made out of CSS using the div id tag.
/* HTML*/
<div id="info">Scroll for info</div>
/* CSS */
<style>
#info {
height: 40px;
position: relative;
margin-top: 25%;
background-color: #393838;
opacity:
}
</style>
EDIT: I want it to be on the bottom of the screen, but then when I scroll down it goes up towards the top of my screen.
If you want it on the bottom and always at the bottom, you have to use position: fixed.
You could try this:
#info {
height: 40px;
position: fixed;
bottom:0%;
width:100%;
background-color: #393838;
opacity: 1;
}
http://jsfiddle.net/rX4nd/1/
How about adding entering as well?
.someDiv {
position:fixed;
width:50%;
height:300px;
margin-left:-25%;
background:#063;
bottom:0px;
left:50%;
}
Here is some Documentation that should help you with what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
Tl;dr, set "position: fixed" to place it at the bottom of the rendered part of the parent.
I have this very simple footer :
.footer{
width:100%;
background-color:#333;
height:100px;
position: absolute;
bottom: 0px;
}
and this container :
.container{
position:relative;
height:100%;
width:980px;
margin:0px auto;
}
The container's (content) height is 100% so it is based on the amount of results you get from your search query. I want the footer to stick underneith the container at all time. And when you have no results I just want to have it at the bottom of the screen.
I tried to give the container a padding-bottom the height of the container and change the posistion but it didn't help. Does anyone has an idea how to solve this?
try this:
.footer{ width:100%; background-color:#333; height:100px; position: fixed;
bottom: 0px; }
Changing position absolute with fixed
DEMO
see this CSS to make HTML page footer stay at bottom of the page with a minimum height
and http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I hope this will helpful for you.
The image of the young lady on the following page:
http://secretgenius.co.uk/document/document_index.html
needs to move to the bottom of the page if the content to the right is longer. You can see in the above URL that she is floating above the footer line, but I would like her to always appear on the footer line no matter how much content is to the right. I am using the 960.gs grid for this site.
Thanks for any help.
Use position:relative on the image parent container, and position:absolute; bottom:0; left:0 on the image
Add vertical-align: bottom on the img tag
Screenshot:
#mainFooter{ background: url(../images/footerbg.png) repeat-x left bottom; bottom:0px; width: 100%; position:fixed; }
#footer { position: relative; margin: 0 auto; padding:10px 0; }
try these settings & if any prior settings of css.
mainFooter: for img
& footer: for text bellow img