Question

我试图让JS导航按钮与全宽背景/框一起内嵌，这样按钮就不会浮动。当我尝试在CSS中设置它时，我发现按钮不符合此背景/盒/容器。它们略高于它。我试过改变利润等但没有运气。

我不确定问题是否相关，但我发现我无法将导航栏直接放在徽标容器/标题下方。它被推动，所以它在徽标下面150px左右，之间有很大的差距。

最后，主体内容区域不会伸展到左侧的宽度。我使用边距对右侧进行了排序，但左侧并没有摆脱差距。

非常感谢任何帮助。

＆＃13;

document.getElementById("nav01").innerHTML =
  "<ul id='menu'>" +
  "<li><a href='Index.html'>HOME</a></li>" +
  "<li><a href='Customers.html'>SECTIONS</a></li>" +
  "<li><a href='About.html'>HOWS</a></li>" +
  "<li><a href='About.html'>OUR EXPERIENCE</a></li>" +
  "<li><a href='About.html'>TESTIMONIALS</a></li>" +
  "<li><a href='About.html'>NEWS</a></li>" +
  "<li><a href='About.html'>CONTACT US</a></li>" +
  "</ul>";

document.getElementById("foot01").innerHTML =
  "<p>&copy; lumi " + new Date().getFullYear() + " All rights reserved.</p>";

＆＃13;

/* Check how to edit nav main background colour */

#container {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #73008C;
  background-image: url("banner.jpg");
  background-size: 100%;
  width: 100%;
  height: 800px;
  content: 60px padding: 5px;
  border: 5px #73008C;
  margin-left: 0px;
  margin-right: 0px;
  z-index: -2;
}
#header {
  position: absolute;
  opacity: 0.6;
  background-color: #ffffff;
  width: 100%;
  height: 90px;
  margin: auto;
  z-index: -1;
}
#logo {
  position: center top;
  margin: 0;
  z-index: 2;
}
ul#menu {
  width: 100%;
  height: 50px;
  padding: 0px;
  border: 0px;
  border-color: #374754;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
}
ul#menu {
  position: relative;
  background-color: #374754;
  padding: 0;
  margin-top: 70px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
}
ul#menu li {
  display: inline;
  margin-right: 5px;
}
ul#menu li a {
  background-color: #374754;
  padding: 10px 10px;
  text-decoration: none;
  color: #ffffff;
  border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
  color: white;
  font-style: bold;
  background-color: #d83030;
}
body {
  font-family: "Helvetica", Verdana, sans-serif;
  font-size: 12px;
  background-color: #ffffff;
  color: #ffffff;
  text-align: center;
  padding: 0px;
}
#main {
  position: absolute;
  top: 600px;
  padding: 10px;
  padding-left: 200px;
  padding-right: 200px;
  background-color: #d83030;
  background-position: top center;
  margin: auto;
}
#h1 {
  text-shadow: 5px 5px 5px ##374754;
  font-family: Helvetica, sans-serif;
  color: #ffffff;
  text-align: center;
  font-size: 24px;
}
#footer {
  position: relative;
  color: #ffffff;
  margin-bottom: 0px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>LOREM IPSUM</title>
  <link href="Site.css" rel="stylesheet">
</head>

<body>

  <div id="container">

    <div id="header"></div>

    <div id="logo">

      <img src="logo.png" alt="CROWD" style="width: 305px; height125px">

    </div>

    <nav id="nav01"></nav>

  </div>

  <link href="Site.css" rel="stylesheet">

  <div id="main">

    <h1>Welcome to LOREM</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est dui, aliquam non auctor eget, maximus eu ligula. Ut sed iaculis elit, ac pharetra sem. Nam ipsum sem, consectetur id bibendum vitae, faucibus at tellus. Mauris aliquam, justo efficitur luctus vehicula, velit arcu efficitur nunc, eu volutpat diam erat ut eros. Vestibulum nec mi tristique, blandit eros sit amet, porttitor urna. Ut vehicula elit ipsum, a rhoncus erat fermentum sed. Suspendisse non diam at ex tincidunt pharetra eu id sem.</h2>

    <p>content</p>
    <p>content</p>
    <p>more content</p>
    <p>data (more content)</p>

    <footer id="foot01"></footer>

  </div>


  <script src="Script.js"></script>

</body>

</html>

＆＃13;

CSS内容和菜单定位

0 个答案: