我的网站存在大屏幕问题。这里是网站ifdauxzx5k.com我知道我知道我必须添加一个域，所以他们得到更好的seo我只需要在接下来的两天看起来好看，然后我将添加第二个域指向它。如果任何有大屏幕的人可以看看并帮助我的CSS修复它，以便我的图像不会滑动。我会感激不尽。
这是我的css：
@charset "utf-8";
/*My css stuff*/
body{
background:url('images/zombie_5k_TM_AP_stripped.png') top no-repeat;
}
.date{
position: absolute;
width: 450px;
height: 250px;
top: 277px;
left: 540px;
}
.qrcode{
position: absolute;
left: 923px;
top: 840px;
}
.home{
position: absolute;
width: 150px;
top: 275px;
left: 308px;
}
.register{
position: absolute;
width: 150px;
top: 317px;
left: 308px;
}
.sponsor{
position: absolute;
width: 150px;
top: 359px;
left: 308px;
}
.gallery{
position: absolute;
width: 150px;
top: 401px;
left: 308px;
}
table{
position: absolute;
top: -584px;
left: -105px;
clear: none;
width: 50opx;
}
td{
color: #D91D1F;
position: absolute;
}
.wrapper {
width: 500px;
}
h2 {
background-color: #dedede;
border-bottom: 1px solid #d4d4d4;
border-top: 1px solid #d4d4d4;
border-radius: 5px;
box-shadow: 3px 3px 3px #ccc;
color: #fff;
font-size: 1.1em;
margin: 12px;
padding: 0.3em 1em;
text-shadow: #9FBEB9 1px 1px 1px;
text-transform: uppercase;
}
.hdr-account { }
.hdr-address { }
.hdr-public-profile { }
.hdr-emails { }
fieldset {
background-color: #000000;
border: none;
border-radius: 1px;
margin-bottom: 2px;
overflow: hidden;
padding: 0 em; /* 10px/16px */
color: #D91D1F;
}
.tedit{
position: absolute;
left: 500px;
top: 265px;
width: 525px;
height: 766px;
}
.fields {
background-color: #000;
border: 0px solid #eaeaea;
}
.fields .row {
margin: 0.5em 0;
}
label {
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
.required { /* the asterisk */
color: red;
display: none;
}
input,
select,
button {
font: inherit;
}
.field-small {
width: 75px;
}
.field-medium {
width: 150px;
}
.field-large {
width: 250px;
}
select {
padding-right: 1em;
}
textarea {
font: inherit;
padding: 2px;
}
.instructions {
font-size: .75em;
padding-left: 167px;
font-style: italic;
margin: .5em 0 1.2em;
}
.instructions kbd {
font-size: 1.23em;
font-style: normal;
}
.btn {
background-color: #da820a;
border: none;
border-radius: 4px;
box-shadow: 2px 2px 2px #333;
color: #fff;
margin: 12px 0 0 26px;
padding: 8px;
text-shadow: 1px 1px 0px #777;
}
.btn-reset {
background-color: #8e5303;
color: #eee;
margin-left: 35px;
}
/* :::: Radio Buttons :::: */
.radios {
background-color: transparent;
position: relative;
margin-bottom: 0;
}
.radios .row {
margin: 0 0 0 150px;
}
.radios legend {
left: 0;
padding: 0 6px;
position: absolute;
text-align: right;
top: 2px;
width: 148px;
*width: 143px; /* a hack for IE7 */
}
.radios label {
padding-left: 2px;
margin-right: 5px;
vertical-align: middle;
width: auto;
}
/* :::: Checkboxes :::: */
.checkboxes label {
text-align: left;
width: 30px;
}
这是我的索引页面：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Firedepartment Zombie 5k Run</title>
</head>
<body>
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'" />
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="date">
<img src="images/date.png" alt="date of race"/>
</div>
<div class="qrcode">
<img src="images/qrcode.jpg" alt="qrcode" />
</div>
</body>
</html>
其余页面的风格相似。我需要做些什么来阻止页面上的东西移动。任何指针都将非常感激。
答案 0 :(得分：1)
我认为将一个div中的所有div包装在绝对位置将解决问题。另一个简单的解决方案是将所有div放在一个TABLE中。
.container{
position: absolute;
width: 100%;
height: auto;
top: 0px;
left: 50%;
margin-left: -50%;}
<body>
<div class="container">
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'" />
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="date">
<img src="images/date.png" alt="date of race"/>
</div>
<div class="qrcode">
<img src="images/qrcode.jpg" alt="qrcode" />
</div></div>
</body>
答案 1 :(得分：0)
您已将菜单放在div标签中，然后将僵尸作为身体的背景图像设置该图像，因此它们不会排列并不奇怪。
如果您希望它们排成一行，您应该执行以下操作：创建一个div标签，用于保存带有僵尸的背景图像，将其设置为适当的宽度和高度，居中，然后将僵尸图像设置为背景，如：
<body>
<div style="width:1020px; height:1020px; float:center; background-image:zombie.png">
<div class="home"> ... </div>
</div>
</body>