I have a page which I can't seem to get right in terms of a few styling details.
http://www.comehike.com/earn_money.php
It has two problems with it that I can't seem to get right (largely because design and styling are my Achilles heal).
Problem 1: at the bottom, the footer div sticks out to the right. I tried wrapping it in diff divs, and looking via FireBug, but can't seem to get it to stop sticking out....possibly because I am tired and brain dead :)
Problem 2: Do you see how the main page div ends above the footer and div? Is there way to make the main area of the page extend below the footer?
Thanks!
For the first part of your question, you can fix it by simply removing the width property on your footer, since it's a block element, and it will occupy 100% of the available width (after padding/margin/etc).
For the second part of your question, I'm not quite sure what you're asking, but I think you would change the style on #mainBody to be: padding: 5px 5px 20px; or some other large number for the third value?
Take width off of the footer's CSS.
If you want the footer to be within the main page, you have to position it within .basic
Set footer div width to 900px from 960 will fix footer sticking out
width: 900px;
problem2. The layout is correct how it should be. This is how the layout is
<div>
<div class="basic">
<div> <-- google ads
<div> <-- footer
</div>
to fix this simply change the layout to this
<div>
<div class="basic">
<div /> <-- google ads
<div /> <-- footer
</div>
</div>
Problem #1:
Looks like you want your footer to be 960 pixels wide. But you have a 10 pixel white border which actually makes the footer 980 pixels wide. Remove the border and your footer will again be 960 pixels as you designed. Then it appears you'll have to tweak width: 960px; until it fits properly. 950px seems to work well.
.footer{
width: 960px;
padding: 0.5em 0;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
vertical-align:center;
background: #fff;
color: #462c1f;
border: 10px solid #fff;
}
Should be...
.footer{
width: 950px; /* adjust the width to fit */
padding: 0.5em 0;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
vertical-align:center;
background: #fff;
color: #462c1f;
}
Problem #2:
You need to put the banner's <div> and <div class="footer">...</div> inside of and near the bottom of <div class="basic">...</div>
Related
So on a website I'm making a have a navigation bar, I use this code for it.
<div id="container">
<span>Home</span>
<span>Blackmail</span>
<span style="color: #7CFC00">Keeping Safe</span>
<span>Cyberbullying</span>
<span>About</span>
</div>
However this navigation bar is wider than the others, exact same code (Apart from the colour, the colour shows what page you are on)
I would appreciate it if someone told me why this happens or how it could get fixed!
Website - nibble90.github.io
The page with the wider navigation bar is the keeping safe page!
Your #container menu has a fixed width (83em) and a padding. When your content is longer than the page height, it causes a vertical scroll bar to appear and your fixed width elements can't adjust to accommodate it.
You should set its width to be 100% with a min-width of something like 550px and its sizing to be border-box. This will mean it fits your page much more gracefully on different sized browsers and also auto-adjust to the presence or absence of the vertical scroll bar.
So:
#container{
width:100%;
min-width:500px;
box-sizing:border-box;
}
Replace the #container code by this one and it will works. It's better to use % or px instead of em for container width.
#container {
display: block;
width: 25em;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
width: 100%;
}
The width in your CSS is what is throwing you off. Remove the width and the divs will match in size.
#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}
Make sure to remove both because you had width in there twice.
I'm trying to make footer stay at bottom. I'v searched through Google, but with no luck with the code I have. I've tried navbar-fixed-bottom, but that just makes the footer content scroll beneath it, and it stays fixed which I don't want.
Here is the current code I have:
HTML
<footer>
<div class="container">
<p class="text-p"><img src="images/footer-logo.png"> © 2015 Domainname.no. All rights reserved.
<!--<i class="fa fa-facebook"></i>Follow us on Facebook-->
</div>
</footer>
CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.text-p{
text-shadow: none;
font-size: 14px;
color: #999;
padding: 20px 0 0 5px;
}
I would appreciate any help! Let me know if you need rest of the code.
You were almost there, the one thing it lacks is setting the parent with a relative position:
body {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
margin-bottom: 50px;
margin-top: 0;
position: relative;
}
And then you can make sure that it stays always there by adding a negative value to bottom. E.g.:
footer {
background-color: #f5f5f5;
bottom: -100px;
height: 60px;
position: absolute;
width: 100%;
}
Btw, you don't need to add margins to the <body>, since all the content is in it :)
Edit
After reviewing a while, the solution above would be enough if bigger screens with higher heights were not considered...
The problem was that the middle container itself didn't fill the entire space, making the footer appear in the middle.
Therefore, instead of using position: absolute or fixed for the footer (or even to the <body>), the solution was to adjust the height of that same middle container to the height of the window by this:
<script>
$('body>.container').height(
$(window).height()-
$('body>.container-fluid').height()-
$('body>footer').height()
);
</script>
Setting the middle container's to the window's height removing the upper container's and footer's height places the footer in the correct position.
Also for the footer itself this rule comes in handy: footer{overflow: hidden}, just in case the contents/inner spacings of the footer overflow it.
There's a HOWTO on the getbootstrap.com site, in the getting started section:
http://getbootstrap.com/examples/sticky-footer/
Before I start I'd like to note that I'm very new to HTML and I am self teaching. I just started recently and still have much to learn.
My issue seems simple yet I can't seem to figure it out. Everything else on the page is fine, it's just the footer that's the problem. At full screen the footer stretches the full width of the browser window:
But when shrinking it it accepts the window's dimension but it doesn't center it on the window:
This is the code I'm using in the style sheet for the footer.
div#footer{
background-color: #37184c;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
It is inserted outside of the page wrap which is set to 940px.
div#page-wrap{
width: 940px;
margin: 0 auto;
}
The page wrap is where all of the content above the footer is held.
Is there any way for me to get the footer to continuously stretch to the edge of the screen? Or should I remove the #page-wrap and try to center the content some other way?
Your CSS For Your Footer As Follow:
#footerwrapper {
width:100%;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
#footercontent{
margin-left:auto;
margin-right:auto;
width:940px;
}
<!--HTML MARK-UP-->
<div id="footer">
<div id="footercontent">
<div>Your Footer info</div>
</div>
</div>
This is great because it will also set your footer to match your pagewrap width:940px; and it will keep all your content center with your pagewrap. Hope this helps.
You can try width: 100% on the footer div but without seeing more code, it is hard to fully diagnose.
Also consider using a CSS reset which will remove default values set by browsers that can make formatting/layouting a pain.
http://www.cssreset.com/what-is-a-css-reset/
Thank you everyone for the help! I actually just now came up with a solution:
div#footer{
margin: 0 auto;
background-color: #37184c;
min-width: 980px;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
I believe the issue was the due to the fact that the main content area has a fixed:
div#page-wrap{
width:940px;
margin: 0 auto;
}
It's not dynamic at all so essentially IT was what was hanging off of the edge. Setting a minimum width for the footer prevents this blemish from occurring and meets the edges of the window.
Thanks again for the help!
like many others looking for CSS height solutions, I've had this issue on and off throughout the years. A simple jsfiddle is worth a thousand words:
http://jsfiddle.net/7dcjn/1/
I understand how to use height: 100% on the html and body to achieve partially what I would like to do. I also just found out about the CSS3 box-sizing property, which again, fixes some of the issues.
However, I still have the issue where if you have a top header div1 that is 50px in height, then have a div2 below that with 100% height, the browser makes the div2 100% of the viewport height which then of course makes div2 run outside the body. See the jsfiddle above or code below.
<div id="MainBody">
<div id="TopHeader">My Top Header</div>
<div id="ContentWrapper">
How does one get this blue box to extend only to the bottom of the viewport/browser window? In other words, the blue border needs to extend right up to the green box.
</div>
</div>
html, body {margin: 0; padding: 0; border: 2px solid #00CC00;}
html, body, #MainBody, #ContentWrapper {height: 100%; min-height: 100%; box-sizing:border-box; -moz-box-sizing:border-box;}
#MainBody {margin: 0; padding: 0; border: 2px solid #CC0000;}
#TopHeader {height: 50px; background-color: #303030; padding: 10px; color: #FFFFFF;}
#ContentWrapper {margin: 0; padding: 20px 20px 0 20px; margin: 10px 10px 0 10px; border: 2px solid #0000CC;}
Any suggestions? Thanks!
I think this is the closest you'll get to actually fitting the box to the remaining space, that is to have the box fill the whole space and float the header over top of it so that the content gets pushed out of the way.
This is a better solution than calc() because the size of the header does not need to be set in order for this to work.
So you need to make a few modifications, TopHeader needs to be float:left;width:100%; and the margins on the ContentWrapper need to be changed so that it doesn't get pushed off of the bottom.
See my JSfiddle
To adjust the spacing below the header for when the content starts you need to adjust hte bottom margin on TopHeader
Here's an Example
Here's your solution bro:
The first styling of the css of the "contentWrapper" was false.
http://jsfiddle.net/xbV9A/
I have a div that has a footer image taking up 26px of space. The CSS is set to display a vertical scrollbar when needed, however I need to make sure the scrollbar doesn't overlap into my footer area, so I use bottom:26px; to bring it up. When that happens though the scrollbar is shifted upwards and I can't see the top of the content or the top arrow of the scrollbar. I am not sure what to change for the css to fix it so the scrollbar is at the very top, and leaves a 26px spacing at the bottom for my image. Any help is appreciated.
HTML
<div id="channel-container">
<div id="channel">
</div></div>
CSS
#channel {
color: #FFFFFF;
text-align: left;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
bottom: 26px;
}
#channel-container {
float: right;
width: 31%;
height: 100%;
}
Think about restructuring your html. If the div is supposed to scroll, but the footer is not then I wouldn't group them together. Set margin/padding to 0 on footer and same for bottom of scrollablediv. They should seamlessly mash together. Also obviates the need for using position absolute and a bottom value.
Here is a fiddle of what I think you are after. http://jsfiddle.net/vdZ6R/
<div id="container">
<div id="scrollablediv"></div>
<div id="footer"><img src="" /></div>
</div>