Solved

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

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 …
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 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

19 Experts available now in Live!

Get 1:1 Help Now