There seems to be random white space after the footer at the bottom of the site. When I try to use inspect element, the white space doesn't seem to fall under any tags. It doesn't seem tied to any footer tags either as removing them didn't change anything.
I'm using Ryan Fait's Sticky Footer solution for my footer.
You can test it at: http://www.edmhunters.com/martin-garrix/
Any ideas what I'm doing wrong?
try to include display:none instead of visibility:hidden to the id _atssh to get this fixed
This should fix it, it will eliminate the white space at the bottom.
Change
footer {
width: 100%;
/* height: 150px; */
padding: 10px;
background-color: black;
color: white;
height: 100%;
}
To
footer {
width: 100%;
height: 100%;
padding: 10px;
background-color: black;
color: white;
height: 100%;
}
I don't know if you have to keep the visibility property but you should use display none here:
<div id="_atssh" style="visibility: hidden; display: none;">
Related
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
Here is a picture example of what is happening.
I'm trying to build one of those one-page scrolling websites.
The white background indicates one page, the grey background indicates the beginning of another page.
As I start filling my white page with content, I notice that my button slowly starts sliding down and is now encroaching into the grey page. I don't want that to happen but rather for the white page to extend.
Here is my CSS for the pages:
#white-page
{
background-color: white;
height: auto;
min-height: 100vh;
text-align: center;
}
#grey-page
{
background-color: grey;
min-height: 100vh;
}
Here is my CSS for the button.
.download-center
{
text-align: center;
margin-top: 60px;
}
.btn
{
text-decoration: none;
border: 1px solid gray;
padding: 10px 20px 10px 20px;
border-radius: 25px;
color: inherit;
}
Here is the relevant HTML
<section id="white-page">
//page content here
<div class="download-center">
<a class="btn font-r" href="docs/resume.pdf" target="_blank">
<img id="download-pic" src="pic/download.svg" />Download Résumé
</a>
</div>
</section>
<section id="grey-page">
//page content here
</section>
I tried setting the height to auto for the white page but it doesn't seem to work.
Basically, I just want the page to extend as the content requires but with a minimum of vh so that it takes up the whole of the screen first.
Edit: By removing the margin-top property, here is the result. All it does it pushes the button closer to my content but still encroaches on the page borders.
The reason is you have restricted height and used margin-top:
.download-center {
text-align: center;
margin-top: 60px;
}
Adjusting margin-top to a lesser value, say 30px will make the button stay inside.
Reduce margin from top and add position as like:
.download-center {
text-align: center;
margin-top: 40px;
position: absulote;
}
I'm answering my own post because removing margin-top was not the solution that worked for me. Instead, it was increasing margin-bottom.
margin-bottom: 40px;
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I am designing a page which required a horizontal Bar with Plus image at center. Lke this,
I have tried this,
<div><img src="http://s7.postimage.org/z6jiogw6f/add_icon.png" /></div>
div{
background: #ced8e7;
padding: 1px 0;
position: relative;
text-align: center;
overflow-x: hidden;
}
But the bar is not circular and plus image is completely inside of Bar. Can anyone help? Sample, http://jsfiddle.net/PSAEJ/
Try this, it will work tested :
Updated :
jsbin demo
This should work for you: You just needed to wrap your img tag into another <div>
http://jsfiddle.net/ZkDXA/2
Edit:
You really don't need an extra div if you prefer not to. Another example http://jsfiddle.net/ESt84/
set overflow property to visible or remove (default overflow: visible) and give -ve margin to your image
div {
background: #ced8e7;
padding: 1px 0;
position: relative;
text-align: center;
height: 7px;
margin-top: 5px; }
img {
margin-top: -7px; }
Updated jsfiddle : http://jsfiddle.net/PSAEJ/10/
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.