Solved

Need to display an image next to a menu.

Posted on 2013-12-28
9
196 Views
Last Modified: 2014-01-06
My partner modified this code.  My bad because I didn't save the original code.  The menu is in php.

Attached is the code for index.  

I know the code has to be cleaned up.  At this point, all I want to do is move the image next to the menu.

The site is "langsystems.net".

Thanks
Glenn

<<edit by padas>> Removed attachment added code box
<?php
session_start();
header("Cache-control: private");
error_reporting(E_ALL);
ini_set('display_errors', 1);

// ****************************************************
// * If login not set login for "Visitor"             *
// ****************************************************

if (!isset($_SESSION['Security']))
	{
		$_SESSION['User'] = 'xxxx';
		$_SESSION['Password'] = 'zzzz';
		$_SESSION['First_Name'] = 'Visitor';
		$_SESSION['Last_Name'] = 'Visitor';
		$_SESSION['E_Mail'] = '';
		$_SESSION['Security'] = 1;
		$_SESSION['P_Format'] = 1;
	}
	
// ****************************************************
// * Clear error messages and flag.                   *
// ****************************************************
	
	$_SESSION['Message'] = "";
	$_SESSION['Error'] = "N";		
	
// ****************************************************
// * Check to see if this it the orignal connection   *
// * to the database.                                 *
// ****************************************************
		
	if (!isset($_SESSION['Local_Name']))
		{
			$conn = mysql_connect('localhost', 'xxxx', 'zzzz');
			
		// ****************************************
		// * Select data base.                    *
		// ****************************************

			$db_selected = mysql_select_db('langsyst_login', $conn);
			if (!$db_selected)
			{
			    die ('Can\'t use foo : ' . mysql_error());
			}
			
		// ****************************************
		// * Login to database                    *
		// ****************************************
			
			$SqlString = "SELECT * FROM Default_Login WHERE NAME = 'xxxx' and PASSWORD = 'zzzzz'";
			$Query = $SqlString;
			$User_File = mysql_query($SqlString,$conn); 
			
		// ****************************************
		// * Initialize session variables.        *
		// ****************************************

			$ROW=mysql_fetch_array($User_File, MYSQL_BOTH);
			$_SESSION['Local_Name'] = $ROW["Local_Name"];
			$_SESSION['Local_Password'] = $ROW["Local_Password"];
			$_SESSION['Local_Database'] = $ROW["Local_Database"];
			$_SESSION['Local_Client'] = $ROW["Local_Client"];
			$_SESSION['Logo_Width'] = $ROW["Logo_Width"];
			$_SESSION['Logo_Height'] = $ROW["Logo_Height"];
			$_SESSION['Message'] = "";
			$_SESSION['Error'] = "N";		
	
		}
		
	$_SESSION['Menu_No'] = 1;		
	$_SESSION['Last_Page'] = "index.php";		
?>
<!doctype html>
<html lang="en"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1">
  
<link rel="stylesheet" type="text/css" href="NewCss.css">



<?php
// Menu  
include 'menu_inc.php';
?>

<table id="Table2"  bgcolor="#ffffdd" border="1" cellspacing="0" cellpadding="0" width="1227px" style="height: 223px;">

<tr>
	<td>
		<img src="Images/midtown.jpg" width="100%" height="10%" alt = "LeftImage">
	</td>
</tr>
</table>
</html>   

Open in new window

