2013-12-12 5 views
1

Я сделал небольшую навигацию. Если вы нажмете на знак «плюс», начинается анимация и открывается раскрывающееся меню.как я могу поместить свой img вправо?

Но я не знаю, как я могу позиционировать элемент с помощью css. Я пробовал все виды op комбинаций. Кто-нибудь знает, что я делаю неправильно?

это 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> 

Я надеюсь, что кто-нибудь может помочь мне

+0

Был ли мой ответ исправить вашу проблему? –

ответ

3

В вашем CSS, вы определили класс ссылки в качестве идентификатора. Поэтому изменить:

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

в

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

Вот скрипку: http://jsfiddle.net/5Ejgx/

Надежда, что помогает!

Смежные вопросы