2013-12-12 7 views
1

작은 탐색을 만들었습니다. 더하기 기호를 클릭하면 애니메이션이 시작되고 드롭 다운 메뉴가 열립니다.어떻게 내 img의 위치를 ​​바꿀 수 있습니까?

하지만 CSS를 사용하여 요소를 배치 할 수있는 방법을 모릅니다. 나는 모든 종류의 조합을 시도했습니다. 아무도 내가 뭘 잘못하고 있는지 알아?

는 CSS입니다 :

body { 
    background-image: url(bg.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

html,body { 
    height: 100%; 
} 

.aspectwrapper { 
    display: inline-block; 
/* shrink to fit */ 
    width: 100%; 
/* whatever width you like */ 
    position: relative; 
/* so .content can use position: absolute */ 
} 

.aspectwrapper::after { 
    padding-top: 56.25%; 
/* percentage of containing block _width_ */ 
    display: block; 
    content: ''; 
} 

.content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
/* follow the parent's edges */ 
    outline: thin dashed green; 
/* just so you can see the box */ 
} 

#links { 
    position: relative; 
    left: 300px; 
} 

'링크'사업부가 전체 탐색 부분이있는 사업부입니다. 나는 그 div를 배치해야한다고 생각해.

는 HTML 코드입니다 :

<div class="aspectwrapper"> 
    <div class="content"> 
     <div class="links"> 
      <ul> 
       <li><a href="#ontwerp"><img height="20" src="1.png"></a></li> 

       <li><a href="#object"><img height="20" src="2.png"></a></li> 

       <li><a href="#bouwkunde"><img height="20" src="3.png"></a></li> 

       <li><a href="#contact"><img height="20" src="4.png"></a></li> 

       <li><a href="#winkel"><img height="20" src="5.png"></a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

나는 사람이 당신의 CSS에서 나에게

+0

내 대답이 문제를 해결 했습니까? –

답변

3

을 도울 수 있기를 바랍니다, 당신은 ID로 링크 클래스를 정의했다. 따라서, 변경 : http://jsfiddle.net/5Ejgx/

희망하는 데 도움이 :

#links { 
    position: relative; 
    left: 300px; 
} 

.links { 
    position: relative; 
    left: 300px; 
} 

에 여기에 바이올린입니다!

관련 문제