为什么我的背景不会重复-x或伸展到全角？
[英]Why will my background not repeat-x or stretch to full width?
问题描述
Please note the nav utilises JS as well as the footer text. 
请注意，导航使用JS以及页脚文本。 The rest is all HTML/CSS. 其余的都是HTML / CSS。 I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS. 如果需要的话，我可以展示JS，但我相信这个问题可能在HTML或CSS上。
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). 在网站的预览中，导航（nav01 /菜单）和正文/主要区域向右微移（大约10px）。 So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. 因此，导航和主红色区域与横幅图像/背景对齐，而不是它们向右偏移。 I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website). 我假设这是导致水平滚动条的原因（网站右侧大约有400px的额外空白）。
I've set margins to 0 in the specific areas but these left and right margins remain. 我已将特定区域的边距设置为0，但这些左边距和右边距仍然保留。
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). 第二个问题是什么将成为隐藏的内容/下拉区域（当前可见）和下一页的页面分隔符（滚动单个页面）。 In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes. 在上述每种情况下（分页和隐藏框），我都将宽度指定为100％，但它们仍然居中，甚至不会拉伸到实际的图像大小。
Any help with these 2 problems would be appreciated. 与这两个问题的任何帮助将不胜感激。 I'm sure it's something simple but I just can't seem to find it after hours of trying. 我敢肯定这很简单，但是经过数小时的尝试，似乎还是找不到了。
.............................. ....................................
@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>
2 个解决方案
解决方案1
2 2014-12-14 22:38:41
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px . 要解决导航的第一个问题，并且要更改主体，请给body标签设置margin:0px 。 This will move them back into place. 这会将它们移回原位。
The 400px of blank space is caused by the left:400px you have on the #info element. 400px的空白由#info元素上的left:400px引起。
Your second issue is caused by the padding-left and padding-right you have on the #main element. 第二个问题是由#main元素上的padding-left和padding-right #main 。 Remove those, and give a width:100% to the #main . 删除那些，并给#main设置width:100% 。 The parent and now the child both fill the width of the page. 父级和子级都填满页面的宽度。
解决方案2
0 已采纳 2014-12-14 22:46:40
The first problem is quite simple. 第一个问题很简单。 All browser handle html tags differently, and most of the browsers for example have given the <body> a margin , which causes you the 10px. 所有浏览器对html标签的处理方式不同，例如，大多数浏览器都为<body>了margin ，这会导致您产生10px的像素。
Simply add this to your css file: 只需将其添加到您的css文件中：
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. 右侧400px的原因是您的<div id="info">标记。 This div got the attribute (set by the browsers default) div {display: block} , which says the div does block the full width, that is available by the screen size. 该div具有属性（由浏览器默认设置） div {display: block} ，它表示div确实会阻止整个宽度，该宽度可通过屏幕尺寸来使用。
Then you gave it the css attributes position: relative; left: 400px 然后给它css属性position: relative; left: 400px position: relative; left: 400px . position: relative; left: 400px 。 That means, that the div, as said above, already has the full width plus the 400px added as space from the left. 这意味着，如上所述，div已经具有完整宽度加上从左侧添加的400px作为空格。 Because of that its overscaled. 因此，它的规模过大。
A smoother version is to change the left into padding , so it becomes: 一个更平滑的版本是将left更改为padding ，因此它将变为：
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right) attributes on your #main div. 您的第二个问题是由#main div上的padding-(left/right)属性#main 。 You can simply remove them and your div gets the full width of the page. 您只需删除它们，您的div就会获得页面的完整宽度。
Last, you have got one missing < symbol in this line before the closing </h3> tag. 最后，在</h3>标记之前的这一行中，您缺少一个<符号。
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information. 希望这会有所帮助，随时询问更多信息。
Best regards, Marian. 最好的问候，玛丽安。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.