Solved

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

Posted on 2011-03-02
2
228 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

919 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now