Een table header verkleine

Door Francoi gckx op 01-10-2014 11:08

1.443 views

Ik heb met fireworks een header gemaakt en er zit een menu in verwerkt,
dit alles opgeslagen en exported naar een html js en css + de images-bestanden.

Deze header wil ik graag boven de algemene background hangen.

Nou was de width erg hoog in fireworks ik wil het in verhouding verkleinen de code:


<body class="page page-id-187 page-template-default c-r gumm-enable-ajax-content-loading one-sidebar" bgcolor="#ffffff" onload="MM_preloadImages('views/header/header_r1_c4_s3.gif','views/header/header_r1_c4.gif','views/header/rollover/header1ro_r1_c1.png','views/header/rollover/header1ro_r1_c3.png','views/header/rollover/header1ro_r3_c1.png','views/header/rollover/header1ro_r3_c3.png','views/header/rollover/header1ro_r5_c1.png','views/header/header_r8_c6_s2.gif','views/header/rollover/header1ro_r5_c3.png');">
		
		
<div id="FWTableContainer1295538959">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="header1.fw.png" fwpage="Page 1" fwbase="header.gif" fwstyle="Dreamweaver" fwdocid = "1295538959" fwnested="0" -->
  <tr>
   <td><img src="views/header/spacer.gif" height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif"  height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif"  height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif"  height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif"  height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif" height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif"  height="1" alt="" /></td>
   <td><img src="views/header/spacer.gif"  height="1" alt="" /></td>
  </tr>

  <tr>
   <td colspan="3"><img class="spacer" name="header_r1_c1" src="views/header/header_r1_c1.gif"  height="177" id="views/header/header_r1_c1" alt="" /></td>
   <td rowspan="7"><img class="spacer" name="header_r1_c4" src="views/header/header_r1_c4.gif"  height="540" id="views/header/header_r1_c4" usemap="#m_/header_r1_c4" alt="" /></td>
   <td colspan="3"><img class="spacer" name="header_r1_c5" src="views/header/header_r1_c5.gif"  height="177" id="views/header/header_r1_c5" alt="" /></td>
   <td><img src="views/header/spacer.gif" width="1"  height="177" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="8"><img class="spacer" name="header_r2_c1" src="views/header/header_r2_c1.gif"  height="1103" id="views/header/header_r2_c1" alt="" /></td>
   <td rowspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('views/header/header_r2_c2','','views/header/rollover/header1ro_r1_c1.png',1);"><img class="spacer" name="header_r2_c2" src="views/header/header_r2_c2.gif" height="162" id="views/header/header_r2_c2" alt="" /></a></td>
   <td rowspan="8"><img class="spacer" name="header_r2_c3" src="views/header/header_r2_c3.gif"  height="1103" id="views/header/header_r2_c3" alt="" /></td>
   <td rowspan="8"><img class="spacer" name="header_r2_c5" src="views/header/header_r2_c5.gif"  height="1103" id="views/header/header_r2_c5" alt="" /></td>
   <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('views/header/header_r2_c6','','views/header/rollover/header1ro_r1_c3.png',1);"><img class="spacer" name="header_r2_c6" src="views/header/header_r2_c6.gif"  height="140" id="views/header/header_r2_c6" alt="" /></a></td>
   <td rowspan="8"><img class="spacer" name="header_r2_c7" src="views/header/header_r2_c7.gif"  height="1103" id="views/header/header_r2_c7" alt="" /></td>
   <td><img src="views/header/spacer.gif" width="1" height="140" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img class="spacer" name="header_r3_c6" src="views/header/header_r3_c6.gif"  height="46" id="views/header/header_r3_c6" alt="" /></td>
   <td><img src="views/header/spacer.gif" width="1" height="22" alt="" /></td>
  </tr>
  <tr>
   <td><img class="spacer" name="header_r4_c2" src="views/header/header_r4_c2.gif" width="551" height="24" id="views/header/header_r4_c2" alt="" /></td>
   <td><img src="views/header/spacer.gif" width="1" height="24" alt="" /></td>
  </tr>
  <tr>
   <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('views/header/header_r5_c2','','views/header/rollover/header1ro_r3_c1.png',1);"><img class="spacer" name="header_r5_c2" src="views/header/header_r5_c2.gif"  height="117" id="views/header/header_r5_c2" alt="" /></a></td>
   <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('views/header/header_r5_c6','','views/header/rollover/header1ro_r3_c3.png',1);"><img class="spacer" name="header_r5_c6" src="views/header/header_r5_c6.gif"  height="117" id="views/header/header_r5_c6" alt="" /></a></td>
   <td><img src="views/header/spacer.gif" width="1" height="117" alt="" /></td>
  </tr>
  <tr>
   <td><img class="spacer" name="header_r6_c2" src="views/header/header_r6_c2.gif" width="551" height="36" id="views/header/header_r6_c2" alt="" /></td>
   <td rowspan="2"><img class="spacer" name="header_r6_c6" src="views/header/header_r6_c6.gif"  height="60" id="views/header/header_r6_c6" alt="" /></td>
   <td><img src="views/header/spacer.gif" width="1"height="36" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('views/header/header_r7_c2','','views/header/rollover/header1ro_r5_c1.png',1);"><img class="spacer" name="header_r7_c2" src="views/header/header_r7_c2.gif" height="130" id="views/header/header_r7_c2" alt="" /></a></td>
   <td><img src="views/header/spacer.gif" width="1" height="24" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img class="spacer" name="header_r8_c4" src="views/header/header_r8_c4.gif"  height="740" id="views/header/header_r8_c4" alt="" /></td>
   <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('views/header/header_r8_c6','','views/header/header_r8_c6_s2.gif','views/header/header_r8_c6','','views/header/rollover/header1ro_r5_c3.png',1);"><img class="spacer" name="header_r8_c6" src="views/header/header_r8_c6.gif"  height="106" id="views/header/header_r8_c6" alt="" /></a></td>
   <td><img src="views/header/spacer.gif" width="1" height="106" alt="" /></td>
  </tr>
  <tr>
   <td><img class="spacer" name="header_r9_c2" src="views/header/header_r9_c2.gif" height="634" id="views/header/header_r9_c2" alt="" /></td>
   <td><img class="spacer" name="header_r9_c6" src="views/header/header_r9_c6.gif" height="634" id="views/header/header_r9_c6" alt="" /></td>
   <td><img src="views/header/spacer.gif" width="1" height="634" alt="" /></td>
  </tr>
</table>
<map name="m_header_r1_c4" id="m_header_r1_c4">
<area shape="poly" coords="0,-4,616,540,1216,-4" href="javascript:;" alt="" onmouseout="MM_swapImage('header_r1_c4','','header_r1_c4.gif',1);MM_menuStartTimeout(1000);"  onmouseover="MM_menuShowMenu('MMMenuContainer0928155539_0', 'MMMenu0928155539_0',0,-52,'header_r1_c4');MM_swapImage('header_r1_c4','','views/header/header_r1_c4_s3.gif',1);"  />
</map>
<div id="MMMenuContainer0928155539_0">
	<div id="MMMenu0928155539_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
		<a href="javascript:;" id="MMMenu0928155539_0_Item_0" class="MMMIFVStyleMMMenu0928155539_0" onmouseover="MM_menuOverMenuItem('MMMenu0928155539_0');">
			test
		</a>
		<a href="javascript:;" id="MMMenu0928155539_0_Item_1" class="MMMIVStyleMMMenu0928155539_0" onmouseover="MM_menuOverMenuItem('MMMenu0928155539_0');">
			test2
		</a>
	</div>
</div>
</div>
		<div id="bb-background"></div>

Ik probeer in css ipv 5353px dat is wat die steeds aangeeft ook al doe ik:


#FWTableContainer1295538959 {
/* 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:1350px;
	height:320px;
	text-align:left;
}

#FWTableContainer1295538959 table{	
width:1350px;
	height:320px;
}
#FWTableContainer1295538959 table td{	
width:1350px;
}

Het blijft gewoon eigenwijs en op een width van: +- 5000 (de afmetingen van de totale header) dat is veels te groot.

Optie 1 kan iemand mij helpen dit vertalen in divjes, de header heeft trouwens knoppen met swapping images.
Optie 2 is er een optie om de hele table te scale of moet ik het echt verkleine in fireworks en heel het proces opnieuwe doen? Danku(en)wel

Francoi gckx

01-10-2014 13:21

Stel table is <table> tbody tr td td td </tr> </table>

en de css is dit:


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

#FWTableContainer1295538959 {
/* 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:5433px;
	height:1280px;
	text-align:left;
}

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

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

.MMMIFVStyleMMMenu0928155539_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0928155539_0 */
	width:48px;
	height:24px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:42px;
	height:18px;
}

.MMMIVStyleMMMenu0928155539_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu0928155539_0 */
	width:48px;
	height:24px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:42px;
	height:18px;
}

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

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

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

#MMMenuContainer0928155539_0 a {
/* Controls the general apperance for menu MMMenuContainer0928155539_0's items, including color and font */
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000000;
	text-align:left;
	vertical-align:middle;
	padding:3px;
	background: url("afbeeldingen/mmmenu1_48x24_up.gif") #cccccc;
	font-weight:normal;
	font-style:normal;
	display:block;
	position:absolute;
}

#MMMenuContainer0928155539_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer0928155539_0 */
	color:#ffffff;
	background: url("afbeeldingen/mmmenu1_48x24_over.gif") #000084;
}

Haha ik dacht div is ook al beter wat een geklooi met die tables joh,