当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Unable to get footer to the specifications I'd like

问题描述:

I have a site I'm working on and I'm trying to get the footer to fill up with the content that's inside of it. The content however seems to all be pushing to the left side. I tried float:right; with no luck. I have a fiddle attached to hopefully clarify what I mean. I've been trying to get the footer to be at the very bottom of the site with no white below it. Tried postion:absolute-bottom;0;

Oh another issue I have is the slider image stretches the full length of the page but it should only be the same width as the footer.

Jsfiddle: http://jsfiddle.net/dottsie/LueLqudb/2/

Html:

 <title>Home</title>

<link href="css/style.css" rel='stylesheet' type='text/css' />

<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

</script>

<!---strat-slider---->

<script type="text/javascript" src="js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/slider-style.css" />

<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>

<!---//strat-slider---->

<!---start-login-script--->

<script src="js/login.js"></script>

<!---//End-login-script--->

<!-----768px-menu----->

<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />

<script type="text/javascript" src="js/jquery.mmenu.js"></script>

<script type="text/javascript">

// The menu on the left

$(function() {

$('nav#menu-left').mmenu();

});

</script>

<!-----//768px-menu----->

</head>

<body>

<!---start-wrap---->

<!------start-768px-menu---->

<div id="page">

<div id="header">

<a class="navicon" href="#menu-left"> </a>

</div>

<nav id="menu-left">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="design.html">Design</a></li>

<li><a href="store.html">Buy some</a></li>

<div class="clear"> </div>

</ul>

</nav>

</div>

<!------start-768px-menu---->

<!---start-header---->

<div class="header">

<div class="wrap">

<div class="header-left">

<div class="logo">

<a href="index.html">Yoop</a>

</div>

</div>

<div class="header-right">

<div class="top-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="design.html">Design</a></li>

<li><a href="store.html">Store</a></li>

</ul>

</div>

<div class="sign-ligin-btns">

<ul>

<li id="signupContainer"><a class="signup" id="signupButton" href="#"><span><i>Signup</i></span></a>

<div class="clear"> </div>

<div id="signupBox">

<form id="signupForm">

<fieldset id="signupbody">

<fieldset>

<label for="email">Email Address <span>*</span></label>

<input type="text" name="email" id="signupemail" />

</fieldset>

<fieldset>

<label for="password">Choose Password <span>*</span></label>

<input type="password" name="password" id="signuppassword" />

</fieldset>

<fieldset>

<label for="password">Confirm Password <span>*</span></label>

<input type="password" name="password" id="signuppassword1" />

</fieldset>

<input type="submit" id="signup" value="Register Now!" />

</fieldset>

</form>

</div>

<!-- Login Ends Here -->

</li>

<li id="loginContainer"><a class="login" id="loginButton" href="#"><span><i>Login</i></span></i></a>

<div class="clear"> </div>

<div id="loginBox">

<form id="loginForm">

<fieldset id="body">

<fieldset>

<label for="email">Email Address</label>

<input type="text" name="email" id="email" />

</fieldset>

<fieldset>

<label for="password">Password</label>

<input type="password" name="password" id="password" />

</fieldset>

<label class="remeber" for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>

<input type="submit" id="login" value="login" />

</fieldset>

<span><a href="#">Forgot your password?</a></span>

</form>

</div>

<!-- Login Ends Here -->

</li>

<div class="clear"> </div>

</ul>

</div>

<div class="clear"> </div>

</div>

<div class="clear"> </div>

</div>

</div>

<!---//End-header---->

<!----start-banner---->

<div class="text-slider">

<div class="wrap">

<!---start-da-slider----->

<div id="da-slider" class="da-slider">

<div class="da-slide">

<h2>Design your very own</h2>

<a href="design.html" class="da-link">Find out More</a>

</div>

<nav class="da-arrows">

<span class="da-arrows-prev"> </span>

<span class="da-arrows-next"> </span>

</nav>

</div>

<script type="text/javascript" src="js/jquery.cslider.js"></script>

<script type="text/javascript">

$(function() {

$('#da-slider').cslider({

autoplay : true,

bgincrement : 450

});

});

</script>

</div>

</div>

<!---//End-da-slider----->

<!----//End-banner---->

<!----start-content--->

<div class="content">

<!--- start-top-grids---->

<!---start-mid-grids--->

<div class="mid-grids-right">

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

</div>

<div class="clear"> </div>

</div>

</div>

<div class="footer-grids">

<div class="wrap">

<div class="footer-grid">

<h3>Quick Links</h3>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About design</a></li>

<li><a href="#">Login</a></li>

<li><a href="#">Sign Up</a></li>

</ul>

</div>

<div class="footer-grid">

<h3>More</h3>

<ul>

<li><a href="#">FAQ</a></li>

<li><a href="#">Support</a></li>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">Terms and Conditions</a></li>

</ul>

</div>

<div class="footer-grid">

<h3>Connect With Us</h3>

<ul class="social-icons">

<li><a class="facebook" href="#"> </a></li>

<li><a class="twitter" href="#"> </a></li>

<li><a class="youtube" href="#"> </a></li>

</ul>

<p class="copy-right">Website by <a href="#">bloop</a></p>

</div>

<div class="footer-grid">

<h3>Newsletter</h3>

<p>Subscribe to our newsletter to keep up-to-date with all the latest news.</p>

<form>

<input type="text" class="text" value="Your Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name';}">

<input type="text" class="text" value="Your Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email';}">

<input type="submit" value="subscribe" />

</form>

</div>

<div class="clear"> </div>

</div>

</div>

<!---//End-bottom-footer-grids---->

</div>

<!----//End-content--->

<!---//End-wrap---->

</body>

网友答案:

Remove last <div class="clear"> </div> to get rid of space in the bottom.

分享给朋友:
您可能感兴趣的文章:
随机阅读: