create an overlay on a background image in the middle of image

I have an image that is in my table cell and it is 1000 pixels wide by 200 pixels high.

I have another table cell, right below it that is 1000 pixels wide and 50 pixels high. This contains all of my drop down menu options and is a solid color of blue.

I would like to take my menu options and overlay the cell that contains the image instead of being below it, as it currently is.

How would I accomplish this? How would start a a specific position, like say position 100 instead of the very top of the cell that contains the image so it is in the middle of the cell that contains the image?

Really need a snippet of code to help.

Thanks in advance.
LVL 13
samic400Asked:
Who is Participating?
 
ziffgoneCommented:
Simply put them in the same cell.

Now, make sure the TD has a CSS "position:relative;" applied to it.

Now simply use a CSS "position:absolute" on your menu. You may have to contain your menu in a Div or P tag to make it work.

See attached code for example:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link rev="made" href="mailto:n/a" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="NoteTab Pro 6.12" />
  <meta name="author" content="Perry Wolf" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
<style type="text/css">
#main {margin:0px auto;width:1000px;}
#headermenu {position:relative;height:200px;width:1000px;background:#000000;}
#menu {position:absolute;top:80px;height:50px;width:1000px;margin:0px;line-height:50px;text-align:center;background:#333333;}
#menu a:link {color:#FFFFFF;font-weight:bold;text-decoration:none;}
#menu a:visited{color:#999999;font-weight:bold;text-decoration:none;}
#menu a:hover {color:#FFFFFF;font-weight:bold;text-decoration:underline;}
</style>
</head>

<body>

<table id="main" cellpadding="0" cellspacing="0" width="1000" align="center">
  <tr>
    <td id="headermenu">
       <p id="menu"> <a href="#">Menu Item 1</a> | <a href="#">Menu Item 2</a> | <a href="#">Menu Item 3</a> | <a href="#">Menu Item 4</a> | <a href="#">Menu Item 5</a></p>
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
SRigneyCommented:
I don't understand what you are asking.  Do you have a site you can show us, or at least an image that you can use to explain what you are talking about?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.