I am having an issue with the horizontal line I have placed in my footer. I have another on my header but it is working fine. The issue begun when I stuck the footer to the bottom of the page. The horizontal line displays all the way across the screen rather than just in the container.
CSS :
footer {
text-align:center;
clear:both;
color:#B05510;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
#mcp {
width:175px;
-webkit-transition: width .5s;
margin:10px;
}
#mcp:hover {
transition: width .5s;
width:225px;
}
HTML:
<footer>
<hr>
<p>Copyright © sourceblockmc.net 2014 - All Rights Reserved<br>
<a href='https://clients.mcprohosting.com/aff.php?aff=8566'><img id='mcp'
src='images/mcp.png'</a></p>
</footer>
Issue pic : http://gyazo.com/3aeede809cffb0b6cc748b5ddf2efe8a
Although I don't recommend using Absolute Positioning for your footer. Here is the solution with your code. Position absolute breaks elements out of the documents normal flow.
The solution here makes the footer 75% same as the container, and then recentering it, with margin-left and margin-right.
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
The problem is the following bit from your CSS file:
footer {
...
width:100%;
...
}
This is causing your footer block to stretch across the entire width of the screen. Since the text is centered, you aren't able to tell, but if the text was longer, it would also extend beyond the boundaries of the grey section.
Simply change the width setting to the pixel width of the grey background (or smaller if you want some padding) and your problem will be solved. Assuming, for example, it's 950 pixels:
footer {
...
width:950px;
...
}
Edit
Since you're also using absolute positioning, you may have issues centering the footer after making this change. View this question for a possible solution: How to center absolutely positioned element in div? or don't use position: absolute and add margin: 0 auto; to align the footer in the horizontal center.
Related
My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
I have had a lot of trouble with my footer and my page content, and am trying to find the correct way to do this. I have my footer at the bottom of the page, but when I add content it overflows the container, please help me.
CSS:
#container {
width: 75%;
height:100%;
margin:0 auto;
background-color:black;
margin-top:10px;
margin-bottom:10px;
padding:10px;
opacity:0.8;
#content {
width:100%;
}
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 115px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<body>
<div id='container'>
<?php
include 'navfoot/navbar.php'
?>
<div id='content'>
<div id='paragraph'>
<p>Eventually our website will be advanced enough for us to have a news feed! But until then we suck!</p>
</div>
</div>
<?php
include 'navfoot/footer.php'
?>
</div>
It depends on how you want the footer to act (fixed at bottom always, or relative to the content). But from what it sounds like, try adding this to your footer CSS:
footer {
background-color: black;
position: fixed;
}
That will keep it fixed and at the bottom of the page (in Chrome, at least). Otherwise, make the position: relative of the footer and that will sink it to the bottom of the content.
Your container and footer are set to 75% width and your content is set to 100% width. That could be why it's going past the container/footer. It depends on the order. The absolute positioning on the footer could be causing it. You could try changing to relative.
Please post a mock-up of what you are trying to achieve and the HTML to what you have now.
If you are using PHP includes, we need to see what those are. Lots of variables that can cause content to break.
If the issue happens when you are resizing your browser, it's because the paragraph ID (#paragraph) has a fixed width of 500px and everything else is percentages.
Fixed on the footer will not resolve the text flowing on top of it.
I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.
HTML for my footer:
<div class="footer">
<div class="footerContent">
<p>Copyright © 2014 www.danielparry8.com</p>
</div>
</div>
CSS for footer:
.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
.footerContent {
font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
}
.footer p {
float:left; width:100%; text-align:center;
}
I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.
All content is inside a main content div with the following CSS
html, body, #maincontainer { height: 100%; }
body > maincontainer { height: auto; min-height: 100%; }
This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!
Thanks!
you need to change position: fixed to absolute end add bottom: 0;
footer and your unit must be located outside of the wrapper
I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.
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.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */