CODEWITHSUNDEEP
htmlcss
Sam Pirelli
Sam Pirelli

Reputation: 77

Text menu on a background image

I would like to create a text horizontal menu on a background image (e.g. similar to the top menu with logo on this website: http://bigtop.it). However, I have problems with positioning those text links relative to each other and to the background image. Here is the header part of css and html:

#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;
	}
	
<div id="wrapper">
  
	<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 class="cell"> 
        
	  </div>

I know that there are probably numerous ways of creating this kind of menu, but so far I cannot come up with any good one. Could you please advise me how this can be accomplished? Thank you!

Upvotes: 1

Views: 68

Answers (1)

Eduardo
Eduardo

Reputation: 36

See the solution in this link: 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>

Upvotes: 1

Related Questions