Question

我的社交网络，常见问题以及在哪里购买的链接是在页脚部分内部排列但是它不能粘在我的页面底部，我觉得我的HTML结构很奇怪任何人都可以帮我这个吗？谢谢我希望它与左下角的常见问题解答和购买地点，页面右下角的社交网络徽标以及4导航链接Output that i want中间的LOGO相似。

＆＃13;

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

＆＃13;

body {
  background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
  background-repeat: repeat-x;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

#page {
  margin: 0px auto;
  width: 1200px;
}

header {
  height: 20px;
  position: relative;
  margin: 30px 0 0;
}

.mainnav {
  padding-top: 50px;
  position: relative;
  width: 1200px;
}

button {
  font-size: 20px;
  font-family: 'Bungee';
  text-align: center;
  border: none;
  background-color: transparent;
  padding: 16px 16px 40px 0px;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.divider {
  margin-left: 100px;
  margin-right: 260px;
}

.divider2 {
  margin-left: 150px;
}

#submenu {
  display: none;
  background-color: transparen;
  text-align: center;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: absolute;
}

#submenu a {
  color: black;
  padding: 0 0 40 0;
  text-decoration: none;
  display: block;
}

.dropdown:hover #submenu {
  display: block;
}

.logo {
  position: absolute;
  left: 45%;
  margin: -48px 0 0 -98px;
}

#cart a {
  position: absolute;
  /* Position them relative to the browser window */
  right: -80px;
  /* Position them outside of the screen */
  transition: 0.3s;
  /* Add transition on hover */
  padding: 15px;
  /* 15px padding */
  width: 100px;
  /* Set a specific width */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Increase font size */
  color: black;
  /* White text color */
  background-color: white;
  border-radius: 15px 0px 0px 15px;
}

#cart a:hover {
  right: 0;
  text-decoration: none;
}

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: blanchedalmond;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {
  transition: margin-left .5s;
  padding: 20px;
}

.btmcontainer {
  max-width: 1200px;
  margin: 0 auto;
}

.social li {
  float: right;
  display: inline;
  list-style: none;
}

.faqwtb a {
  color: black;
  padding-top: 50rem;
  background-color: white;
  padding: 20px;
  position: relative;
  float: left;
  text-decoration: none;
  border-radius: 25px 25px 25px 25px;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <link href="HomeCSS.css" rel="stylesheet" type="text/css" />
  <link href="font.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" />
  <script src="GTech.js"></script>
</head>

<div id="page">

  <body>
    <header>
      <img class="logo" src="Images/17622275_1491915637509717_1227569229_o.png" width="250" height="250" />
      <div class="mainnav">
        <button style="height:20px;width:120px;margin-left:90px">Notice</button>
        <button class="divider" style="height:20px;width:120px">Products</button>
        <div class="dropdown">
          <button id="svc" style="height:20px;width:120px">Services</button>
          <div id="submenu">
            <a href="#" style="font-family:'Bungee'">Help Center</a>
            <hr />
            <a href="#" style="font-family:'Bungee'">Service Center</a>
          </div>
        </div>
        <button class="divider2" style="height:20px;width:120px">About&nbsp;Us</button>
      </div>
    </header>

    <div id="cart" class="scart">
      <span onclick="openNav()"><a href="#">Shopping Cart</a></span>
    </div>

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

  </body>

  <footer>
    <div class="btmcontainer">
      <div class="faqwtb">
        <span><a href="#">FAQ</a></span>
        <span><a href="#">Where to Buy</a></span>
      </div>
      <div class="btmcol">
        <ul class="social">
          <li>
            <a href="#"><img src="Images/footericon/facebook.png" /></a>
          </li>
          <li>
            <a href="#"><img src="Images/footericon/twitter.png" /></a>
          </li>
          <li>
            <a href="#"><img src="Images/footericon/google+.png" /></a>
          </li>
          <li>
            <a href="#"><img src="Images/footericon/tumblr.png" /></a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</div>

</html>

＆＃13;

Answer 1

将CSS更改为此...

你到处都使用过相对位置。删除它们。将页脚的位置放在正确的位置，然后定位页面组件。

检查我的小提琴：https://jsfiddle.net/mpriyam/s8xhr5wv/

CSS应该......

    body {
  background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
  background-repeat: repeat-x;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

#page {
  margin: 0px auto;
  width: 1200px;
}

header {
  height: 20px;
  margin: 30px 0 0;
}

.mainnav {
  padding-top: 50px;
  width: 1200px;
}

button {
  font-size: 20px;
  font-family: 'Bungee';
  text-align: center;
  border: none;
  background-color: transparent;
  padding: 16px 16px 40px 0px;
}

.dropdown {
  display: inline-block;
}

.divider {
  margin-left: 100px;
  margin-right: 260px;
}

.divider2 {
  margin-left: 150px;
}

#submenu {
  display: none;
  background-color: transparen;
  text-align: center;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: absolute;
}

#submenu a {
  color: black;
  padding: 0 0 40 0;
  text-decoration: none;
  display: block;
}

.dropdown:hover #submenu {
  display: block;
}

.logo {
  left: 45%;
  margin: -48px 0 0 -98px;
}

#cart a {
  /* Position them relative to the browser window */
  right: -80px;
  /* Position them outside of the screen */
  transition: 0.3s;
  /* Add transition on hover */
  padding: 15px;
  /* 15px padding */
  width: 100px;
  /* Set a specific width */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Increase font size */
  color: black;
  /* White text color */
  background-color: white;
  border-radius: 15px 0px 0px 15px;
}

#cart a:hover {
  right: 0;
  text-decoration: none;
}

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: blanchedalmond;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {
  transition: margin-left .5s;
  padding: 20px;
}

.btmcontainer {
  max-width: 1200px;
  clear:both;
  margin: 0 auto;
}

.social li {
  float: right;
  display: inline;
  list-style: none;
}

.faqwtb a {
  color: black;
  padding-top: 50rem;
  background-color: white;
  padding: 20px;
  text-decoration: none;
  border-radius: 25px 25px 25px 25px;
}

为什么我的页脚在页面顶部并且我的html结构是否正确排列？

1 个答案: