2012-12-02 2 views
1

기본적으로 내 탐색 메뉴 뒤에 이미지를 추가하려고합니다. 머리카락에 이미지를 더 이상 추가 할 수 없다고해도 나에게 끝이났다. 아무리 시도해도 나타나지 않습니다. 이전에도 메뉴가 보이지 않았을 때 헤더 이미지가 메뉴 위에 나타났습니다. 반면에 메뉴는 이미지의 "상단"에 있습니다.navmenu 뒤의 머리글에 backround 이미지를 추가 할 수 없습니다.

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> 

답변

0

트릭해야 약간의 CSS :

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

또는 노 - 반복 ....

,
+0

아직도 아무것도 ... 나는 내가 볼 수없는 뭔가가 있다는 것을 알고 있지만, 좋아, 나는 한 시간 동안 이것을 할 것입니다. 하하. 방화 광구로 확인하면 파일 경로를 찾을 수 없다는 메시지가 몇 시간 동안 계속되고 있습니다. –

+0

어쨌든 이제 파일 경로를 찾아 FireBug 내에 그림을 표시하지만 웹 사이트에는 아무것도 표시하지 않습니다. –

+0

또 다른 업데이트. 'display : table;'을 추가하여 'no-repeat-x;'후에 이미지가 나타나면 'width : 100 %'가 추가되어 전체 화면에서 가로 방향으로 늘어납니다. 하지만 그것은 수직적으로 작습니다. 아마도 내 메뉴의 글자를 덮을 것입니다. 아마도 4 배의 공간을 차지할 때입니다. –

관련 문제