Solved

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

Posted on 2011-03-02
2
234 Views
Last Modified: 2012-06-27
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
Comment
Question by:samic400
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 35031884
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
 
LVL 14

Accepted Solution

by:
ziffgone earned 500 total points
ID: 35032261
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question