基本上GunChester我的项目我有#login_top(顶部图像持有人)和3 CSS col的下面,#login_left,#login_centre和#login_right之间的几个像素宽的差距,这样我的第一个问题为什么?我该如何解决这个问题,这是FF,Chrome和IE。其次,BG图像似乎重叠两倍,如同在顶部拉伸,然后整个图像显示它应该。我确实有它的工作,但是当我尝试修复像素缺口时,我必须搞砸了一些东西,但不知道是什么,所以它现在变成了梨形,为这两种情况提供帮助:)?下面XHTML/CSS问题与像素差距
的CSS:
@charset "utf-8";
/*
Autoher: Chris Leah
Date: 20/04/2010
(C) GunChester.net/Chris Leah
HTML and Body CSS */
html, body {
background-image: url(../images/home/bg.png);
background-repeat: repeat-x;
background-color: #070a12;
text-align: center; /* for IE */
font-family: Verdana, Tahoma, Arial, sans-serif, Helvetica;
}
/* Wrapper div */
#wrapper {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
height: auto;
width: 932px;
margin-top:100px;
}
/* Logo div inside wrapper div */
#wrapper #logo {
position: relative;
height: auto;
width: auto;
text-align: center;
}
/* Wrapper login top div */
#wrapper #login_top {
position: relative;
height: auto;
width: auto;
float: left;
}
/* Wrapper login left div */
#wrapper #login_left {
float: left;
width: 259px;
position: relative;
}
/* Wrapper login centre div */
#wrapper #login_centre {
height: 152px;
width: 385px;
float: left;
background-color: #181F37;
background-image: url(../images/home/login_area.png);
}
/* Wrapper login right div */
#wrapper #login_right {
float: right;
width: 277px;
position: relative;
margin-right: 11px;
}
HTML下面网页...
<!DOCTYPE html>
<html>
<head>
<!-- Meta Info -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Page title -->
<title>GunChester - Free Online Gangster RPG!</title>
<!-- Link in CSS and JS files -->
<link href="../css/home.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Content wrapper div layer -->
<div id="wrapper">
<!-- Logo div layer -->
<div id="logo">
<img src="../images/home/header.png" width="799" height="256" />
</div>
<!-- Login top image div layer -->
<div id="login_top">
<img src="../images/home/login_top.png" width="932" height="68" alt="Login Box Top Image" />
</div>
<div id="login_left">
<img src="../images/home/login_left.png" width="259" height="152" alt="Login Left Image" />
</div>
<!-- Login centre div layer -->
<div id="login_centre">
test
</div>
<!-- Login right image div layer -->
<div id="login_right">
<img src="../images/home/login_right.png" width="277" height="152" alt="Login Right Image" />
</div>
</div>
</body>
</html>
我会尽力,谢谢。 – 2010-04-21 10:52:41