Footer Blocking Website Content - html

Description:
I'm having an issue with my website's footer blocking content on mobile browsers (and on longer pages on desktops).
I've seen threads about this before, but these focus on hiding the footer until the user scrolls all the way down. I want to have the footer "float" below the content, but have it go below the content when the user scrolls all the way down the page. I also need this to allow clicking on items right above the footer. On my site, you can't click on a button, even if it's a few lines above the footer - which needs to also be fixed.
Examples:
You can view an example of this issue at my own site: http://mbt.aeio.io/twitter.php
Note that when you scroll all the way down, it is impossible to click "Load More Tweets", even on desktops, where the button is clearly visible.
I cannot find an example of what I'm trying to accomplish; that's why I'm posting about this -- and not just copying someone else's code.
Code:
This is my code for ARRANGING the footer:
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
This is my ACTUAL code for the footer:
<div class="footer">
<div class="content">
<div class="container" style="
/* display: inline-block; */
">
<div class="well animated slideInUp" style="
display: inline-block;
">
<center>Developed with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> by mario_bros_tech, Arkagaen, and Others | Copyright © 2015-2017 | All Rights Reserved</center>
</div>
</div>
</div>
</div>
I know this is super-janky and that I shouldn't be using containers to make a footer, so if you have any suggestions for improving/cleaning up the code too, that would also be appreciated.
And if you need to look at the CSS for whatever reason, it is using Bootstrap and can be found here: http://mbt.aeio.io/assets/css/
Thanks for all the help!

The best thing (and the right thing) to do is to give some bottom padding to body. Giving the following code:
body {
background: #eee;
padding-bottom: 75px;
}
We get this:

Related

Making iframe fit into an element that has left-margin set

Hi all I think this should be a relatively quick question but since I am a beginner to HTML and CSS I can't seem to figure this out.
I have the following CSS code:
<style>
div.specialspecial {
width: 100%;
height: 0;
padding-bottom: 56%;
position: relative;
margin-left: 160px;
}
iframe {
width: 90%;
height: 100%;
position: absolute;
display: block;
}
</style>
And this html code:
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
It seems that the margin-left set in the div class (which I need as I am using a sidebar on this website) makes it so the content inside the iframe is off center (presumably by 160px). Is there a way for me to use CSS to easily fix this? Or will I need to resort to JavaScript to resize the frame? I am comfortable with learning either approach.
Edit:
Apologies for not providing enough information. Hopefully adding this will help:
This is the body of my html:
<body>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card-2">
Link
Link
</div>
</div>
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</body>
This code is mainly taken from the example of: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion
As I am trying to get a similar style for my webpage
I think the best fix is to simply create a container for the iframe that isolates it from the element with the large margin:
<div class="specialspecial">
<div class="pageContent">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</div>
Even with no additional CSS, this should restrain the size of the iframe, which will get its size from the element without the large margin.
It's worth noting that layouts like that, which rely on large margins for side content, are somewhat archaic. Each part of the document should be contained in an element that doesn't care what's happening around it.
<style>
.page-container > * {
display: inline-block;
}
.page-sidebar {
width: 160px;
}
<div class="page-container">
<nav class="page-sidebar"></nav>
<main class="page-content"></main>
<div>
See also: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

CSS - How can I center a <script>'s output?

I've been having a lot of trouble trying to center an external script and I was hoping SO could help me out. I'm designing a page to use a Google widget that uses Google Maps to give directions to an office. Here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="page_content" runat="server">
<div class="centered">
<span class="header_large_bold">Directions to our office:</span><br /><br />
<span class="header_bold">Please type your address in the top bar and click "Go".</span><br />
<script src="[link to the widget here]"</script>
</div>
</asp:Content>
And here is the CSS for it:
.centered {
width: 100%;
margin: 0 auto;
text-align: center;
}
As it is, the text is centered perfectly fine, but the widget from the is left aligned. I can fix this using a tag, but I'm trying to avoid using it as best I can. Any idea what I'm doing wrong?
You can insert the tag in a div
<div id="parent">
<script src='...'></script>
</div>
and then center the div..
#parent {
width: 30%;
margin: 0 auto;
}
But it might depend on the script content
Easily put your code between
<div align=center>
and
</div>
:)
User fa7d0 has the exact solution, but maybe a little unclear for the beginner:
Step 1 - Use a div with a "parent" ID to encapsulate your script as follows:
<div id="parent">
<script src='...'></script>
</div>
Step 2 - Go up to the top of your code, probably inside the area where you are defining the header information, and in the style section place the definitions:
<style>
#parent {
width: 30%;
margin: 0 auto;
}
</style>
I find it helpful to put all the div styling stuff in one area, all the p styling stuff in one area, etc.

In HTML5 How can I align my header the way I need to

