Link to home
Start Free TrialLog in
Avatar of derrida
derrida

asked on

alignment of a table with css drop down menus

hi
i have buil a page in fireworks with css drop down menus and exported it to DW. everything works fine exept one thing:
when i write the alignment of the table to center it refuses to be placed there.
is it because the drop down css menus? if so what can i do about it?

best regards

ron
Avatar of Ben McNelly
Ben McNelly
Flag of United States of America image

This all depends on how you are aligning it and how it is built.

Do you think you could post a link to it, or some code so we have an idea how to better help?

Without much to go on,  I would say your best bet is to use a div to possition it...
Avatar of Jason C. Levine
Hi Ron.

Centering with CSS can be confusing.  There are lots of different things that can be centered and different ways to do it.  Ben is right, we will need to see both page and CSS code to help you.
Avatar of derrida
derrida

ASKER

hi
this is the external css that fireworks wrote :

#FWTableContainer1704390985 {
/* 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:800px;
      height:600px;
      text-align:left;
}

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

#MMMenu0502152548_0 {
/* This class defines things about menu MMMenu0502152548_0's div. */
      position:absolute;
      left:0px;
      top:0px;
      visibility:hidden;
      background-color:#555555;
      width:580px;
      height:22px;
}

.MMMIFHStyleMMMenu0502152548_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0502152548_0 */
      width:145px;
      height:22px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:139px;
      height:16px;
}

.MMMIHStyleMMMenu0502152548_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0502152548_0 */
      width:145px;
      height:22px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:139px;
      height:16px;
}

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

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

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

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

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

#MMMenuContainer0502152548_0 a {
/* Controls the general apperance for menu MMMenuContainer0502152548_0's items, including color and font */
      text-decoration:none;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#ffffff;
      text-align:center;
      vertical-align:middle;
      padding:3px;
      background: url("images/mmmenu3_145x22_up.gif") #999999;
      font-weight:normal;
      font-style:normal;
      display:block;
      position:absolute;
}

#MMMenuContainer0502152548_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0502152548_0 */
      color:#ffffff;
      background: url("images/mmmenu3_145x22_over.gif") #5d7d27;
}
#MMMenuContainer0502153356_1 {
/* This ID is related to the master menu div for menu MMMenuContainer0502153356_1 and contains the important positioning information for the menu as a whole */
      position:absolute;
      left:338px;
      top:149px;
      visibility:hidden;
      z-index:300;
}

#MMMenu0502153356_1 {
/* This class defines things about menu MMMenu0502153356_1's div. */
      position:absolute;
      left:0px;
      top:0px;
      visibility:hidden;
      background-color:#555555;
      width:350px;
      height:22px;
}

.MMMIFHStyleMMMenu0502153356_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0502153356_1 */
      width:175px;
      height:22px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:169px;
      height:16px;
}

.MMMIHStyleMMMenu0502153356_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu0502153356_1 */
      width:175px;
      height:22px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:169px;
      height:16px;
}

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

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

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

#MMMenuContainer0502153356_1 a {
/* Controls the general apperance for menu MMMenuContainer0502153356_1's items, including color and font */
      text-decoration:none;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#ffffff;
      text-align:center;
      vertical-align:middle;
      padding:3px;
      background: url("images/mmmenu2_175x22_up.gif") #999999;
      font-weight:normal;
      font-style:normal;
      display:block;
      position:absolute;
}

#MMMenuContainer0502153356_1 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0502153356_1 */
      color:#ffffff;
      background: url("images/mmmenu2_175x22_over.gif") #5d7d27;
}
#MMMenuContainer0502153606_2 {
/* This ID is related to the master menu div for menu MMMenuContainer0502153606_2 and contains the important positioning information for the menu as a whole */
      position:absolute;
      left:534px;
      top:149px;
      visibility:hidden;
      z-index:300;
}

#MMMenu0502153606_2 {
/* This class defines things about menu MMMenu0502153606_2's div. */
      position:absolute;
      left:0px;
      top:0px;
      visibility:hidden;
      background-color:#555555;
      width:262px;
      height:22px;
}

.MMMIFHStyleMMMenu0502153606_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu0502153606_2 */
      width:131px;
      height:22px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:125px;
      height:16px;
}

.MMMIHStyleMMMenu0502153606_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu0502153606_2 */
      width:131px;
      height:22px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:125px;
      height:16px;
}

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

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

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

#MMMenuContainer0502153606_2 a {
/* Controls the general apperance for menu MMMenuContainer0502153606_2's items, including color and font */
      text-decoration:none;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#ffffff;
      text-align:center;
      vertical-align:middle;
      padding:3px;
      background: url("images/mmmenu1_131x22_up.gif") #999999;
      font-weight:normal;
      font-style:normal;
      display:block;
      position:absolute;
}

