Hi all,

I was trying to position a menu over a picture (a transparant .png). Although I am able to get the menu links placed on the right position, zooming in or out breaks the created lay-out. As soon as I start zooming the menu starts drifting a bit over the page. How do I make sure the link stays on the exact spot I did put it at first? (I am a beginner so please forgive me any inefficenties in my code )

My html/css

<div id="menu">
<nav id="mainMenu">

<img id="TOP" src="_resources/Top.png" alt="">

<ul class="navmain">

<li><a href="Dwarsfluitles op maat.htm" title="Dwarsfluitles op maat" id="link1">Home</a></li>
<li><a href="Lesmethode.htm" title="Lesmethode" id="link2">Lesmethode</a></li>
<li><a href="Prijzen.htm" title="Prijzen" id="link3">Prijzen</a></li>



Corresponding CSS:

#wrap {
width: static;
height: 100%;
width: 1000px;
background: white;
margin-left: auto;
margin-right: auto;

/*Banner* --> placing the menu over this #TOP banner/

#TOP {
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;

/* Menu */
background: transparent;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;

ul.navmain li {
position: relative;
left: 360px;
top: -80px;
font-weight: bold;
font-size: 18px;
font-family: Courier, "Courier New", monospace;
padding: 0;

ul.navmain li #link1 {


ul.navmain li #link2 {

ul.navmain li #link3 {

} /*here I filled in postioning: absolute and I addid top: ..px and left..px to find the rights spot*/