0
Comment
Question by:breeze351
[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
  • 4
  • 3
9 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39743956
> At this point, all I want to do is move the image next to the menu.

Which image and to the left or right?  It  actually looks fine the way it is if you mean the image directly below the menu.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39743959
I would still suggest cleaning up the top row of images so they shrink proportionally as the browser narrows.
0
 
LVL 11

Expert Comment

by:Gregory Miller
ID: 39743963
You might want to change you database password after this as well since you posted it in the php file attached. Just FYI...
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:breeze351
ID: 39745045
I'm trying to display the "map" next to the menu on the left.
0
 

Author Comment

by:breeze351
ID: 39748751
It's been 2 days with no response.
I'm not concerned about security on this site.  Everything is test data.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39748925
You issue is the coding on your site.  From the css, it even has a note about ie for mac which has not been around for a long time.   Here is a link to a working sample and updated code below.  http://jsbin.com/aVUfiWUF/1/

I have cleaned up some of the code to get it working.  The head tag was not closed, I think the body tag was out of order and the columns were not closed properly.  You still need to go through http://validator.w3.org/ and validate your code by pasting all of this or submitting the url on your own site. There are still a good handful of coding errors.   What I have give you is a good start.

I did not pay attention to any of the php, just the the rendered html from your site url.  You have php code that is including another file.  
<?php
// Menu  
include 'menu_inc.php';
?>

Open in new window

If you surf to that  url, http://langsystems.net/menu_inc.php whatever you see there is essentially a box.  You will not be able to put the map inside the box unless you either code the map in that file, or use javascript/jquery to place the map after the page loads.  

If you need to use include files, you would want to have one include file for the top row (logo and row of images).  Then another include for for the left side.

Your basic html would look something like this:

<div id="container">
     <div id="top">
          <!-- place your php include file here for the top -->
     </div>
     <div id="main">
          <div id="left_column">
                 <!-- place your php for the left nav and small image here -->
          </div>
          <div id="column_right">
                 <!-- this is your main area where the image goes -->
          </div>
</div>

Open in new window

If you can use the above as your guide, it should be that simple.  By using the include files for php, you can easily duplicate the top and  nav on all pages.  Later on, if you need to change the nav, you just change the include file for the nav in the one spot and upload and all the other pages will use it.  It is a good design if you use it correctly.  The current form was a bit off because it tried to load both the top and left at the same time.

Updated html below.
<!doctype html>
<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1">
	<!-- moved to style tag for testing <link rel="stylesheet" type="text/css" href="http://langsystems.net/NewCss.css"> -->
<style>
/* CSS definition file containing site wide stylesheets */

* { margin: 0; padding: 0; }   

/* not used
#wrapper 
	{ 
	width: auto; 
	margin: 0 auto;
	}
*/	
#header 
	{
	 width: auto;
	 color: white;
	}
	 
#column-left
	{
   width: 138px;
	height: 21;
	float: left;
	}
	
#column-center 
	{
	 background: yellow;
	}
	
#column-right
	{
	background: purple;
	float:left;
	}
	
#footer
	{
	 background: green;
	}
	 

#container 
	{
		width: 968px; 
		background: #FFF; 
		margin: 0 auto; 
		padding-left: 10px;
		padding-right: 10px; 
		overflow: hidden;
	}
#TextObject {
	border: 1px solid rgb(0,0,0)
}

#Body_Labels {
	font-family: Arial, Helvetica, Geneva, Sans-serif;
 	font-size: 16px;
 	font-weight: normal;
 	font-style: normal
}

#Space_Display {
	font-family: Arial, Helvetica, Geneva, Sans-serif;
 	font-size: 14px;
 	font-weight: normal;
 	font-style: normal
}
#Address {
   		font-family: Arial, Helvetica, Geneva, Sans-serif;
		text-align: left;
        font-size: 1.2em;
        font-weight: bold;
        color: #FF0000;
        
}

#Footer {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        background: #006600;
        color: #FF0;
}

#ErrorMessage {
        font-size: 1.2em;
        font-weight: bold;
        color: #FF0000;
        font-family: Arial, Helvetica, sans-serif;

}

#textboxalign{
	text-align:right;
	font-family: courier;
}

/* Fusion CSS style sheet */

p, pre, blockquote, h1, h2, h3, h4, h5, h6 li {
	line-height: 1.2;
	margin-top: 0px;	
	margin-bottom: 19px;
}

pre {
	font-family: 'Courier New', 'Lucida Console', Courier, Monaco, Monospace;
}

blockquote {
	margin-bottom: 21.28px;
	margin-left: 40px;
	margin-right: 40px;
}

address {
	line-height: 1.2;
	margin: 0px;
	font-style: italic;
}

h1 {
	font-size: 31px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 13px;
}
h6 {
	font-size: 10px;
}

ul {
	list-style-type: none;
	}

li { 
	list-style-type: none; 
	line-height: 65%;
	}
	
html, body, form {
	margin: 0px;
	padding: 0px;
}

.NavBar_ul {
	position: relative;
	margin: 0px;
	padding: 0px;
}
.NavBar_li {
	position: absolute;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.NavBar_a {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	text-decoration: none;
	display: block;
}

.nof-clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.nof-clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .nof-clearfix {height: 1%;}
.nof-clearfix {display: block;}
/* End hide from IE-mac */

.nof-positioning {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

.nof-navPositioning {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
}

.nof-navButtonAnchor {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	text-decoration: none;
}

.nof-ajaxTemplateHide {
	visibility:hidden;
	background-color:white;
	color:white;	
}

/* Site CSS style sheet */
BODY

{
	background-image : url( "background.gif" )

}



.nof_GlasgowTealSilverBanners1-Default

{

	font-family : Arial;
	font-size: 24px;
	font-weight : 700;
	font-style : normal;
	color : #008faf

}



.nof_GlasgowTealSilverNavbar4-Regular

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 400;
	font-style : normal;
	color : #008faf

}



.nof_GlasgowTealSilverNavbar5-Rollover

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 700;
	font-style : normal;
	color : #008faf

}



.nof_GlasgowTealSilverNavbar6-Highlighted

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 700;
	font-style : normal;
	color : #535251

}



.nof_GlasgowTealSilverNavbar7-HighlightedRollover

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 700;
	font-style : normal;
	color : #535251

}



.nof_GlasgowTealSilverNavbar9-Regular

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 400;
	font-style : normal;
	color : #008faf

}	


.nof_GlasgowTealSilverNavbar10-Rollover

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 700;
	font-style : normal;
	color : #008faf

}



.nof_GlasgowTealSilverNavbar11-Highlighted

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 700;
	font-style : normal;
	color : #535251

}



.nof_GlasgowTealSilverNavbar12-HighlightedRollover

{

	font-family : Trebuchet MS ;
	font-size: 11px;
	font-	weight : 700;
	font-style : normal;
	color : #535251

}




.nof_GlasgowTealSilverNavbar30-Regular 
{
	
font-family:MS Sans Serif ; font-size:14px; font-weight:400; 	font-style:normal; color:#000000 

}



.nof_GlasgowTealSilverNavbar30-Rollover 
{
	
font-family:MS Sans Serif ; font-size:14px; font-weight:400; 		font-style:normal; color:#000000 

}



.nof_GlasgowTealSilverNavbar30-Highlighted 
{

	font-family:MS Sans Serif ; font-size:14px; font-weight:400; 		font-style:normal; color:#000000 

}



.nof_GlasgowTealSilverNavbar30-HighlightedRollover 
{

	font-family:MS Sans Serif ; font-size:14px; font-weight:400; 		font-style:normal; color:#000000 

}

#main_image {
	background-color: #FF9;
}
#main_image {
	background-color: #FF0;
}
#main_image {
	background-color: ##ffffdd;
}
#main_image {
	background-color: #ffffdd;
	height: 376px;
	width: 968px;
}

/* Classes tags */

/* moved above 
.column-left 
	{
	width: 200;
	height: 21;
	float: left;
	}

.Body_Labels {
	font-family: Arial, Helvetica, Geneva, Sans-serif;
 	font-size: 16px;
 	font-weight: normal;
 	font-style: normal

}
*/	
</style>
	<!-- Java Scripts -->
	<script type="text/javascript">
	function F_loadRollover(){} function F_roll(){}
	</script>
	<script type="text/javascript" src="file:rollover.js">
	</script>
	<script type="text/javascript">
		function MM_goToURL() 
	{ 
	  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
	  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}
	</script>
	<script type="text/javascript">
	function go()
	  {
		  window.history.back()
	  }
	</script>

	<!-- End Java Scripts -->
</head>
	<body>
<!-- Screen Display -->
<div id="container">

<!-- Page Header -->

<div id = "header">
      <table  width="100%">
    <tr> 
          
          <!-- Logo on the left -->
          <td width = "20%"><img src="http://langsystems.net/logo.jpg" alt = "logo" width ="95%" height= "			120"></td>
          <!-- End Logo on the left --> 
          
          <!-- 1st Picture -->
          <td width = "10%"><img src = "http://langsystems.net/Chrysler_Building.jpg"  alt = "Chrysler" width ="100%" height= "120" ></td>
          <!-- End 1st Picture --> 
          
          <!-- 2nd Picture -->
          <td width = "10%"><img src = "http://langsystems.net/TradeCenter_Building.jpg" alt = "Trade" width ="100%" height= "120"></td>
          <!-- End 2nd Picture --> 
          
          <!-- 3rd Picture -->
          <td width = "10%"><img src = "http://langsystems.net/MetLife_Building.jpg" alt = "MetLife" width ="100%" height= "120"></td>
          <!-- End 3nd Picture --> 
          
          <!-- 4th Picture -->
          <td width = "10%"><img src = "http://langsystems.net/CitiGroup_Building.jpg" alt = "Citi" width ="100%" height= "120" ></td>
          <!-- End 4th Picture --> 
          
          <!-- 5th Picture -->
          <td width = "10%"><img src = "http://langsystems.net/RockCenter_Building.jpg" alt = "Rock" width ="100%" height= "120" ></td>
          <!-- End 5th Picture --> 
          
          <!-- 6th Picture -->
          <td width = "10%"><img src = "http://langsystems.net/One_Penn_Building.jpg" alt = "1Penn" width ="100%" height= "120" ></td>
          <!-- End 6th Picture --> 
          
          <!-- 7th Picture -->
          <td width = "10%"><img src = "http://langsystems.net/FlatIron_Building.jpg" alt = "FlatIron" width ="100%" height= "120" ></td>
          <!-- End 7th Picture --> 
          
          <!-- 8th Picture -->
          <td width = "10%"><img src = "http://langsystems.net/575Madison_Building.jpg" alt = "575Madison" width ="100%" height= "120" ></td>
          <!-- End 8th Picture --> 
        </tr>
  </table>
    </div>
<!-- End Header Display --> 

<!-- Menu Bar -->
<div id="main">
<div id = "column-left">
      <ul>
    
    <!-- Home/Menu Button -->
    <li> <a href="./index.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton1','',0);F_roll('NavigationButton1',1)" onMouseOut="F_roll('NavigationButton1',0)"><img id="NavigationButton1" name="NavigationButton1"  
        src="http://langsystems.net//Autogen/Menu_Hhighlighted_1.gif"			  border="0" alt="Menu" title="Menu"> </a> </li>
    <!-- End Home/Menu Button --> 
    
    <!-- Eclusive Button -->
    <li> <a href="./Exclusives.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton2','',0);F_roll('NavigationButton2',1)" onMouseOut="F_roll('NavigationButton2',0)"><img id="NavigationButton2" name="NavigationButton2"  
        src="http://langsystems.net//Autogen/Exclusives_Nregular_1.gif"			  border="0" alt="Exclusive" title="Exclusive"> </a> </li>
    
    <!-- End Exlusive Button --> 
    
    <!-- Address Search Button -->
    <li> <a href="./Address_Search.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton3','',0);F_roll('NavigationButton3',1)" onMouseOut="F_roll('NavigationButton3',0)"><img id="NavigationButton32" name="NavigationButton3"  
         src="http://langsystems.net//Autogen/Address_Search_NRregularRollover_1_1.gif"			  border="0" alt="Address_Search" title="Address Search"> </a> </li>
    <!-- End Address Search Button --> 
    
    <!-- Space Survey Button -->
    <li> <a href="/Space_Survey.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton4','',0);F_roll('NavigationButton4',1)" onMouseOut="F_roll('NavigationButton4',0)"><img id="NavigationButton4" name="NavigationButton4"  
         src="http://langsystems.net/Autogen/Space_Survey_NRregularRollover_1.gif"			  border="0" alt="Space_Survey" title="Space Survey"> </a> </li>
    <!-- End Space Survey Button --> 
    
    <!-- Walk By Button -->
    <li> <a href="http://langsystems.net//Walk_By_Map.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton5','',0);F_roll('NavigationButton5',1)" onMouseOut="F_roll('NavigationButton5',0)"><img id="NavigationButton5" name="NavigationButton5" 
        		 src="http://langsystems.net//Autogen/Walk_By_Map_NRregularRollover_1_1.gif"         onMouseOver="F_loadRollover(this,'Walk_By_Map_NRregularRollover_1_1.gif',0)" border="0" alt="Walk By Map" title="Walk By Map"> </a> </li>
    <!-- End Walk By Button --> 
    
    <!-- Tenant Search Button -->
    <li> <a href="index.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton6','',0);F_roll('NavigationButton6',1)" onMouseOut="F_roll('NavigationButton6',0)"><img id="NavigationButton6" name="NavigationButton6" 
			src="http://langsystems.net//Autogen/Tenant_Seach_NRregularRollover_1_1.gif"    
		 onMouseOver="F_loadRollover(this,' Tenant_Seach_NRregularRollover_1_1.gif'0)" border="0" alt="Tenant Search" title="Tenant Search"> </a> </li>
    <!-- End Tenant Search Button --> 
    
    <!-- Daily Activity Button -->
    <li> <a href="index.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton7','',0);F_roll('NavigationButton7',1)" onMouseOut="F_roll('NavigationButton7',0)"><img id="NavigationButton7" name="NavigationButton7" 
           src="http://langsystems.net//Autogen/Daily_Activity_NRregularRollover_1_1.gif" 
             onMouseOver="F_loadRollover(this,'Daily_Activity_NRregularRollover_1_1.gif',0)" border="0" alt="Daily_Activity" title="Daily Activity"> </a> </li>
    <!-- End Daily Activity Button --> 
    
    <!-- Logoff Button -->
    <li> <a href="Logoff.php" class="nof-navButtonAnchor" onMouseOver="F_loadRollover('NavigationButton8','',0);F_roll('NavigationButton8',1)" onMouseOut="F_roll('NavigationButton8',0)"><img id="NavigationButton8" name="NavigationButton8" 
				src="http://langsystems.net//Autogen/Logout_NRregularRollover_1.gif"  				onMouseOver="F_loadRollover(this,'Logout_NRregularRollover_1.gif',0)" border="0" alt="Logout" title="Logout"> </a> </li>
    <!-- End Logoff Button -->
    
  </ul>
      
      <!-- Umpire State Image --> 
      <img src = "http://langsystems.net/Empire_State_Building.jpg" alt = "Empire" width ="137" height = "165"> <font color = "black">
  <form name="LogIn" action="LoginChk.php" 			method="post">

      <table width = "125">
            <tr>
          <td>User ID: </td>
        </tr>
            <tr>
          <td><input name="UserID" id="UserID" type="text" value="" size="18" /></td>
        </tr>
            <tr>
          <td>Password: </td>
        </tr>
            <tr>
          <td><input name="Password" type="password" id="Password" value = "" size="18" /></td>
        </tr>
            <tr>
          <td>Hello Visitor</td>
        </tr>
            <tr>
          <td><input type="submit" name="Submit" value="Login" align = "center"></td>
        </tr>
          </table>
  
      </form>
  </font> 
  </div><!-- end column-left -->
<div id="column-right">
 <img src="http://langsystems.net/Images/midtown.jpg" width="300px"  alt = "map">
    </div><!-- end right -->
    </div><!-- end main -->
</body>
</html>

Open in new window

0
 

Author Comment

by:breeze351
ID: 39756476
I've uses the "validator" and it keeps coming up with the same error on several lines:

<div id = "Body_Labels">

I'll be damned if I can figure out where this is coming from.

Any ideas?

The "map image" now does display correctly to the right of the menu.

Thanks
Glenn
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39756636
>I've uses the "validator" and it keeps coming up with the same error on several lines:

To keep things on point, that should be a new thread or you can use the Bug Finder.  It is the white navigation link 3rd from the right. http://www.experts-exchange.com/BugFinder/

You can submit your site to bugfinder and just let Experts pick apart your site.   You would get comments from validation to usability to design.   If you really just want to concentrate on the validation, ask a new question and post your current URL.  At least try and go through some of the items on your own and explain what you tried and what has not worked.  Some issues are indirectly related to another such as not closing a tag.  Some issues are easy like adding an alt tag to an image.  

If you are using php to inject html, you will need to check that as well.  One error you had was

<script type="text/javascript" src="file:rollover.js">

The source can not be a file, at least not on the web.  The src should be something like
<script type="text/javascript" src="/path_to_my_js/rollover.js">
<script type="text/javascript" src="http://somesite.com/js/rollover.js">

The first option is best.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

630 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