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.
Related
I am trying to make list expand from bottom to top. It works, but if the list is too big, it goes over the "top" div. My idea is when the list is too big, I will have scroll bar and "bottom" div to have like 50% of "top" div. I can't make it top: 0 because If I do it, the div goes up. Same as for using height on "bottom". I know why is not working now, but I have no more ideas how to fix it. Any ideas would be helpful.
https://plnkr.co/edit/0qZVy8PeZ6uUwejV1AFf?p=preview
.top {
position: relative;
height: 300px;
background-color:red;
}
.bottom {
position: absolute;
bottom:5px;
background-color:blue;
}
I have just gone through your provided link. Add these properties to .bottom
max-height:300px;
overflow-y:auto;
Take position: absolute; off of .bottom and then add overflow-y: scroll; to .top
I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)
http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD
Excerpt:
nav {
background: black;
color: white;
float:left;
width:20%;
height:800px;
display:inline-block;
/*margin-top: 40px;*/
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#main {
background-color:#04cfe1;
float:right;
width:80%;
/*margin-right:10px;*/
}
Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.
I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.
Full page site: http://rubergaming.com/project/
Thanks a ton!
You can achieve this by using height 100%, but you may have forgotten that you also need to give container elements a height of 100% in order for that to work when you are giving your #main div that 100% height. I also slightly modified some of your other styles, you may need to tweak as needed. http://jsfiddle.net/ngz6e5p1/.
/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
height: 100%;
}
/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
height: 100%;
padding-top: 0px;
padding-bottom:0px;
}
What do you mean for the black bar to go all the way? And to span the blue div across the rest of the page try this:
<div id="main" style="
position: absolute;
margin-left: 20%;
bottom: 0;
top: 0;
">
//ALL THE OTHER STRUFF INSIDE THIS DIV
</div>
Here is my website: http://www.bkd.com/wealth-advisors/index-test.htm
The problem I am currently having is that the "Wisdom for Your Wealth" bar will only show up on certain resolutions. Is there anyway I can make this show up on all? I need it to lay across the page the same on every page. A little below the bottom but not all the way at the bottom.
Anyone have any suggestions?
Here is my CSS:
.bottombar {
position:fixed;
margin-top: 800px;
top:0px;
left:0px;
height:42px;
width:1800px;
z-index:100;
}
Here is the HTML
<div style="position:absolute; top:-50; left:5; font-size:80px; z-index:4"><a
href="/wealth-advisors/about-test.htm"><img src="/wealth-advisors/images/wisdom-
wealth.png" height="52" width="800" class="bottombar" ></a></div>
Please let me know if you need anything else from me.
Thank you!
-Marcy-
This will solve your problem:
.bottombar {
bottom: 0;
display: table;
height: auto;
position: absolute;
width: 100%;
}
With width: 100%, position: absolute and display: table you don't need to adjust top, left or any margins.
use bottom:0; i would may try removing the margin top as well. i would change the width to 100%. also remember you have the image in a div that's absolute and the image is fixed.
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.
first off I would like to say thanks to those who have helped me out before on here.
Ok the problem is this: I have several images which are placed inside a a div called "Banner"
at the top of my web site. I also have a text link to facebook which is floated to the right. They are each centered using the following css...
#banner img {border:none;
margin:0 auto;
display:block;
}
a#social_network {
float:right;
margin:10px;
padding:0px;
}
I have also floated a link to facebook to the right, which is given an id called "social_network" and is also within the banner div. The problem is that when I float this textual link right my top image is no longer centered. I thought that maybe I needed to clear the float but that did not work I was doing it wrong.
All suggestions are appreciated.
Maybe you can try this:
#banner {
position: relative:
}
#banner img {
border: none;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /* <--- Here's 1/2 of the width of the image */
margin-top: -50px; /* <--- Here's 1/2 of the height of the image */
}