2014-07-13 2 views
0

내 탐색에 로고를 추가하려고하지만 조금 이상한 이유로 옆에있는 링크를 계속 노크하고 있습니다. 나는 시도조차 부동 소수점 왼쪽과 나는 그것이Logo Abit에서 노크 연결 유지

FIDDLE을하는 이유는 확실하지 오전 있도록 이미지를 다시 크기

<style> 
    #navigation { 
     position: fixed; 
     z-index: 1; 
     top: 0; 
     width: 100%; 
     color: #ffffff; 
     height: 35px; 
     text-align: center; 
     padding-top: 15px; 
     /* Adds shadow to the bottom of the bar */ 
     -webkit-box-shadow: 0px 0px 8px 0px #000000; 
     -moz-box-shadow: 0px 0px 8px 0px #000000; 
     box-shadow: 0px 0px 8px 0px #000000; 
     /* Adds the transparent background */ 
     background-color: rgba(1, 1, 1, 0.8); 
     color: rgba(1, 1, 1, 0.8); 
    } 
    #navigation a { 
     font-size: 14px; 
     padding-left: 15px; 
     padding-right: 15px; 
     color: white; 
     text-decoration: none; 
    } 
    #navigation a:hover { 
     color: grey; 
    } 
    ul { 
     list-style: none; 
     padding: 0px; 
     margin: 0px; 
    } 
    ul li { 
     display: block; 
     position: relative; 
     float: left; 
     border: 1px solid #000 
    } 
    li ul { 
     display: none; 
    } 
    ul li a { 
     display: block; 
     background: #000; 
     padding: 5px 10px 5px 10px; 
     text-decoration: none; 
     white-space: nowrap; 
     color: #fff; 
    } 
    ul li a:hover { 
     background: #f00; 
    } 
    li:hover ul { 
     display: block; 
     position: absolute; 
    } 
    li:hover li { 
     float: none; 
    } 
    li:hover a { 
     background: #000000; 
    } 
    li:hover li a:hover { 
     background: #000; 
    } 
    #drop-nav li ul li { 
     border-top: 0px; 
    } 
    #main_logo { 
     float: left; 
    } 
</style> 


<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
    <title>Static Navigation</title> 
</head> 


<div id="navigation"> 
    HAD THE IMG SRC TAG HERE 
    <text id="links"> 
     <a href="index.php">Home</a> 
     <a href="about.php">About</a> 
     <a href="social.php">Social</a> 

     <li style='display: inline-block;'><a href="#">Community</a> 
      <ul> 
       <li><a href="/forums">Forums</a> 
       </li> 
       <li><a href="/news">News </a> 
       </li> 
      </ul> 
     </li> 
     <li style='display: inline-block;'><a href="#">More</a> 
      <ul> 

       <li><a href="donate.php">Donate</a> 
       </li> 
       <li><a href="contact.php">Contact</a> 
       </li> 
      </ul> 
     </li> 
    </text> 
</div> 

나는 그것을 유지하려는 이동되는 것을 중지 할 수있는 다른 무엇 오른쪽 중앙에.

감사합니다.

+1

것은 jsfiddle.net – mplungjan

+0

을 확인하시기 바랍니다 문제는 중앙 http://jsfiddle.net/Spudster/ufWda/에 앉아 완벽하지 밀접가 보면 나에게 한 secound –

+0

을주지 가장 작은 로고 이잖아 :/ –

답변

0

이 CSS를 사용하여 이미지에 적용 해보세요. 당신은 링크가이 도움이 전혀

http://jsfiddle.net/EZx99/15/

희망을 이동하지 않으려면

.image { 
    left: 0%; 
    position: absolute; 
    width: 8%; 
} 

당신은 position: absolute;left: 0%;이 필요합니다.

+0

고마워;) 감사합니다;) 여전히 로고가없는 데 비해 오른쪽으로 몇 픽셀 이동하는 것 같지만 도움이 bit.now apllying 이미지 100px –

+0

센터에서 텍스트를 완벽하게 정렬 할 수 있도록 편집 된 바이올린 – link

+0

다시 한번 감사드립니다! ;) 10 분을 주면 시험해 보겠습니다. –