#MMMenuContainer0502153606_2 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0502153606_2 */
      color:#ffffff;
      background: url("images/mmmenu1_131x22_over.gif") #5d7d27;
}
.text {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      padding-right: 10px;
      padding-bottom: 2px;
      padding-left: 10px;
}
.space {
      padding-top: 2px;
      padding-bottom: 10px;
}

hope you can help me. i have tried to replace some of the "absolute" with "relative" but it made a mess, so i returned to the original state.


ron
Avatar of derrida

ASKER

hi
just saw now that you asked both the css and the page, so this is the code of the page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aspolay.png</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks 8 Dreamweaver 8 target.  Created Wed May 03 11:48:30 GMT+0200 2006-->
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
      @import url("./aspolay.css");
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
</style>

</head>
<body bgcolor="#ffffff"><div id="FWTableContainer1704390985">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="aspoLay2.png" fwbase="aspolay.png" fwstyle="Dreamweaver" fwdocid = "1704390985" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="41" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="18" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="60" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="102" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="93" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="126" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="34" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="28" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="51" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="105" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="76" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="12"><img name="header" src="images/header.jpg" width="800" height="126" border="0" id="header" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="126" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="leftbar" src="images/leftbar.png" width="41" height="23" border="0" id="leftbar" alt="" /></td>
   <td colspan="2"><a href="home.htm"><img name="home" src="images/home.png" width="78" height="23" border="0" id="home" alt="" /></a></td>
   <td colspan="2"><a href="javascript:;" onmouseout="MM_menuStartTimeout(150);" onmouseover="MM_menuShowMenu('MMMenuContainer0502152548_0', 'MMMenu0502152548_0',21,23,'sgt');"><img name="sgt" src="images/sgt.png" width="195" height="23" border="0" id="sgt" alt="" /></a></td>
   <td colspan="2"><a href="javascript:;" onmouseout="MM_menuStartTimeout(150);" onmouseover="MM_menuShowMenu('MMMenuContainer0502153356_1', 'MMMenu0502153356_1',24,23,'conferences');"><img name="conferences" src="images/conferences.png" width="192" height="23" border="0" id="conferences" alt="" /></a></td>
   <td colspan="3"><a href="javascript:;" onmouseout="MM_menuStartTimeout(150);" onmouseover="MM_menuShowMenu('MMMenuContainer0502153606_2', 'MMMenu0502153606_2',28,23,'personal');"><img name="personal" src="images/personal.png" width="113" height="23" border="0" id="personal" alt="" /></a></td>
   <td><a href="contact.htm"><img name="contact" src="images/contact.png" width="105" height="23" border="0" id="contact" alt="" /></a></td>
   <td rowspan="2"><img name="rightbar" src="images/rightbar.png" width="76" height="25" border="0" id="rightbar" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2" rowspan="5" bgcolor="#F4F7F0">&nbsp;</td>
   <td colspan="2"><img name="slice_r3_c3" src="images/slice_r3_c3.png" width="162" height="2" border="0" id="slice_r3_c3" alt="" /></td>
   <td colspan="2" rowspan="2" align="center" valign="middle" background="images/flashtext.png"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="150" height="32">
     <param name="movie" value="images/guards.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="transparent" />
     <embed src="images/guards.swf" width="150" height="32" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
   </object></td>
   <td colspan="2"><img name="slice_r3_c7" src="images/slice_r3_c7.png" width="160" height="2" border="0" id="slice_r3_c7" alt="" /></td>
   <td rowspan="5" bgcolor="#F4F7F0"><img name="righttobox" src="images/righttobox.png" width="28" height="451" border="0" id="righttobox" alt="" /></td>
   <td colspan="2"><img name="slice_r3_c10" src="images/slice_r3_c10.png" width="156" height="2" border="0" id="slice_r3_c10" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="lefttitle" src="images/lefttitle.png" width="162" height="91" border="0" id="lefttitle" alt="" /></td>
   <td colspan="2"><img name="righttitle" src="images/righttitle.png" width="160" height="91" border="0" id="righttitle" alt="" /></td>
   <td colspan="3" rowspan="4" valign="top" bgcolor="#F4F7F0"><img name="building" src="images/building.gif" width="232" height="449" border="0" id="building" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="91" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="6" align="center" valign="middle" background="images/midtext1.png" class="space"><img name="guards" src="images/guards.gif" width="249" height="197" border="0" id="guards" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="66" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="6" valign="top" background="images/midtext2.png" class="text"><p align="justify">Employment opportunities and the opening of various country borders in and around the European community have had a very strong influence in regards to standards, quality and working conditions within certain sectors of the commercial world.</p>
     <p align="justify">The security industry is one sector which is greatly effected by these on going and forever changing reforms. It is a fact, that the ranks of qulified, experienced security personnel are beginning to waiver against the ever increasing pressure of cheap labor organizations with multiple functional services.</p>
     <p align="justify">Experience can not be bought or borrowed, it has to be gained over many years. Methods have to be perfected and techniques improved as well as ideas tested and tried. Since 1978 our company, ASPO has been active in most aspects of security business.</p>
     <p align="justify">The company's success can be largely contributed to the quality of it's personnel.</p>
     <p align="justify">ASPO's work force play a very important role in it's running. Each one of ASPO's staff members are qualified and experienced within their own particular field.</p>
     <p align="justify">Like most things in life it is advisiable to get advice or obtain as much information as possible before committing one's self to an agreement or long term contract, but with a choice of 300 security companies in Berlin alone for example, where does one begin ?</p>
     <p align="justify">Before this question can be answered you will have to ascertain the exact needs for your organization...</p></td>
   <td><img src="images/spacer.gif" width="1" height="213" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="6"><img name="footertext" src="images/footertext.png" width="481" height="79" border="0" id="footertext" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="79" border="0" alt="" /></td>
  </tr>
