0

デフォルトのヘッダー ロゴの横にある woostore テーマのヘッダーに表示されるように作成した画像を取得することができましたが、画像とページの上部の間に大きなギャップが生じており、これが実際に発生していると思います何とかロゴで。私はコーディングが苦手で、ちょっと試行錯誤しただけなので、どなたか見て、どうすればよいか教えていただけないでしょうか?

特定のヘッダー コードは次のとおりです。

<?php } ?>

 <div id="header" class="col-full">

 <div id="logo">
 <div id="headbanner" style="height:500px; width:186px; position:relative; top:500px; left:275px;">
 <img src="http://aggidukes.co.uk/store/wp-content/uploads/2013/04/Store-header-Image.png" alt="Official Store" /></div>

サイトアドレス: http://aggidukes.co.uk/store/

4

2 に答える 2

0

#headbanner では、float を与えるだけで他を削除します。

#headbanner{float:right;}
#search-top{float:right; clear:both;}
于 2013-04-11T13:40:10.557 に答える
0

これはあなたが現在持っているものです。

#headerbanner{
  height: 500px;
  width: 186px;
  position: relative;
  top: 500px;
  left: 275px;
}

これを次のように変更します。

#headerbanner{
  float: left;
  margin: 0 0 0 198px;
}

id "Logo" の div を 100% 幅にします。

<div id="logo" style="&nbsp; &nbsp; width: 100%;">                                  
</div>

また、ロゴとヘッダー バナーを並べ替える必要があります。

<a href="http://aggidukes.co.uk/store/" title="" style="float: left;"><img src="http://aggidukes.co.uk/store/wp-content/uploads/2013/03/Logo.png" alt="Aggidukes Official Store"></a>
<div id="headbanner" style="float: left; margin: 0 0 0 198px;"><img src="http://aggidukes.co.uk/store/wp-content/uploads/2013/04/Store-header-Image.png" alt="Official Store"></div>

ロゴをラップするリンクは「float:left;」にする必要があります。

最終結果は次のようになります

<div id="header" class="col-full">
  <div id="logo" style="width: 100%;"> <a href="http://aggidukes.co.uk/store/" title="" style="float: left;"> <img src="http://aggidukes.co.uk/store/wp-content/uploads/2013/03/Logo.png" alt="Aggidukes Official Store"></a>
    <div id="headbanner" style="float: left;  margin: 0 0 0 198px;"> <img src="http://aggidukes.co.uk/store/wp-content/uploads/2013/04/Store-header-Image.png" alt="Official Store"></div>
    <h1 class="site-title"><a href="http://aggidukes.co.uk/store/">Aggidukes Official Store</a></h1>
    <span class="site-description"></span> </div>
  <!-- /#logo -->
  <div id="search-top">
    <form role="search" method="get" id="searchform" class="searchform" action="http://aggidukes.co.uk/store">
      <label class="screen-reader-text" for="s">Search for:</label>
      <input type="text" value="" name="s" id="s" class="field s" placeholder="Search">
      <input type="image" class="submit btn" name="submit" value="Search" src="http://aggidukes.co.uk/store/wp-content/themes/woostore/images/ico-search.png">
      <input type="hidden" name="post_type" value="product">
    </form>
    <div class="fix"></div>
  </div>
  <!-- /.search-top --> 
</div>
于 2013-04-11T13:59:06.610 に答える