Een table header verkleine
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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;
}
/* 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
en de css is dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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;
}
/* 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,
#MMMenuContainer0928155539, dit zegt niet veel spannends.
Daar zijn <header>, <article> en <footer> voor!