2014-07-09 2 views
-4

는 그림에서보세요. 여기원하지 않는 흰색 영역

#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

CSS 이외에도 HTML 마크 업을 공유하십시오 ... 또는 JSfiddle을 사용하면 더 많은 응답을 유도하는 데 도움이됩니다 (그러나 질문 게시에 코드를 포함하는 대신 사용해서는 안 됨). – JRulle

+0

Photoshop은 공백을 지울 수있는 유용한 도구를 제공합니다 이미지에서. O,하지만 HTML/CSS에 대한 도움이 필요하다면 PHP 코드가 아닌 데모를 게시해야합니다. –

답변

0

공간이 라인으로 인해 발생 :

margin-top: 50px 

.site_title 태그가 여기 내 CSS 코드입니다. 이 줄을 제거해야합니다. 당신이 정말로 이미지가 아니라 옆에 텍스트를 배치 할 경우, 이미지에

position: absolute | relative 

을 추가하고 상위 속성을 설정 - 당신이 얻고 싶은 정확히 무엇에 따라 달라집니다.