-1

How do I get the nav in the container (on top of a background photo) on the right spot? It's now outside on the left bottom corner... I positioned the nav on the right place but it will not work along with the image in the container.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>goodidea</title>
<link href="index.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 img.c1 {width:1024px;height:1500px}
</style>

</head>
<body>
<div id="container"><img src="images/photo-1.jpg" class="c1"/></div>
<ul id="nav">
<li><a href="#">photo-2</a></li>
<li><a href="#">photo-3</a></li>
<li><a href="#">photo-4<3/a></li>
<li><a href="#">photo-5</a></li>
</ul>
</body>
</html>


* {
    padding: 0;
    margin:0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 130%;
}

#container {
    width: 1080px;
    height: 2000px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
}

#nav { 
    list-style-type: none;
    padding-top: 170px!important; 
    padding-bottom: 13px; 
}

#nav a:link, #nav a:visited { 
    color: #000000; 
    padding-top: 13px; 
    padding-bottom: 13px; 
    text-decoration: none; 
} 

#nav a:hover, #nav a:active { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    color: #d2d2d2; 
    text-decoration: none; 
}

THNX for your Tip/Help

haim770
  • 48,394
  • 7
  • 105
  • 133
frankl
  • 1

1 Answers1

0

Hope this is what you are expecting. But as @MelanciaUK commented, ou should not use links out of the container class.

http://plnkr.co/edit/XSDrVmNmwsM2novVgm4T?p=preview

<div class='imagediv'>
  <img src="http://dummyimage.com/500x800/f5f0f5/d6d7e8.jpg" class="c1"/>
</div>
<ul id="nav" class='navlinks'>
  <li><a href="#">photo-2</a></li>
  <li><a href="#">photo-3</a></li>
  <li><a href="#">photo-4<3/a></li>
  <li><a href="#">photo-5</a></li>
</ul>
Rajeshwar
  • 2,290
  • 4
  • 31
  • 41
  • Indeed I intend an image filling the container. With each page I like to use a different photo. – frankl Jan 21 '15 at 17:57
  • The set up of Rajeshwar is the goal :) The nav is now under the image and the page is not centred. I'm working on it. – frankl Jan 21 '15 at 17:58
  • Rajeshwar, thnx a lot! I'm a newbee but with your help it worked out. – frankl Jan 21 '15 at 18:51
  • One little thing, in this solution the site will not be centred in the screen. I went through the site and tried several options but I didn't find the trick? – frankl Jan 21 '15 at 19:38
  • The positioning is based on absolute and relative. Hope this may help you. http://stackoverflow.com/questions/4457790/difference-between-style-positionabsolute-and-style-positionrelative – Rajeshwar Jan 22 '15 at 03:52