看看图片:http://i.stack.imgur.com/jkK3u.jpg
我尝试创建一个浮动在标题图像上方的网站标题,但是有一个我无法删除的不需要的空间。这是我的CSS代码:
#header {
clear:both;
overflow:hidden;
z-index:1;
position:relative;
max-width:1130px;
margin:10px auto 0;
}
.site_title {
overflow:hidden;
margin-top:50px;
background-color:#c03;
height:40px;
width:50%;
float:left;
}
.st_hidden .site_title {
}
.site_title h1 {
float:left;
padding:0 0 0 10px;
font-size:28px;
font-family:'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
}
/*site title*/
.site_title h1 a {
color:#fff;
line-height:36px;
}
/* site title */
.site_title h1 .header_logo a {
overflow:hidden;
display:block;
width:100%;
height:36px;
text-indent:-9999px;
}
.site_title h2 {
float:left;
height:20px;
overflow:hidden;
line-height:18px;
padding:10px 0 0 20px;
color:#fff;
font-size:12px;
font-weight:normal;
}
/* site slogan*/
#header_image {
max-width:1130px;
max-height:182px;
margin-bottom:5px;
padding:1px;
border:2px solid #ccc;
margin-top:0px;
}
.st_hidden #header_image {
margin-top:5px;
}
#header_image_border {
overflow:hidden;
width:100%;
height:100%;
}
#header_image_border img {
width:100%;
height:100%;
}
这是我的HTML代码:
<div id="header"<?php if($zbench_options['hide_title']!='') echo ' class="st_hidden"'; ?>>
<?php $logo=''; if($zbench_options['logo_url']!='') $logo=' class="header_logo" style="background:url('.$zbench_options['logo_url'].') no-repeat 0 0"'; ?>
<div class="site_title">
<h1 <?php if($logo) echo $logo; ?>><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description');?></h2>
<div class="clear"></div>
</div>
<?php if ( get_header_image() != '' ) {
?>
<div id="header_image">
<div id="header_image_border">
<a href="<?php if($zbench_options['header_image_url']!='') { echo $zbench_options['header_image_url']; } else { echo home_url('/'); } ?>"><img src="<?php header_image(); ?>" width="1130" height="180" alt="" /></a>
</div>
</div>
<?php } ?>
</div>
答案 0 :(得分:0)
这个空间是由这一行引起的:
margin-top: 50px
<。>在.site_title标签中。你应该删除这一行。如果您想将文本放在图像上而不是旁边,请添加
position: absolute | relative
到图片并设置top属性 - 它取决于你想要得到的确切内容。