Текстовое меню на фоновом изображении

Question

Я хотел бы создать текстовое горизонтальное меню на фоновом изображении (например, похожее на верхнее меню с логотипом на этом сайте: http://bigtop.it). Однако у меня возникают проблемы с позиционированием этих текстовых ссылок относительно друг друга и фонового изображения. Вот заголовок часть CSS и HTML:

#header { 
 
    
 
\t background-image: url(http://s6.postimg.org/3osi1wfld/starmenu.png); 
 
\t 
 
    margin-left: auto; 
 
\t margin-right: auto; 
 
\t 
 
    height: 299px; 
 
\t width: 893px; 
 
    
 
\t background-position: 50% 50%; \t 
 
\t background-repeat: no-repeat; 
 
    
 
    text-align: center; 
 

 
} 
 

 
a.header:link { 
 
\t color: #000000; 
 
\t font-family: passion-one; 
 
\t font-size: 24px; 
 
\t text-decoration: none; 
 
\t font-weight: 200; 
 
\t font-style: normal; 
 
\t } 
 
a.header:visited { 
 
\t color: #000000; 
 
\t font-family: passion-one; 
 
\t font-style: normal; 
 
\t font-weight: 200; 
 
\t font-size: 24px; 
 
\t text-decoration: none; 
 
\t } 
 
a.header:hover { 
 
\t color: #348AFF; 
 
\t font-family: passion-one; 
 
\t font-style: normal; 
 
\t font-weight: 200; 
 
\t text-decoration: none; 
 
\t font-size: 24px; 
 
\t } 
 
\t 
 
a.header:active { 
 
\t font-family: passion-one; 
 
\t color: #348AFF; 
 
\t font-weight: 200; 
 
\t font-size: 24px; 
 
\t font-style: normal; 
 
\t } 
 
\t

<div id="wrapper"> 
 
    
 
\t <div class="row" id="header"> 
 
    
 
<div class = "row" id="menu"> 
 

 
<a href="somepage.html" class="header">HOME</a> 
 

 
<a href="somepage.html" class="header">PORTFOLIO</a> 
 

 
<a href="somepage.html" class="header">MEDIA</a> 
 

 
<a href="somepage.html" class="header">CONTACT </a> 
 

 

 
</div> 
 

 
\t <div class="cell"> 
 
     
 
\t </div>

Я знаю, что есть, вероятно, множество способов создания такого рода меню, но до сих пор я не могу придумать любой хороший. Не могли бы вы посоветовать мне, как это можно сделать? Спасибо!

Answer 1

Смотрите решение в этой ссылке: http://codepen.io/anon/pen/KpGVBg

<div class="row" id="header"> 
    <div class="row" id="menu"> 
     <a href="somepage.html" class="header">HOME</a> 
     <a href="somepage.html" class="header">PORTFOLIO</a> 
     <a href="somepage.html" class="header">MEDIA</a> 
     <a href="somepage.html" class="header">CONTACT </a> 
    </div> 
</div> 

<style> 
#header { 
background-image: url(http://s6.postimg.org/3osi1wfld/starmenu.png); 
margin-left: auto; 
margin-right: auto; 
height: 299px; 
width: 893px; 
background-position: 50% 50%; 
background-repeat: no-repeat; 
text-align: center; 
} 

a.header:link { 
color: #000000; 
font-family: passion-one; 
font-size: 24px; 
text-decoration: none; 
font-weight: 200; 
font-style: normal; 
} 

a.header:visited { 
color: #000000; 
font-family: passion-one; 
font-style: normal; 
font-weight: 200; 
font-size: 24px; 
text-decoration: none; 
} 

a.header:hover { 
color: #348AFF; 
font-family: passion-one; 
font-style: normal; 
font-weight: 200; 
text-decoration: none; 
font-size: 24px; 
} 

a.header:active { 
font-family: passion-one; 
color: #348AFF; 
font-weight: 200; 
font-size: 24px; 
font-style: normal; 
} 

#menu { 
margin-left: 40px; 
position: absolute; 
top: 175px; 
} 

.row a { 
margin: 0 20px 0 40px; 
} 

.row a:nth-child(3) { 
margin-left: 180px; 
} 
</style>