Question

我在创建一个网站的过程中很忙，而且目前似乎遇到了一个隐藏自我的徽标问题。

我不确定我做错了什么我在这里添加了我的HTML和CSS，所以希望有人可以告诉我我做错了。

我目前正在使用html5样板模板，但同时注释掉了代码，这是代码的html部分：

    <!--header --> 
    <div id="header">
    <div id ="logo"> 
            <h1><a href="index.html"></a></h1>
      </div>
      <div id= "hmenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Bar</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
      </div>    
</div>

这是标题和徽标及菜单的css代码：

body,#container
{   margin:0;
    border:0;
    height:100%;
    font:Arial, Helvetica, sans-serif;
    background:url(../Images/bgImg.png) repeat-x ;  
}

body > #container 
{
    height:auto;
    min-height:100%;
}   

#header
{
    background:url(../Images/hdBgImg.png);
    width:100%;
    height:115px;
}

#header #logo
{

     background:url(../Images/logo.png) no-repeat;
     width:272px;
     heigh:142px;
     cursor:pointer;
}   


#hmenu 
{
    font-size:38px;
    font-family:Tangerine, sans-serif;
    font-weight::bold;
    text-align:right;
    text-shadow:3px 2px 3px #333;
    border-radius:8px;
    position::absolute;
    top:10px;
    right:10px;


} 
#hmenu ul
{
    height:auto;
    padding:8px 10px;
    margin:0.1em;
}

#hmenu li
{
    display:inline;
    padding:20px;
}

#hmenu a
{
    text-decoration:none;
    color:#FFF;
    padding:8px 8px 8px 8px;
}

#hmenu a:hover
{
    color:#8AAB8E;
    back:#fff;
}

当我尝试添加徽标时，它会移动我的标题菜单，以及如何创建双徽标。

任何帮助都会非常感谢。

Answer 1

将heigh更改为height： -

#header #logo
{
 background:url(../Images/logo.png) no-repeat;
 width:272px;
 height:142px;
 cursor:pointer;
 display:block;
}

Answer 2

以前的CSS代码：

#header #logo
{
  background:url(../Images/logo.png) no-repeat;
  width:272px;
  heigh:142px;
  cursor:pointer;
}

建议修复

#header #logo
{
  background:url(../Images/logo.png) no-repeat;
  width:272px;
  height:142px;
  cursor:pointer;
}

让我分享一个更新的JSFIDDLE链接

你可以看到缺少的东西

Answer 3

#header #logo
{
     background:url(Images/1.png) no-repeat;
     width:272px;
     height:142px;
     cursor:pointer;
display: inline-block;

}

徽标没有显示在标题图像的顶部

3 个答案: