Solved

Need to display an image next to a menu.

Posted on 2013-12-28
9
185 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
  • 4
  • 3
9 Comments
 
LVL 52

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 52

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:Technodweeb
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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 

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 52

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 52

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IFRAME in a ASPX file no longer working 3 35
Link a VBS to an HTA 6 36
Make Line Items Look Good Over Mobile 2 60
If condition on Html with Asp 11 17
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 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