Question

请注意导航使用JS以及页脚文本。其余的都是HTML / CSS。如果需要，我可以展示JS，但我相信这个问题在于HTML或CSS。

在网站预览中，导航（nav01 /菜单）和正文/主区域略微向右移动（大约10px）。因此，不是导航和主要红色区域与横幅图像/ bg一致，而是向右偏移。我假设这是导致水平滚动条的原因（网站右侧有大约400px的额外空白区域）。

我在特定区域将边距设置为0，但这些左右边距仍然存在。

第二个问题是将成为隐藏内容/下拉区域（当前可见）和下一页（滚动单页）的页面分隔符。在每个实例中，分页和隐藏框中，我已将宽度指定为100％，但它们保持在中央，甚至不会拉伸到实际图像大小。

对这两个问题的任何帮助将不胜感激。我确信这很简单，但我似乎无法在经过数小时的尝试后找到它。

..............................

@fontface {
    font-family: Swisz;
    src: url(fonts/swisrg.ttf);
}
@fontface {
    font-family: Swisz;
    src: url(fonts/swisrg.ttf);
    font-weight: thin;
}


#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: 0px;
    border: 5px #73008C;
    margin-left: 0px;
    margin-right: 0px;
    z-index: -3;
}

#header {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.4);
    width: 100%;
    height: 12%;
    margin: auto;
    z-index: 1;
}

#logo {
    position: relative;
    border: 0px;
    margin-top: 9px;
    z-index: 2;
}

#nav01 {
    position: absolute;
    background-color: #374754;
    width: 100%;
    height: 40px;
    padding: 0px;
    margin-left: 0px;
    margin-top: 85px;
    margin-right: 0px;
    border-radius: 0px 0px 6px 6px
}

ul#menu {
    font-family: Swisz;
    position: relative;
    background-color: #374754;
    padding: 0;
    margin-top: 13px;
    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;
}

#overlay {
    font-family: Swisz;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 250px;
    bottom: 200px;
    width: 30%;
    height: 30%;
    background-color: #d83030;
    padding: 15px 15px;
    color: #ffffff;
    border-radius: 8px 8px 8px 8px;
}

#info {
    position: relative;
    left: 400px;
    top: 280px;
}

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: 0;
}

#h1 {
    font-family: Swisz;
    text-shadow: 5px 5px 5px ##374754;
    color: #ffffff;
    text-align: center;
    font-size: 30px;
}

#h3 {
    font-family: Helvetica, sans-serif;
    color: #ffffff;
    text-align: left;
    font-size: 12px;
}

.h5 {
    font-family: Helvetica, sans-serif;
    color: #374754;
    text-align: center;
    font-size: 16px;
}

#hiddenbox {
    position: relative;
    width: 100%;
    height: 298px;
    background-image: url("hidden_bg.jpg");
    background-repeat: repeat-x;
    padding: 5px;
    padding-top: 7px;
    margin: 0;
    text-align: left;

}

.pagedown {
    position: relative;
    width: 100%;
    padding: 0;
    top: 900px;
    margin: 0;
}

#sub {
    position: relative;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 10%;
    padding-top: 1%;
    color: #374754;
    top: 1200px;
    background-color: #ffffff;
    margin: 0;

#h4 {
    font-family: Helvetica, sans-serif;
    color: #374754;
    text-align: center;
    font-size: 40;
}


#footer {
    position: relative;
    color: #ffffff;
    margin-bottom: 0px;
    margin-top: 100px;
}

<!DOCTYPE html>
<html>

<head>
  <title>TITLE HEREd</title>
  <link href="Site.css" rel="stylesheet">
  <script src="Script.js"></script>
</head>

<body>

<div id="container">

	<div id="header">
		
		<div id="logo">

<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>

		</div>

	</div>

</div>

<nav id="nav01"></nav>

<div id="overlay">
	
	<h1>Filler title text here<h1>
	
	<h2>Filler filler filler filler filler</h2>

</div>

<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">

</div>

 <div id="main">

  <h1>LIPSUM</h1>
  <h2>main content will al be placed here</h2>

  <img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">

	<div id="hiddenbox">

		<h3>drop down content/hiddent content here/h3>

		<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>


	</div>

	<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>

</div>

<div id="sub">

	<h4> How It Works </h4>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>

	<footer id="foot01"></footer>

</div>

<script src="Script.js"></script>

</body>
</html>

Answer 1

要解决第一期导航和正在移动的正文，请为body代码添加margin:0px。这会将它们移回原位。

400px的空白空间是由left:400px元素上的#info引起的。

您的第二个问题是由您在padding-left元素上的padding-right和#main引起的。删除它们，并为width:100%提供#main。父级和现在的子级都填充了页面的宽度。

Answer 2

第一个问题很简单。所有浏览器处理html标签的方式都不同，例如，大多数浏览器都给<body>一个margin，这会导致10px。

只需将其添加到您的css文件中：

body, html {
  margin: 0;
  padding: 0;
}

右侧400px的原因是您的<div id="info">标记。这个div获得了属性（由浏览器默认设置）div {display: block}，它表示div确实阻止了屏幕大小可用的全宽度。

然后你给它了css属性position: relative; left: 400px。这意味着，如上所述，div已经具有全宽度加上从左侧添加的400px空间。因为它超标了。

更顺畅的版本是将left更改为padding，因此它变为：

#info {
  position: relative;
  padding-left: 400px;
  top: 280px;
}

您的第二个问题是由padding-(left/right) div上的#main属性引起的。你可以简单地删除它们，你的div获得页面的整个宽度。

最后，在结束<代码之前，此行中有一个缺少</h3>个符号。

        <h3>drop down content/hiddent content here/h3>

希望这有帮助，请随时询问更多信息。

祝你好运，玛丽安。

为什么我的背景不会重复-x或拉伸到全宽？

2 个答案: