I have looked everywhere and I can't seem to find an answer to this - Obviously I am doing something wrong. Here is my footer css:
#footer {
position: fixed;
bottom: 0px;
left: 0px;
margin: 0px;
width: 100%;
height: 60px;
padding-top : 10px;
background-image:url(../images/bottom_bg.jpg);
background-repeat:repeat;
text-align:center;
border-top: 5px solid #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFCC66;
}
www.bevwebdev.com/examples.php
what the heck am I doing wrong?? I've tried z-index, setting height only works for tables, position: absolute just sticks it on the middle of my shorter pages - what a headache!!!
The problem is when you scroll down, the footer covers up the bottom part of the main container. The solution is to add a bottom margin to the container div.
#container {
margin-bottom: 100px;
}
This puts 100px of blank-ness below the div so, when at the very bottom of the page, all of the text still shows.
If you always want the footer to be below everything else, you should be using position: relative
If you always want the footer to be fixed to the bottom of the browser, you should be using position: fixed
If you always want the footer a certain distance from the another element or the top of the page, you should be using position: absolute
If you want the bottom of the page to not be hidden under the footer add this CSS:
body {
padding-bottom:100px;
}
Or some number that works for you. This will push the body content up a bit so you can see it.
Related
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
I've been trying to figure out how to get my links working in layered divs
I have a big div containing two other divs:
main div with content and
a navigation div for my menu
The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:
.navigate {
width: 1020px;
height: 300px;
position: absolute;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
top: 190px;
z-index: -1;
border: 1px solid red;}
and
.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */
z-index: 0;
border: 1px solid green; }
it's like the navigation div is behind something :$
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
I've tried to fix it with
body {
position: relative;
z-index: 0; }
read somewhere that it should fix the problem - but not for me
Any ideas how to fix it?
Thanks in advance
Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;
Got it working!
Just added:
position: relative;
to the .main-div
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work
but..
if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind
use negative margin for the div you want to over lay for example
.overlay-div{margin-top:-20px;}
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}
I am trying to use the 'position: relative;' 'position: absolute; bottom: 0;' thing to stick a div to the bottom of the page, but it keeps hanging right under the lowest visible element within the container. I tried changing 'height' and 'min-height' properties for relevant divs but never got it to work properly. it either disappears or places itself below all containers (including the footer) just sitting on plain background, or just hangs right under lowest element in the container.
here's my CSS:
#body {
padding-bottom:40px; /* Height of the footer */
padding-top: 200px;
position: relative;
}
.sink{
padding: 10px;
position: absolute;
bottom: 0;
}
.sink is the class of the div I need to stick to the bottom.
div with id body is contained within div with id container, which is contained withing html body:
body {
margin:0;
padding:0;
height:100%;
background: #7092BE;
background-image: url("bg1.png");
background-attachment: fixed;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
#container {
min-height:100%;
position:relative;
width: 900px;
margin: 0 auto;
background: white;
padding: 0;
}
I hope I copied all the necessary info, tell me if not please.
Found the answer - I gave the div right above 'sink' (and not the one containing it) the 'position: relative;' and it worked. Thanks to everyone.
I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}