个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 03:23:40 25 4
gpt4 key购买 nike

请注意导航使用 JS 以及页脚文本。其余的都是 HTML/CSS。如果需要，我可以显示 JS，但我认为这个问题要么出在 HTML 上，要么出在 CSS 上。

在网站预览中，导航(nav01/menu)和正文/主要区域稍微向右移动(大约 10px)。因此，导航和主要红色区域不是与横幅图像/背景对齐，而是向右偏移。我假设这就是导致水平滚动条的原因(网站右侧大约有 400 像素的额外空白区域)。

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

第二个问题是什么将成为隐藏内容/下拉区域(当前可见)和下一页的页面分隔符(滚动单页)。在每个实例中，pagedown 和 hidden box，我都将宽度指定为 100%，但它们仍然居中，甚至没有拉伸(stretch)到实际图像大小。

如果您能帮助解决这两个问题，我们将不胜感激。我确定它很简单，但经过数小时的尝试后我似乎无法找到它。

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

@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>

最佳答案

要解决您的第一个导航和正文移动问题，请为 body 标签提供一个 margin:0px。这会将它们移回原位。

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

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

关于html - 为什么我的背景不会重复 x 或拉伸(stretch)到全宽？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27474648/

25 4 0
文章推荐： javascript - 粘性导航，idk 发生了什么 :\
文章推荐： c - 使用 Xcode 时出现类似 "Conflicting types for ' move'"的错误
文章推荐： javascript - 将数据传递到自定义 npm 包模块
文章推荐： python - 如何让我的变量脱离这个循环？ - blender
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com