Question

我设法在默认标题徽标旁边的我的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/

Answer 1

在#headbanner中，只需给浮动删除其他。

#headbanner{float:right;}
#search-top{float:right; clear:both;}

Answer 2

这就是你现在所拥有的。

#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>

标题图像造成巨大差距

2 个答案: