Problem with CSS/Java graphic placement

[mikex]

Hey everyone.. I'm quite new at this webdesign thing but I was wondering if you could solve this problem I've been having.

I'm using Studio 8 to design a website.

I created a mockup... and used the slice tool to create the different parts of my site.

I also used Fireworks to create a nav bar system that will be displayed at the left hand part of the page. The problem is when I try to copy the code from the .htm file into a table I set up for the bar... the table either bumps all the graphics in the tables around it or the navbar shoots down too many lines. I can't figure out how to fix this. Any suggestions would be great!!!

-Mike

 

[iNod]

Could you upload a demo or example of your website so I can give it a checkout?

- Steve

 

[mikex]

Once my new DNS propogates I'll host the whole thing for you guys... but for now all I can do is post the code and images separately... so here you go.

<style type="text/css" media="screen">
	@import url("./navbar.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>

<div id="FWTableContainer2064550839"> <img name="navbar" src="navbar.jpg" width="163" height="229" border="0" id="navbar" usemap="#m_navbar" alt="" />
    <map name="m_navbar" id="m_navbar">
      <area shape="rect" coords="0,196,163,226" href="http://www.tocny.org/police/new/contact_us.html" alt="" />
      <area shape="poly" coords="0,172,163,172,163,197,0,197,0,172" href="http://www.tocny.org/police/new/reverse911.html" alt="" />
      <area shape="poly" coords="0,148,163,148,163,173,0,173,0,148" href="http://www.tocny.org/police/new/sex_offender.html" alt="" />
      <area shape="poly" coords="0,124,163,124,163,149,0,149,0,124" href="http://www.tocny.org/police/new/general_information.html" alt="" onMouseOut="MM_menuStartTimeout(0);"  onMouseOver="MM_menuShowMenu('MMMenuContainer0818014421_0', 'MMMenu0818014421_0',163,124,'navbar');"  />
      <area shape="poly" coords="0,101,163,101,163,126,0,126,0,101" href="http://www.tocny.org/police/new/new.html" alt="" />
      <area shape="poly" coords="0,77,163,77,163,102,0,102,0,77" href="http://www.tocny.org/police/new/crime_resistance_unit.html" alt="" onMouseOut="MM_menuStartTimeout(0);"  onMouseOver="MM_menuShowMenu('MMMenuContainer0818012537_0', 'MMMenu0818012537_0',163,77,'navbar');"  />
      <area shape="poly" coords="0,53,163,53,163,78,0,78,0,53" href="http://www.tocny.org/police/new/divisions.html" alt="" onMouseOut="MM_menuStartTimeout(0);"  onMouseOver="MM_menuShowMenu('MMMenuContainer0818012208_1', 'MMMenu0818012208_1',163,53,'navbar');"  />
      <area shape="poly" coords="0,29,163,29,163,54,0,54,0,29" href="http://www.tocny.org/police/new/chief.html" alt="" />
      <area shape="rect" coords="0,0,163,30" href="http://www.tocny.org/police/new/index.html" alt="" />
    </map>
    <div id="MMMenuContainer0818014421_0">
      <div id="MMMenu0818014421_0" onMouseOut="MM_menuStartTimeout(0);" onMouseOver="MM_menuResetTimeout();"> <a href="http://www.tocny.org/police/new/history.html" id="MMMenu0818014421_0_Item_0" class="MMMIFVStyleMMMenu0818014421_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818014421_0');"> History </a> <a href="http://www.tocny.org/police/new/recruitment.html" id="MMMenu0818014421_0_Item_1" class="MMMIVStyleMMMenu0818014421_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818014421_0');"> Recruitment </a> <a href="http://www.tocny.org/police/new/sex_offender.html" id="MMMenu0818014421_0_Item_2" class="MMMIVStyleMMMenu0818014421_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818014421_0');"> Sex Offender Registry </a> <a href="http://www.tocny.org/police/new/reverse911.html" id="MMMenu0818014421_0_Item_3" class="MMMIVStyleMMMenu0818014421_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818014421_0');"> Reverse 911 System </a> <a href="http://www.tocny.org/police/new/transitions.html" id="MMMenu0818014421_0_Item_4" class="MMMIVStyleMMMenu0818014421_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818014421_0');"> Transitions </a> <a href="http://www.tocny.org/police/new/links.html" id="MMMenu0818014421_0_Item_5" class="MMMIVStyleMMMenu0818014421_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818014421_0');"> Links </a> </div>
    </div>
  <div id="MMMenuContainer0818012537_0">
      <div id="MMMenu0818012537_0" onMouseOut="MM_menuStartTimeout(0);" onMouseOver="MM_menuResetTimeout();"> <a href="http://www.tocny.org/police/new/neighborhood_watch.html" id="MMMenu0818012537_0_Item_0" class="MMMIFVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Neighborhood Watch </a> <a href="http://www.tocny.org/police/new/business_community_page.html" id="MMMenu0818012537_0_Item_1" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Bussiness Community Page </a> <a href="http://www.tocny.org/police/new/citizens_police_academy.html" id="MMMenu0818012537_0_Item_2" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Citizen's Police Academy </a> <a href="http://www.tocny.org/police/new/explorers.html" id="MMMenu0818012537_0_Item_3" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Explorers </a> <a href="http://www.tocny.org/police/new/executive_board.html" id="MMMenu0818012537_0_Item_4" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Executive Board </a> <a href="http://www.tocny.org/police/new/interns.html" id="MMMenu0818012537_0_Item_5" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Interns </a> <a href="http://www.tocny.org/police/new/do_the_right_thing.html" id="MMMenu0818012537_0_Item_6" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Do The Right Thing Program </a> <a href="http://www.tocny.org/police/new/crime_prevention.html" id="MMMenu0818012537_0_Item_7" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Crime Prevention </a> <a href="http://www.tocny.org/police/new/anonymous_tip.html" id="MMMenu0818012537_0_Item_8" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> Send an Anonymous Crime Tip </a> <a href="http://www.tocny.org/police/new/dare.html" id="MMMenu0818012537_0_Item_9" class="MMMIVStyleMMMenu0818012537_0" onMouseOver="MM_menuOverMenuItem('MMMenu0818012537_0');"> D.A.R.E </a> </div>
  </div>
  <div id="MMMenuContainer0818012208_1">
      <div id="MMMenu0818012208_1" onMouseOut="MM_menuStartTimeout(0);" onMouseOver="MM_menuResetTimeout();"> <a href="http://www.tocny.org/police/new/administrative.html" id="MMMenu0818012208_1_Item_0" class="MMMIFVStyleMMMenu0818012208_1" onMouseOver="MM_menuOverMenuItem('MMMenu0818012208_1');"> Administrative Division </a> <a href="http://www.tocny.org/police/new/patrol.html" id="MMMenu0818012208_1_Item_1" class="MMMIVStyleMMMenu0818012208_1" onMouseOver="MM_menuOverMenuItem('MMMenu0818012208_1');"> Patrol Division </a> <a href="http://www.tocny.org/police/new/investigative.html" id="MMMenu0818012208_1_Item_2" class="MMMIVStyleMMMenu0818012208_1" onMouseOver="MM_menuOverMenuItem('MMMenu0818012208_1');"> Investigative Division </a> <a href="http://www.tocny.org/police/new/information.html" id="MMMenu0818012208_1_Item_3" class="MMMIVStyleMMMenu0818012208_1" onMouseOver="MM_menuOverMenuItem('MMMenu0818012208_1');"> Information Division </a> </div>
  </div>
</div>

var mmOpenContainer = null;
var mmOpenMenus = null;
var mmHideMenuTimer = null;

function MM_menuStartTimeout(hideTimeout) {
	mmHideMenuTimer = setTimeout("MM_menuHideMenus()", hideTimeout);	
}

function MM_menuHideMenus() {
	MM_menuResetTimeout();
	if(mmOpenContainer) {
		var c = document.getElementById(mmOpenContainer);
		c.style.visibility = "inherit";
		mmOpenContainer = null;
	}
	if( mmOpenMenus ) {
		for(var i in mmOpenMenus) {
			var m = document.getElementById(mmOpenMenus[i]);
			m.style.visibility = "hidden";			
		}
		mmOpenMenus = null;
	}
}

function MM_menuHideSubmenus(menuName) {
	if( mmOpenMenus ) {
		var h = false;
		var c = 0;
		for(var i in mmOpenMenus) {
			if( h ) {
				var m = document.getElementById(mmOpenMenus[i]);
				m.style.visibility = "hidden";
			} else if( mmOpenMenus[i] == menuName ) {
				h = true;
			} else {
				c++;
			}
		}
		mmOpenMenus.length = c+1;
	}
}

function MM_menuOverMenuItem(menuName, subMenuSuffix) {
	MM_menuResetTimeout();
	MM_menuHideSubmenus(menuName);
	if( subMenuSuffix ) {
		var subMenuName = "" + menuName + "_" + subMenuSuffix;
		MM_menuShowSubMenu(subMenuName);
	}
}

function MM_menuShowSubMenu(subMenuName) {
	MM_menuResetTimeout();
	var e = document.getElementById(subMenuName);
	e.style.visibility = "inherit";
	if( !mmOpenMenus ) {
		mmOpenMenus = new Array;
	}
	mmOpenMenus[mmOpenMenus.length] = "" + subMenuName;
}

function MM_menuResetTimeout() {
	if (mmHideMenuTimer) clearTimeout(mmHideMenuTimer);
	mmHideMenuTimer = null;
}

function MM_menuShowMenu(containName, menuName, xOffset, yOffset, triggerName) {
	MM_menuHideMenus();
	MM_menuResetTimeout();
	MM_menuShowMenuContainer(containName, xOffset, yOffset, triggerName);
	MM_menuShowSubMenu(menuName);
}

function MM_menuShowMenuContainer(containName, x, y, triggerName) {	
	var c = document.getElementById(containName);
	var s = c.style;
	s.visibility = "inherit";
	
	mmOpenContainer = "" + containName;
}

td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
	display: block;
}

#FWTableContainer2064550839 {
/* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */
	position:relative;
	margin:0px;
	width:163px;
	height:229px;
	text-align:left;
}

#MMMenuContainer0818014421_0 {
/* This ID is related to the master menu div for menu MMMenuContainer0818014421_0 and contains the important positioning information for the menu as a whole */
	position:absolute;
	left:163px;
	top:124px;
	visibility:hidden;
	z-index:300;
}

#MMMenu0818014421_0 {
/* This class defines things about menu MMMenu0818014421_0's div. */
	position:absolute;
	left:0px;
	top:0px;
	visibility:hidden;
	background-color:#555555;
	border:1px solid #555555;
	width:150px;
	height:151px;
}

.MMMIFVStyleMMMenu0818014421_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0818014421_0 */
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	width:150px;
	height:26px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:142px;
	height:18px;
}

.MMMIVStyleMMMenu0818014421_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0818014421_0 */
	border-top:0px;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	width:150px;
	height:25px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:142px;
	height:18px;
}

#MMMenu0818014421_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu0818014421_0 so we can set its position */
	left:0px;
	top:0px;
}

#MMMenu0818014421_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu0818014421_0 so we can set its position */
	left:0px;
	top:26px;
}

#MMMenu0818014421_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu0818014421_0 so we can set its position */
	left:0px;
	top:51px;
}

#MMMenu0818014421_0_Item_3 {
/* Unique ID for item 3 of menu MMMenu0818014421_0 so we can set its position */
	left:0px;
	top:76px;
}

#MMMenu0818014421_0_Item_4 {
/* Unique ID for item 4 of menu MMMenu0818014421_0 so we can set its position */
	left:0px;
	top:101px;
}

#MMMenu0818014421_0_Item_5 {
/* Unique ID for item 5 of menu MMMenu0818014421_0 so we can set its position */
	left:0px;
	top:126px;
}

#MMMenuContainer0818014421_0 img {
/* needed for Mozilla/Camino/Netscape */
	border:0px;
}

#MMMenuContainer0818014421_0 a {
/* Controls the general apperance for menu MMMenuContainer0818014421_0's items, including color and font */
	text-decoration:none;
	font-family:Times New Roman, Times, serif;
	font-size:14px;
	color:#000000;
	text-align:center;
	vertical-align:middle;
	padding:3px;
	background-color:#f6eed9;
	font-weight:bold;
	font-style:normal;
	display:block;
	position:absolute;
}

#MMMenuContainer0818014421_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0818014421_0 */
	color:#f6eed9;
	background-color:#000000;
}
#MMMenuContainer0818012537_0 {
/* This ID is related to the master menu div for menu MMMenuContainer0818012537_0 and contains the important positioning information for the menu as a whole */
	position:absolute;
	left:163px;
	top:77px;
	visibility:hidden;
	z-index:300;
}

#MMMenu0818012537_0 {
/* This class defines things about menu MMMenu0818012537_0's div. */
	position:absolute;
	left:0px;
	top:0px;
	visibility:hidden;
	background-color:#555555;
	border:1px solid #555555;
	width:204px;
	height:251px;
}

.MMMIFVStyleMMMenu0818012537_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0818012537_0 */
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	width:204px;
	height:26px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:196px;
	height:18px;
}

.MMMIVStyleMMMenu0818012537_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0818012537_0 */
	border-top:0px;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	width:204px;
	height:25px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:196px;
	height:18px;
}

#MMMenu0818012537_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:0px;
}

#MMMenu0818012537_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:26px;
}

#MMMenu0818012537_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:51px;
}

#MMMenu0818012537_0_Item_3 {
/* Unique ID for item 3 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:76px;
}

#MMMenu0818012537_0_Item_4 {
/* Unique ID for item 4 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:101px;
}

#MMMenu0818012537_0_Item_5 {
/* Unique ID for item 5 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:126px;
}

#MMMenu0818012537_0_Item_6 {
/* Unique ID for item 6 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:151px;
}

#MMMenu0818012537_0_Item_7 {
/* Unique ID for item 7 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:176px;
}

#MMMenu0818012537_0_Item_8 {
/* Unique ID for item 8 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:201px;
}

#MMMenu0818012537_0_Item_9 {
/* Unique ID for item 9 of menu MMMenu0818012537_0 so we can set its position */
	left:0px;
	top:226px;
}

#MMMenuContainer0818012537_0 img {
/* needed for Mozilla/Camino/Netscape */
	border:0px;
}

#MMMenuContainer0818012537_0 a {
/* Controls the general apperance for menu MMMenuContainer0818012537_0's items, including color and font */
	text-decoration:none;
	font-family:Times New Roman, Times, serif;
	font-size:14px;
	color:#000000;
	text-align:center;
	vertical-align:middle;
	padding:3px;
	background-color:#f6eed9;
	font-weight:bold;
	font-style:normal;
	display:block;
	position:absolute;
}

#MMMenuContainer0818012537_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0818012537_0 */
	color:#f6eed9;
	background-color:#000000;
}
#MMMenuContainer0818012208_1 {
/* This ID is related to the master menu div for menu MMMenuContainer0818012208_1 and contains the important positioning information for the menu as a whole */
	position:absolute;
	left:163px;
	top:53px;
	visibility:hidden;
	z-index:300;
}

#MMMenu0818012208_1 {
/* This class defines things about menu MMMenu0818012208_1's div. */
	position:absolute;
	left:0px;
	top:0px;
	visibility:hidden;
	background-color:#555555;
	border:1px solid #555555;
	width:195px;
	height:101px;
}

.MMMIFVStyleMMMenu0818012208_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0818012208_1 */
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	width:195px;
	height:26px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:187px;
	height:18px;
}

.MMMIVStyleMMMenu0818012208_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0818012208_1 */
	border-top:0px;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	width:195px;
	height:25px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:187px;
	height:18px;
}

#MMMenu0818012208_1_Item_0 {
/* Unique ID for item 0 of menu MMMenu0818012208_1 so we can set its position */
	left:0px;
	top:0px;
}

#MMMenu0818012208_1_Item_1 {
/* Unique ID for item 1 of menu MMMenu0818012208_1 so we can set its position */
	left:0px;
	top:26px;
}

#MMMenu0818012208_1_Item_2 {
/* Unique ID for item 2 of menu MMMenu0818012208_1 so we can set its position */
	left:0px;
	top:51px;
}

#MMMenu0818012208_1_Item_3 {
/* Unique ID for item 3 of menu MMMenu0818012208_1 so we can set its position */
	left:0px;
	top:76px;
}

#MMMenuContainer0818012208_1 img {
/* needed for Mozilla/Camino/Netscape */
	border:0px;
}

#MMMenuContainer0818012208_1 a {
/* Controls the general apperance for menu MMMenuContainer0818012208_1's items, including color and font */
	text-decoration:none;
	font-family:Times New Roman, Times, serif;
	font-size:14px;
	color:#000000;
	text-align:center;
	vertical-align:middle;
	padding:3px;
	background-color:#f6eed9;
	font-weight:bold;
	font-style:normal;
	display:block;
	position:absolute;
}

#MMMenuContainer0818012208_1 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0818012208_1 */
	color:#f6eed9;
	background-color:#000000;
}

 

[mikex]

http://www.mjankowski.com/test/index.html

The nav bar box is bumped down and to the right.

And I'm not sure I'm even doing this right... its one of my first pages... I'm actually better in flash.. you can see that by just going to www.mjankowski.com

I have the individual pictures sliced up so I can put them into dreamweaver... but I don't know how to write on top of them... I'm so lost...