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

问题描述 投票：0回答：2

请注意，NAV利用JS以及页脚文本。其余所有的HTML / CSS。我可以显示JS如果需要的话，但我相信这个问题在于无论是用HTML或CSS。

在该网站中，导航（nav01 /菜单）和主体/主区域的预览是（大约由10px的）右移略。因此，而不是导航和主红色区域中的横幅图像/ BG线是他们向右侧偏移。我假设这是什么造成了水平滚动条（有大约额外的空格400像素的网站的右侧）。

我给自己定的利润为0，在特定的领域，但这些左，右页边距依然存在。

第二个问题是什么将成为一个隐藏的内容/下拉区域（当前可见）和下一页的分页器（滚动单页）。在这些情况下，PageDown键和隐藏的盒子，我指定的宽度为100％，但他们待在中间甚至没有延伸到实际的图像尺寸。

这些2个问题的任何帮助将不胜感激。我敢肯定它的东西简单，但我似乎无法尝试小时后找到它。

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

@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>
html css positioning
2个回答
0
投票

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

只需添加到您的css文件：

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

右侧的原因是400像素的<div id="info">标签。这个div得到了属性div {display: block}，它说在div并阻止全宽（由浏览器的默认值），可用通过屏幕尺寸。

然后你给它的CSS属性position: relative; left: 400px。这意味着，在div，如上面所说的，已经有充分的宽度加上400像素添加从左侧的空间。由于它的超标度。

更平滑的版本是改变leftinto padding，所以就变成：

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

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

最后，你在结束<标签之前该行有一个缺失</h3>symbol。

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

希望这有助于随时要求进一步的信息。

最好的问候，玛丽安。

2
投票

为了解决您的导航的第一个问题和身体被转移给body标签的margin:0px。这将其移回原位。

空白空间400像素由你有left:400px元素的#info引起的。

你的第二个问题是由padding-left引起的padding-right你有#main元素。删除这些，并给予width:100%到#main。家长现在孩子都填充页面的宽度。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.