Is it possible to place PNG over navigation

Get Started
1

I am developing a site for a designer and his design calls for part of the image in the content area to lay on top of the navigation in one place. I have tried negative margins, and absolute positioning but either way, it makes the navigation inactive in that part as expected. Is there a way around this?

See attached image.

Many thanks,
Houston

2

Your image is still pending approval.

Try this:



<div>
   <img src="/afiles/images/billy_connolly_05.jpg" alt="blurb" />
   <ul style="display:inline-block; margin:-50px 0 0 -150px; background-color:#9ff">
      <li><a href="#1">one</a></li>
      <li><a href="#2">two</a></li>
      <li><a href="#3">three</a></li>
      <li><a href="#4">four</a></li>
   </ul>
</div>

<div style="width:333px; background: #cfc url(/afiles/images/billy_connolly_05.jpg) no-repeat">
   <ul>
      <li><a href="#1">one</a></li>
      <li><a href="#2">two</a></li>
      <li><a href="#3">three</a></li>
      <li><a href="#4">four</a></li>
   </ul>
</div>
3

Not sure I am following your code.

here is a link to the image that may show better what I am trying to do.
http://dl.dropbox.com/u/18576442/clarify/2014-06-20-00h04m/index.html

Many thanks,
Houston

4

If you are trying to get the links overlaid then try this:


<!DOCTYPE HTML> 
<html>
<head>
<title> title </title>   
<style type="text/css">
 #west  {width:755px; height:330px;  background: #cfc url(wentwood.png) no-repeat}
 #west ul {display:inline-block; margin:2em 0; list-style-type: none;}
 #west ul li  {float:left;} 
 #west ul li a:link {font-size:1.4em; color:red; padding:0 1em 0 0; font-weight:700;}
</style>
</head>
<body> 

<div id="west">
   <ul>
      <li> <a href="#1">one</a>   </li>
      <li> <a href="#2">two</a>   </li>
      <li> <a href="#3">three</a> </li>
      <li> <a href="#4">four</a>  </li>
   </ul>
</div>

</body>
</html>

Output:

5

It looks like you are trying to put the image as the background of the navigation which according to your code is to be 330px tall. That is too tall for the navigation area. Another thing I did not mention is that the image that i am tryign to get to overlay will change from time to time so I would prefer not to make it a code change in css. I really need to kep it as part of the content area.

Many thanks,
Houston

6

It looks like you are trying to put the image as the background of the navigation which according to your code is to be 330px tall. That is too tall for the navigation area.

I am under the impression that it is essential to have the image in the background
otherwise the menu will be hidden.
I purposely set a DIV background-colour and made the height
100px greater than the background image to illustrate the changes.

Another thing I did not mention is that the image that i am tryign to get to overlay will change from time to time so I would prefer not to make it a code change in css. I really need to kep it as part of the content area.

I do not understand your extra requirements, please supply a link to the page or include the page source.

7

If the content changes and the menu is fixed then try this:


<!DOCTYPE HTML> 
<html>
<head>
<title> title </title>   
<style type="text/css">
 #menu   {position:absolute; top:1.8em; left:0.5em;}
 #menu li  {float:left; list-style-type: none;} 
 #menu li a:link  {font-size:1.4em; padding:0 0.5em; font-weight:700;}
 #menu li a:link  {color:red; text-decoration:none;}
 #menu li a:hover {color:green; text-decoration: underline; background-color: #cff;}
</style>
</head>
<body> 

<div id="content">
  <img src="wentwood.png" style="margin:0" alt="west" />

  blurb goes here and here<br />
  blurb goes here and here<br />
  blurb goes here and here<br />
  blurb goes here and here<br />
  blurb goes here and here<br />
  blurb goes here and here<br />
</div>

<div id="menu" style="">
   <ul>
      <li> <a href="#1">one</a>   </li>
      <li> <a href="#2">two</a>   </li>
      <li> <a href="#3">three</a> </li>
      <li> <a href="#4">four</a>  </li>
   </ul>
</div>

</body></html>