</table>
<div id="MMMenuContainer0502152548_0">
      <div id="MMMenu0502152548_0" onmouseout="MM_menuStartTimeout(150);" onmouseover="MM_menuResetTimeout();">
            <a href="Gteams.htm" id="MMMenu0502152548_0_Item_0" class="MMMIFHStyleMMMenu0502152548_0" onmouseover="MM_menuOverMenuItem('MMMenu0502152548_0');">
                  Guard&nbsp;Teams
            </a>
            <a href="patrolS.htm" id="MMMenu0502152548_0_Item_1" class="MMMIHStyleMMMenu0502152548_0" onmouseover="MM_menuOverMenuItem('MMMenu0502152548_0');">
                  Patrol&nbsp;Services
            </a>
            <a href="dogs.htm" id="MMMenu0502152548_0_Item_2" class="MMMIHStyleMMMenu0502152548_0" onmouseover="MM_menuOverMenuItem('MMMenu0502152548_0');">
                  Dog&nbsp;Teams
            </a>
            <a href="building.htm" id="MMMenu0502152548_0_Item_3" class="MMMIHStyleMMMenu0502152548_0" onmouseover="MM_menuOverMenuItem('MMMenu0502152548_0');">
                  Building&nbsp;Management
            </a>
      </div>
</div>
<div id="MMMenuContainer0502153356_1">
      <div id="MMMenu0502153356_1" onmouseout="MM_menuStartTimeout(150);" onmouseover="MM_menuResetTimeout();">
            <a href="conferenceM.htm" id="MMMenu0502153356_1_Item_0" class="MMMIFHStyleMMMenu0502153356_1" onmouseover="MM_menuOverMenuItem('MMMenu0502153356_1');">
                  Conferences&nbsp;Management
            </a>
            <a href="methods.htm" id="MMMenu0502153356_1_Item_1" class="MMMIHStyleMMMenu0502153356_1" onmouseover="MM_menuOverMenuItem('MMMenu0502153356_1');">
                  Methods
            </a>
      </div>
</div>
<div id="MMMenuContainer0502153606_2">
      <div id="MMMenu0502153606_2" onmouseout="MM_menuStartTimeout(150);" onmouseover="MM_menuResetTimeout();">
            <a href="personal.htm" id="MMMenu0502153606_2_Item_0" class="MMMIFHStyleMMMenu0502153606_2" onmouseover="MM_menuOverMenuItem('MMMenu0502153606_2');">
                  Personal
            </a>
            <a href="Rpersonal.htm" id="MMMenu0502153606_2_Item_1" class="MMMIHStyleMMMenu0502153606_2" onmouseover="MM_menuOverMenuItem('MMMenu0502153606_2');">
                  Reception&nbsp;Personal
            </a>
      </div>
</div>
</div>
</body>
</html>

it is really urgent so i`ll be very thankfull for your help.


ron
Avatar of derrida

ASKER

hi
can anyone please help with this question?

i am totally at lost.


ron
ASKER CERTIFIED SOLUTION
Avatar of castrum
castrum

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of derrida

ASKER

hi
thanks it works.

ron
you're welcome :)