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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
 
breeze351Author Commented:
Thanks
0
 
Julian HansenCommented:
You are welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.