无法将背景图像添加到导航菜单后面的标题

时间:2012-12-02 00:46:42

标签: html css menu header

所以基本上,我试图在导航菜单后面添加一个图像。结果我甚至不能再将图像添加到标题中了?无论我如何尝试它都不会出现。甚至在此之前,当它显示时,标题图像出现在菜单上方,关于我正在寻找什么,而菜单是图像的“顶部”。

CSS

#dolphincontainer{position:relative; color:#E0E0E0;
padding-top:40px;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;;font-size:16px;text-transform:uppercase;font-    weight:bold;padding:0 0 0 60px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;margin-top:-22px;}
#dolphinnav ul li a{display:block;float:left;color:#3D3D3D;text-decoration:none;padding:8px;height:30px;width:60px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{background-color:#3D3D3D ;}
#dolphinnav ul li a:hover span{display:block;color:white;width:auto;cursor:pointer;}


#dolphinnav ul li a.current span{display:block;width:auto; no-repeat top right;height:33px;}

#dolphin_inner{color: white; padding: 5px; font-size: 80%; height: 1em}

#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{color:#fff}
#dolphin_inner a:hover{color: white}

body {background-color:#000000;}
#header {
background:url(images/header.png);
}




.innercontent{display: none;}

#footer_menu ul{
list-style: none;
margin: 0;
padding: 10px 0 0 10px;
position:absolute;bottom:50px;    
font-family:Helvetica,Arial,Verdana,sans-serif;
font-weight:bold;
font-size:12px;
}
#footer_menu ul li{
padding:0;
margin: 0 0 0 30px;
display:inline;


}
#footer_menu ul li a:link,a:visited,a:focus,a:active{
text-decoration:  none;
color: #3D3D3D;


}
#footer_menu ul li a:hover{
text-decoration:  none;
color: #fff; 
}

HTML

<body>

<div id"header">

<div id="dolphincontainer">
<div id="dolphinnav">
    <ul>
        <li><a href="index.html"><span>Home</span></a></li>
        <li><a href="about.html"><span>About</span></a></li>
    </ul>
</div>
<div id="dolphin_inner">
    <div id="about" class="innercontent"></div>
</div>
</div>
</div>
<script type="text/javascript">
//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 0)
</script>

1 个答案:

答案 0 :(得分:0)

一点点CSS应该可以解决问题:

 #dolphinnav{ background-image: url('image-url-relative-to-css.png');
              background-repeat: repeat-x; }

或不重复......