Een table header verkleine

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Francoi gckx

Francoi gckx

01/10/2014 11:08:15
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


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
 
PHP hulp

PHP hulp

25/04/2024 15:07:47
 
- Ariën  -
Beheerder

- Ariën -

01/10/2014 11:36:10
Quote Anchor link
Zou ik mogen weten waarom je nog tabellen gebruikt voor je website? Met div'jes en CSS kan je hetzelfde prima bereiken. Zo kan je ook je site mooi responsive maken, en makkelijker onderhoudbaar.

Tabellen voor layouts zijn al behoorlijk passé.
Gewijzigd op 01/10/2014 11:51:02 door - Ariën -
 
Francoi gckx

Francoi gckx

01/10/2014 13:21:58
Quote Anchor link
Stel table is <table> tbody tr td td td </tr> </table>

en de css is dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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,
 
- Ariën  -
Beheerder

- Ariën -

01/10/2014 20:00:51
Quote Anchor link
Tja, zorg dan wel dat je logische namen gebruikt.

#MMMenuContainer0928155539, dit zegt niet veel spannends.
 
Eddy E

Eddy E

02/10/2014 10:52:27
Quote Anchor link
En <table> gebruiken voor opmaak is ook inmiddels afgeraden.
Daar zijn <header>, <article> en <footer> voor!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.