0

この問題を解決するにはどうすればよいですか。サイトに表示されるテキストで私のコードの主要部分を詰め込むと、最終的にスクロールバーが表示されます。下にスクロールすると、上部のバナーが繰り返されます。より多くのテキストでもう一度行うと、同じことが何度も繰り返されます。

これまでの私のコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>MC serverlist</title>
</head>

<body id="servers">

<div id="maincontainer">

<ul id="navlist">
    <li><a href="index.php" id="servers_nav">SERVERS</a></li>
    <li><a href="skins.php" id="skins_nav">SKINS</a></li>
    <li><a href="resource-packs.php" id="resource-packs_nav">RESOURCE PACKS</a></li>
    <li><a href="builds.php" id="builds_nav">BUILDS</a></li>
    <li><a href="mods.php" id="mods_nav">MODS</a></li>
    <li><a href="forum.php" id="forum_nav">FORUM</a></li>
</ul>



Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text

</div>

</body>
</html>

CSS コード

html, body {
  height: 100%;
  margin: 0;
  background: #A3A3A3;
  background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px,     transparent 140%);
}
#maincontainer {
  min-height: 100%;
  width: 960px;
  min-width: 600px;
  margin: auto;
  border: ridge;
  border-color: #919191;
  border-top: 0;
  border-bottom: 0;
  background: rgba(255,255,255,0.35);
  padding-left: 16px;
  padding-right: 16px;
}

ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
padding-top: 6px;
}

ul li {
float:left;
margin-right: 12px;
border: groove;
border-width: 2px;
border-color: #969696;
}

ul li a {
display:block;
padding-left: 5px;
padding-right: 5px;
height: 38px;
background-color:#7D7D7D;
text-align: center;
text-decoration: none;
line-height: 37px;
color: #EDEDED;
font-weight: bold;
font-family: impact;
font-size: 1.8em;
}

ul li:hover {
float:left;
margin-right: 12px;
border: ridge;
border-width: 2px;
border-color: #969696;
}

ul li a:hover {
color: white;
}

ul li a:active {
background-color: black;
}

オンライン コード テスターではなく、localhost で試してみてください。ありがとう

4

1 に答える 1

2

故障じゃない

これは予想される動作です。のデフォルトbackground-repeatは torepeatであるため、これは...

html, body {
  background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px,     transparent 140%);
}

...指定しない限り繰り返します...

html, body {
  background-repeat: no-repeat;
}

...画像サイズの終わりに達するたびに。

于 2013-07-06T01:01:22.763 に答える