Solved

Need to display an image next to a menu.

Posted on 2013-12-28
9
180 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
Comment Utility
> 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
Comment Utility
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
Comment Utility
You might want to change you database password after this as well since you posted it in the php file attached. Just FYI...
0
 

Author Comment

by:breeze351
Comment Utility
I'm trying to display the "map" next to the menu on the left.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:breeze351
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

771 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

15 Experts available now in Live!

Get 1:1 Help Now