Text/Menu over an image

I would like to add a menu list over an image.  How do I do this.  Here is the current code:
<table width="100%" bgcolor="#FFFFFF" border="0">
 <tr>
  <td>
   <img src="Images/SBS.jpg" width = "100%">
  </td>
    <td align = "right" style="padding-right: 10px;">
		<!-- Home Button -->
		 <a href="index.php">Home</a> 
		<!-- End Home Button -->
		<!-- About  Button -->   
		<a href="about.php">About</a> 
		<!-- End About By Button -->
		<!-- Contact/ Request Demo Button -->  
		<a href="demo.php">Contact</a> 
		<!-- End About By Button -->          
		<!-- Retail Button --> 
		<a href="https:\\langsystems.net\Retail\index.php">Retail</a>
		<!-- End Retail Button -->                      
  </td>
 </tr>  
 </table>

Open in new window

I understand why it doesn't work but how do I do It.  You can see the screen at seabreezesoftware.com
breeze351Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Your table must be inside the <body>.  You have it in between the </head> and the <body> tags.  That's kind of like no-man's land.
0
Julian HansenCommented:
There are two approaches to this
1. Make your image a background
2. Make your image the content and put the menu text in a container that is positioned absolutely on the image

The problem you face is when your screen size changes - with a background image getting the height of your container to match the height of the resized image becomes a problem.

With the second option the image dimensions are determined by the width of the container. The positioned menu container then follows that. The only remaining trick is to center the menu vertically. That we can do with a css Transform.

Hint:
1. Don't use tables for layout
2. Put your styles in style section or a stylesheet - rather than inline
<!-- SOURCE LISTING ACTIVE -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<title>Title</title>
<style>
.menuContainer {
  position: relative;
}
.menuContainer img {
	width: 100%;
}
.menuContainer .menu {
	position: absolute;
	width: 100%;
	text-align: right;
	padding-right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.menuContainer .menu a {
	background: rgba(255,255,255,.5);
	padding: 10px;
	margin-left: 15px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="menuContainer">
	<img src="http://seabreezesoftware.com/Images/SBS.jpg">
	<div class="menu">
<!-- Home Button -->
		 <a href="index.php">Home</a> 
		<!-- End Home Button -->
		<!-- About  Button -->   
		<a href="about.php">About</a> 
		<!-- End About By Button -->
		<!-- Contact/ Request Demo Button -->  
		<a href="demo.php">Contact</a> 
		<!-- End About By Button -->          
		<!-- Retail Button --> 
		<a href="https:\\langsystems.net\Retail\index.php">Retail</a>
		<!-- End Retail Button -->                      
	</div>
</div>
</body>
</html>

Open in new window

0
breeze351Author Commented:
Yes your code worked.  I used the 2nd solutions.
I have 2 more  question on the same page.  
  1.  The <a href> labels have a blue bock around them and an underline. I would like to get rid of both and just have "white" text for them and move them down to the bottom of the image.
  2.  I want to move the image up to the very top.  I've tried to change the menu container to static, but the menu goes away.
"absolute" makes the text write over the menu.
 If you want to look it's "seabreezesoftware.com"

Thanks
Glenn
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
You need to post your code so we have a reference point.
0
breeze351Author Commented:
Here the code:
<?php
// **************************************************************
// * index.php                                                  *
// * Main Menu for seabreezesoftware.com                        *
// **************************************************************
// * Modifications:                                             *
// * Ver    By     Date      Description                        *
// * 4.00   CRL    03/30/17                                     *
// * 4.00a  GJJD   04/28/17  Clean up the shit & make it work.  *
// **************************************************************
	include 'Session_Start.php';
	$_SESSION['Message'] = '';
	$_SESSION['Error'] = "N";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<title>Sea Breeze Software, LCC</title>
<link rel="icon" href="Images/LSI_Icon.ico" type="image/png">
<style>
.menuContainer {
  position: relative;
}
.menuContainer img {
	width: 100%;
}
.menuContainer .menu {
	position: absolute;
	width: 100%;
	text-align: right;
	padding-right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.menuContainer .menu a {
	background: rgba(255,255,255,.5);
	margin-left: 15px;
}
div.transbox {
  margin: 30px;
  background-color: #ffefcf;
  border: 1px solid black;
  opacity: 0.8;
}

div.transbox p {
  margin: 5%;
  font-size:40px;
  font-weight: bold;
  color: #000000;
  align: center;
}
body { 
  background: url(Images/nyc1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
document.body.style.backgroundSize = "inherit";
 /* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
} 
</style>
<script type="text/javascript">
		var images=['Images/nyc1.jpg','Images/nyc2.jpg','Images/skyline_1.jpg','Images/nyc5.jpg','Images/nyc7.jpg','Images/nyc3.jpg','Images/nyc4.jpg','Images/nyc6.jpg','Images/skyline_2.jpg'];
var url=0;
setInterval(function(){
   url+=1;
  if(url==9){
    url=0;
  }
  document.body.style.backgroundImage = 'url('+images[url]+')';
  document.body.style.backgroundRepeat = "no-repeat";
},3000);
	</script>
</head>
<body>
<div class="wrapper">
<div class="menuContainer">
	<img src="http://seabreezesoftware.com/Images/SBS.jpg">
	<div class="menu">
<!-- Home Button -->
		 <a href="index.php">Home</a> 
		<!-- End Home Button -->
		<!-- About  Button -->   
		<a href="about.php">About</a> 
		<!-- End About By Button -->
		<!-- Contact/ Request Demo Button -->  
		<a href="demo.php">Contact</a> 
		<!-- End About By Button -->          
		<!-- Retail Button --> 
		<a href="https:\\langsystems.net\Retail\index.php">Retail</a>
		<!-- End Retail Button -->                      
	</div>
</div>

<div class="background">
<div class="transbox" align = "center"><p>Your Feet On The Ground Source For<br>New York City Retail Listings</p></div></div>
</body>
</html>

Open in new window

0
Julian HansenCommented:
Then you must style your buttons
Example
.menuContainer .menu a {
	background: rgba(255,255,255,.5); /* <== THIS PUTS THE BLOCK AROUND THE TEXT TO MAKE IT MORE VISIBLE. REMOVE IF NOT REQUIRED */
	margin-left: 15px;
	text-decoration: none; /* <== ADD THIS TO REMOVE UNDERLINE*/
	color: red; /* <== ADD THIS TO CHANGE COLOUR */
}

Open in new window


To "move your image up" this is caused by the default margin on the body element. To remove add this
body {
	margin: 0;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
breeze351Author Commented:
Thanks
0
Julian HansenCommented:
You are welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.