I'm currently practicing some HTML 5 Web App development, but I can't even get my header to align properly.
visit http://www.sithhappens.net to see what I mean, (view page source to see my html)
and http://www.sithhappens.net/iphone.css
to see the CSS
I want the "Route.me" to align middle, and button (which is just a place holder till I implement a button there) to stay to the left. Thanks.
(Visit the webpage on your mobile device)
Here is the correct HTML, I have injected the styling into the HTML so you can see how it is done. The trick is to make the button position: absolute so it does not affect the spacing of the text "Route.Me".
<article>
<header><button style="
position: absolute;
">Button</button> <div align="center" style="display: block; text-align: center;">Route.Me </div>
</header>
</article>
use only
<div align="center" style="margin-top:-20px;">Route Me</div>
You will have to place button text in a <p> element. Set styles like this:
<div class="btn">Button</div>
<div align="center" class="txt" >Route.Me </div>
CSS
.btn {
float:left;
}
.txt {
display:block;
}

How do I fix my footer and the bottom of this page?

I'm trying to fix a table and make it look better (I describe the issue better in the screen shot below).
this is a screen shot of what's going on and what I would like to happen:
What do I change in my style sheet?
the css file is located at rankingclimber.com/css/style.css (the footer part is clearly marked) and the signup part is clearly marked
The sign up page is located at www.rankingclimber.com/signup.php
here's the code for the footer file: rankingclimber.com/footer.php and the footer is called on the main page: rankingclimber.com/signup.php
To fix the placement of the line, move <div class="form_bt"></div> to just after the closing tag of <div class="form_tp">.
To fix the "Create Account" button not being inside the form, from <div class="chkp3">, remove float: left and margin-bottom: 20px. Then, to <a class="btn1">, add margin-top: 20px.
To fix the footer, move <div id="footer"> to just after the closing tag for <div id="wrapper">.
Tested in Firefox only, with Firebug.
Another answer pointed out you have missing close tags. In that case, my answer might not be very useful as the problems could have been caused purely by those missing tags.
Fix the missing close tags, and then see what your page is like before following any of the steps I posted.
I think, add margin:0; !important to the .form_bt style. Safari Web Inspector shows it currently has a margin-right of -60px. And in your HTML, put the div.form_bt outside of the <form> element, it's currently inside it.
try these fixes, I can't validate since I don't have all of your files, but you are missing closing tags for:
Missing </li> after the code: <li>What is Ranking Climber?
Missing </div> before the code: </form>
use this css
clear: both;
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
CSS for these DIV's
#container{
width:950px;
min-height:500px; // This will helps you to stick to footer to bottom about 500px below
}
.left{ width: 50%;}
.right { width:50%;}
.footer{
widht: 950px;
clear: both; // This will helps you to avoid footer to overlap. Use this when Some elements is overlapping
}

Align social buttons correctly

I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look
Yahoo Link
I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.
Thanks.
Update
This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is
<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Please let me know, can we have exactly they have. I liked the look and feel of that. :)
Thank You.
I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.
I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn't work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn't look the same across browsers.
What's needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.
Following the tips from Neil's site got me to here - but with clear problems.
(I'd post an image, but don't have enough reputation points yet).
The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it's DIV as seen in the first image. There are a couple of issues to note:
a: the FB share button width is minimum 90px per //developers.facebook.co.... All well and good, however, the width is dynamic based on the number of shares one has.
b: there is no margin between the FB share and LI share button -
c: the LI share button needs more width, and dynamic width as it will get it's own count as time goes on.
c: 20 px height is not enough for FB - even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
d: and most obvious of all, the vertical positioning with LI riding high.
I solved the problem by floating a container holding the buttons with a line-height if 1 and using some CSS to float the buttons displayed inline with a min width, min height, and left padding.
The results are what was live as of the date of this posting (again, need reputation points to post images and more than two links)
Here is my HTML and CSS:
<div class="social-button-container" style="position: relative; z-index: 999;">
<!-- Facebook -->
<div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<!-- LinkedIn -->
<div class="social-button">
<script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
<!-- Twitter -->
<div class="social-button">
</div>
<div style="clear: both;"></div>
</div>
.social-button-container {
/*background-color: red;*/
/**
* This is a nice CSS trick that allows you to clear an element
* without having to add extra elements to your HTML. This helps
* separate content from design, which should always be an architectural
* goal.
*/
float: left;
line-height: 1;
}
.social-button {
float: left;
min-width: 100px;
display: inline;
min-height: 22px;
padding-right: 5px;
}
They are using an unordered list at the elements to show the buttons.
A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.
<ul>
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
I think the above would work ok.
All you need to do then is right align it.
<div style="width:400px">
<ul style="float:right">
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
</div>
Don't forget to use classes instead of inline styles like I have here.
Well, you basically just have to deal with the fact that one is an inline (a) element, the other a block (iframe) element, after that it becomes quite easy, just test that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
display: block;
float: left;
line-height: 2em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>
</body>
</html>
Put your social media buttons into parent divs and give those divs an id each.
Target the inner iframe elements, e.g:
#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}
where fblikeblock and gplusblock are the parent divs.
and use this on your parent divs:
#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}