0
我正在更新一个我没有做的Wordpress网页，我不知道PHP。我无法将浮动图像添加到空页脚上方的页面底部。它应该看起来像它的顶部：影响彼此的两个div的CSS
CSS：
#uway-container {
margin: 0px 0 0 0;
overflow: visible;
background: url(images/background-top.png) no-repeat 0 0;
min-height: 250px;
position:relative;
z-index: 100;
}
我也有显示底部：
#test {
background-image: url('images/combinedFooter.png');
background-repeat: no-repeat;
margin: 0px 0px 0px 0px;
color: #000;
overflow: visible;
min-height: 300px;
position:relative;
z-index: 100;
}
当我添加这第二个代码/图像它创建这个额外的空间顶部：
当我尽量减少中间的内容的空间，它移动的底部了它：
这里是footer.php：
<?php
/**
* Footer Template
*
* The footer template is generally used on every page of your site. Nearly all other
* templates call it somewhere near the bottom of the file. It is used mostly as a closing
* wrapper, which is opened with the header.php file. It also executes key functions needed
* by the theme, child themes, and plugins.
*
* @package Hybrid
* @subpackage Template
*/
?>
<?php do_atomic('after_container'); // hybrid_after_container ?>
</div><!-- #container -->
<!-- </div> id="homepage-container"> -->
</div> <!--id="uway-container"> -->
<div id="spacer"></div>
<div id="footer-container">
<div id="test"></div>
<?php do_atomic('before_footer'); // hybrid_before_footer ?>
<div id="footer">
<?php do_atomic('footer'); // hybrid_footer ?>
</div><!-- #footer -->
<?php do_atomic('after_footer'); // hybrid_after_footer ?>
</div><!-- #footer-container -->
</div><!-- #body-container -->
<?php do_atomic('after_html'); // hybrid_after_html ?>
<?php wp_footer(); // wp_footer ?>
</body>
</html>
这里是完整的CSS，如果有帮助：
/* Get base CSS */
@import url('../hybrid/library/css/21px.css');
/* Get layout CSS */
@import url('../hybrid/library/css/2c-l-fixed.css');
/* Get plugins CSS */
@import url('../hybrid/library/css/plugins.css');
/* Get drop-downs CSS */
@import url('../hybrid/library/css/drop-downs.css');
/* Get default CSS */
@import url('../hybrid/library/css/screen.css');
body {
background:#000
}
h2 {
font-family: "Myriad Pro", arial;
}
.widget a {
color:#ffffff;
text-decoration: none;
font-family: "Myriad Pro", arial;
font-size: 100%;
}
.widget a:hover {
color:#0fffff;
}
/* header stuff */
#site-title {
float: right;
width: 440px;
height: 80px;
margin-top: 10px;
/* padding-right: 10px; */
}
#site-title a {
display: block;
width: 440px;
height: 80px;
background: url(images/CampaignLogo.png) no-repeat 0 0;
text-indent: -9999em;
margin-top: 10px;
/* padding-right: 10px; */
}
#site-description {
text-indent: -9999em;
height: 0px;
}
/* navigation info */
#primary-menu, #navigation {
position: absolute;
top: 28px;
padding-left: 10px;
margin:0 0 40px 0;
font-size: 1em;
z-index: 1000;
font-family: "Myriad Pro", arial;
}
#primary-menu li, #page-nav li {
margin-left:0px;
}
#primary-menu li li, #page-nav li li {
margin-right:0
}
#primary-menu li a, #page-nav li a {
padding:8px 6px 8px 6px;
color:#cfcccc;
background:#000;
background: url(images/MenuSlice.png) repeat-x;
border:1px solid #ccc;
border: none;
width: 165px;
}
#primary-menu li:hover a, #primary-menu li.sfHover a, #page-nav li:hover a, #page-nav li.sfHover a {
background: url(images/MenuSlice.png) repeat-x;
color:#111;
color:#cfcccc;
border:1px solid #ccc;
}
/* main body */
#body-container {
margin: 0 auto;
width: 1024px;
}
/* homepage large images info */
#homepage-container {
margin: 0px 0 10px 0;
overflow: visible;
position: relative;
/* background: url(images/Home3-BG.jpg) no-repeat 0 0; */
min-height: 773px;
}
/* site background info */
#uway-container {
margin: 10px 0 0 0;
overflow: visible;
background: url(images/background-top.png) no-repeat 0 0;
min-height: 250px;
position:relative;
z-index: 100;
}
#container {
margin: -90px 0 0 25px;
width: 980px;
background: rgb(227,221,221);
border-radius: 10px;
position: relative;
z-index: 50;
}
/* footer stuff*/
.widget {
color:#0fffff;
font-size: 15px;
}
#subsidiary h3 {
margin: 0 0 5px;
font-size: 15px;
}
#subsidiary .widget-title {
color: #0fffff;
}
#subsidiary .widget {
width: 315px;
margin:0 5px 0 20px;
}
#right-link {
padding-left: 110px;
}
#left-link {
padding-left: 50px;
}
#subsidiary {
margin: 90px 0 0px 0;
}
#test {
background-image: url('images/combinedFooter.png');
background-repeat: no-repeat;
overflow: visible;
min-height: 300px;
position:relative;
z-index: 100;
}
#footer-container {
margin: -5px 0px 0px 0px;
color: #000;
}
#footer .copyright {
margin: 0 0 0 20px;
float: none;
text-align: center;
display: block;
}
#header-container {
width: 1020px;
height: 110px;
}
#menu-container {
width: 980px;
}
.entry-content {
margin: 0px 10px 0 28px;
width: 920px;
}
.entry-content h2 {
margin: 0px 10px 10px 300px;
font-size: 2.5em;
line-height: 2em;
width: 920px;
color: #fdba45;
}
.entry-content h2#LessIndent {
margin: 0px 10px 10px 200px;
}
#content {
margin: 0px;
width: 980px;
background-image: url('images/ContentText.png');
background-repeat: repeat-y;
margin-top: 47px;
}
#content-wrapper {
background-image: url('images/ContentTop.png');
background-repeat: no-repeat;
min-height: 47px;
}
.page {
background: url('images/ContentBottomLarge.png') bottom left no-repeat;
min-height: 87px;
z-index: 501;
}
#primary {
margin-top: 10px;
}
.entry-title a {
margin-left: 28px;
}
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
/* header sections on coordinator resource page */
.Coord {
font-family: "Myriad Pro", arial;
color: #00529b;
font-size: 1.1em;
}
/* bullets for lists within content pages */
#content li {
background: url('images/BlueButton.png') left center no-repeat;
padding-left: 30px;
}
li.BlueButton {
margin-bottom: 15px;
}
li.BlueButton2 {
margin-bottom: 5px;
}
/* social icons */
#SocialIcons {
margin-top: 10px;
}
#SocialIcons a {
display: inline-block;
width:40px;
height:40px;
background-repeat:no-repeat;
background-position:0 0;
}
#FacebookIcon {
background-image:url('images/Facebook.png');
margin-left: 440px;
}
#TwitterIcon {
background-image:url('images/Twitter.png');
margin-left: 20px;
}
为此创建一个jsfiddle.net。难道你不能添加'top：300px;'，它与你现有的'position：relative'结合起来会把图形压低300px'。 – user1477388
这发生在客户端100％。你的服务器端PHP代码不能帮助任何人回答你的问题。显示你的HTML，而不是你的PHP。 –
我在哪里可以得到HTML？对不起，我是wordpress新手。 –