Problem with CSS/Java graphic placement

mikex · 08-19-2006, 04:57 PM

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 · 08-19-2006, 05:32 PM

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

- Steve

mikex · 08-19-2006, 05:47 PM

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.

Code:

<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&nbsp;Offender&nbsp;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&nbsp;911&nbsp;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&nbsp;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&nbsp;Community&nbsp;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&nbsp;Police&nbsp;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&nbsp;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&nbsp;The&nbsp;Right&nbsp;Thing&nbsp;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&nbsp;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&nbsp;an&nbsp;Anonymous&nbsp;Crime&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;Division </a> </div>
  </div>
</div>

Code:

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;
}

Code:

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 · 08-20-2006, 08:40 PM

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...

08-19-2006, 04:57 PM	#1 (permalink)
mikex New Member Join Date: Aug 2006 Posts: 3 0.00 NP$ (Donate)	Problem with CSS/Java graphic placement 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

08-19-2006, 05:32 PM	#2 (permalink)
iNod Eating Pie Join Date: Nov 2004 Location: Canada Posts: 2,289 126.05 NP$ (Donate)	Could you upload a demo or example of your website so I can give it a checkout? - Steve __________________ I feel old.

08-20-2006, 08:40 PM	#4 (permalink)
mikex New Member Join Date: Aug 2006 Posts: 3 0.00 NP$ (Donate)	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...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)