• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 239
  • Last Modified:

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.
0
samic400
Asked:
samic400
1 Solution
 
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
 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now