Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 7 van 7

Onderwerp: Website uit verband getrokken in dreamweaver

  • Vraag is opgelost
  1. #1

    Website uit verband getrokken in dreamweaver

    Hallo,

    Op het moment ben ik bezig met het maken van een website voor het bedrijf van mijn broer.
    Ik heb een aanpassing gedaan in dreamweaver, waardoor nu de website uit verband getrokken is.
    Dit krijg ik niet meer goed.

    De aanpassing die ik gedaan heb is; nieuwe afbeeldingen (photoshopslides) in een aantal cellen geplaatst.
    De slides van de website zouden precies inelkaar moeten passen, toch zit er ruimte tussen.

    http://www.impulsfysiotherapie.nl/Indextest.html

    Wie kan mij helpen?

  2. #2
    Senior Member Janzwart's avatar
    Geregistreerd
    21 november 2011
    Locatie
    Zwartewaterland
    Afstand tot server
    ±44 km
    De onderstaande code is volgens mij niet helemaal juist:

    Code:
    <th height="67" width="149" colspan="6" rowspan="3" nowrap><img src="../temp_site/images/sitelayoutsub_41.png" alt="" width="149" height="67"></th>
    Moet <th height niet <td height zijn?

    En ook zo afsluiten
    Vriendelijke groet,

    Jan

  3. #3
    Hallo Jan, bedankt voor de reactie

    Ik heb het veranderd, maar geen verandering helaas.

  4. #4
    Mega Honourable Senior Member csshunter's avatar
    Geregistreerd
    4 augustus 2009
    Hoi Tieske85,

    Poef! Daar heeft Photoshop/Dreamweaver je op een vreselijke manier het brandnetelbos ingestuurd...

    Hier past eigenlijk / helaas maar 1 antwoord op:
    • Zo gauw mogelijk die tabel-opmaak met 92 cellen (!) , 50 images (!) en onnodig hover-javascript overboord kieperen,
      want op deze manier is het ondoenlijk om het in orde te krijgen.


    Om er vervolgens met enkele <div>'s, simpele html, wat css-opmaak en slechts een paar welgemikte background-images een pracht van een site van te maken!

    Met vriendelijke groet,
    CSShunter
    Als een webpagina plots niet doet wat je wilt, raadpleeg dan eerst de html-validator, vóórdat je wanhopig aan de css gaat sleutelen. En vraag de css-validator om op alle punten en komma's te letten. Staat er een (goed) DOCtype boven? Doet de pagina niet gewoon wat moet volgens de html-specificatie en de regels voor css? Daarna pas sleutelen!
    (als dat nog nodig is!) - O, ken je de Webrichtijnen (test) al?

  5. #5
    Mega Honourable Senior Member csshunter's avatar
    Geregistreerd
    4 augustus 2009

    Total Tabel Make Over !

    Hoi Tieske85,
    Tja, de beste stuurlui staan altijd aan de wal met van die vrolijke beweringen dat het allemaal heel anders moet.
    En makkelijker gezegd dan gedaan. Maar bewijzen of suggesties, ho maar!

    Oké, daar gaan we.

    Dit javascript ...:
    Javascript Code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <script type="text/javascript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    ... is overbodig, en kan vervallen door er css-hovers van te maken (die o.a. meteen beschikbaar zijn, geen preload nodig hebben, en ook geen swap-functies om de gewone toestand weer terug te krijgen bij verlaten van de hover).
    Dat is één!

    =======
    Dit oerwoud aan tabelcellen, images en spacers en onmouseover's en image-swap-restore's ...:
    HTML Code:
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    
    <table width="901" height="801" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
        <tr>
          <td colspan="32">
            <img src="../temp_site/images/Achtergrond_01.png" width="900" height="7" alt="Regent Achtergrond_01"></td>
              <td>
                  <img src="../temp_site/images/spacer.gif" width="1" height="7" alt=""></td>
     
        </tr>
        <tr>
          <td height="793" width="27" rowspan="13"><img src="../temp_site/images/Achtergrond_02.png" width="27" height="793" alt="Regent Achtergrond_02"></td>
      <td colspan="30">
                <img src="../temp_site/images/Logo.png" width="845" height="36" alt="Regent Logo"></td>
            <td height="793" width="28" rowspan="13">
                <img src="../temp_site/images/sitelayoutsub_04.png" width="28" height="793" alt=""></td>
      <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="36" alt=""></td>
     
        </tr>
        <tr>
          <td rowspan="2">
            <img src="../temp_site/images/Logo-06.png" width="4" height="49" alt="Regent Logo"></td>
            <td colspan="14">
                <img src="../temp_site/images/Naam.png" width="337" height="39" alt="Regent Naam"></td>
            <td colspan="15" rowspan="2">
                <img src="../temp_site/images/Logo-08.png" width="504" height="49" alt="Regent Logo"></td>
            <td>
     
                <img src="../temp_site/images/spacer.gif" width="1" height="39" alt=""></td>
        </tr>
        <tr>
          <td colspan="14">
            <img src="../temp_site/images/Logo-09.png" width="337" height="10" alt="Regent Logo"></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="10" alt=""></td>
        </tr>
        <tr>
     
          <td colspan="2" rowspan="5">
            <img src="../temp_site/images/sitelayoutsub_09.png" width="7" height="122" alt=""></td>
            <td colspan="2"><!-- TemplateBeginEditable name="home_btn" --><img src="../temp_site/images/Hoofdmenu/Home_btn.png" alt="Home_btn" width="58" height="45"><!-- TemplateEndEditable --></td>
          <td colspan="4"><!-- TemplateBeginEditable name="wzw_btn" --><a href="Wiezijnwij.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wzw_btn','','../temp_site/images/Hoofdmenu/Wiezijnwij_02_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Wiezijnwij_btn.png" name="wzw_btn" width="108" height="45" border="0"></a><!-- TemplateEndEditable --></td>
    <td>
                <img src="../temp_site/images/sitelayoutsub_12.png" width="1" height="45" alt=""></td>
            <td colspan="4"><!-- TemplateBeginEditable name="wdw_btn" --><a href="Watdoenwij.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wdw_btn','','../temp_site/images/Hoofdmenu/Watdoenwij_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Watdoenwij_btn.png" name="wdw_btn" width="120" height="45" border="0"></a><!-- TemplateEndEditable --></td>
    <td colspan="4"><!-- TemplateBeginEditable name="tar_btn" --><a href="Tarieven.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tar_btn','','../temp_site/images/Hoofdmenu/Tarieven_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Tarieven_btn.png" name="tar_btn" width="88" height="45" border="0"></a><!-- TemplateEndEditable --></td>
    <td>
                <img src="../temp_site/images/sitelayoutsub_15.png" width="1" height="45" alt=""></td>
     
            <td colspan="3"><!-- TemplateBeginEditable name="cont_btn" --><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_btn','','../temp_site/images/Hoofdmenu/Contact_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Contact_btn.png" name="contact_btn" width="83" height="45" border="0"></a><!-- TemplateEndEditable --></td>
    <td>
                <img src="../temp_site/images/sitelayoutsub_17.png" width="1" height="45" alt=""></td>
            <td colspan="2"><!-- TemplateBeginEditable name="over_btn" --><a href="Overige.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('overige_btn','','../temp_site/images/Hoofdmenu/Overige_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Overige_btn.png" name="overige_btn" width="84" height="45" border="0"></a><!-- TemplateEndEditable --></td>
    <td colspan="6">
                <img src="../temp_site/images/sitelayoutsub_19.png" width="294" height="45" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="45" alt=""></td>
        </tr>
        <tr>
     
          <td colspan="24">
            <img src="../temp_site/images/Hoofdmenu/Bovenlijn3.png" width="587" height="1" alt="Regent Tekstvlak"></td>
    <td colspan="4">
                <img src="../temp_site/images/sitelayoutsub_21.png" width="251" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
        </tr>
        <tr>
          <td rowspan="3">
     
            <img src="../temp_site/images/Zijvlakje.png" width="26" height="76" alt="Regent Tekstvlak"></td>
          <td colspan="4"><div id="submenu_01_btn"><!-- TemplateBeginEditable name="sub1_btn" --><img src="../temp_site/images/Submenu/Submenu1_00_btn.png" alt="subje1_btn" width="127" height="45"><!-- TemplateEndEditable --></div></td>
      <td height="25" colspan="5" align="center" valign="middle"><div id="submenu_02_btn"><!-- TemplateBeginEditable name="sub2_btn" --><img src="../temp_site/images/Submenu/Submenu2_00_btn.png" alt="subje2_btn" width="120" height="45"><!-- TemplateEndEditable --></div></td>
      <td colspan="7"><!-- TemplateBeginEditable name="sub3_btn" --><img src="../temp_site/images/Submenu/Submenu3_00_btn.png" alt="subje3_btn" width="120" height="45"><!-- TemplateEndEditable --></td>
    <td colspan="4"><!-- TemplateBeginEditable name="sub4_btn" --><img src="../temp_site/images/Submenu/Submenu4_btn.png" width="120" height="45"><!-- TemplateEndEditable --></td>
          <td colspan="5"><!-- TemplateBeginEditable name="sub5_btn" --><img src="../temp_site/images/Submenu/Submenu5_btn.png" width="120" height="45"><!-- TemplateEndEditable --></td>
          <td><!-- TemplateBeginEditable name="sub6_btn" --><img src="../temp_site/images/Submenu/Submenu6_btn.png" width="119" height="45"><!-- TemplateEndEditable --></td>
          <td height="662" width="86" rowspan="8"><p><img src="../temp_site/images/sitelayoutsub_29.png" width="86" height="662"></p>      </td>
    <td>
     
                <img src="../temp_site/images/spacer.gif" width="1" height="45" alt=""></td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">
            <img src="../temp_site/images/Tekstvlak-31.png" width="38" height="31" alt="Regent Tekstvlak"></td>
            <td colspan="5" rowspan="2"><!-- TemplateBeginEditable name="sub7_btn" --><img src="../temp_site/images/Submenu/Submenu7_btn.png" width="128" height="31"><!-- TemplateEndEditable --></td>
          <td colspan="4" rowspan="2"><!-- TemplateBeginEditable name="sub8_btn" --><img src="../temp_site/images/Submenu/Submenu8_btn.png" width="120" height="31"><!-- TemplateEndEditable --></td>
          <td colspan="6" rowspan="2"><!-- TemplateBeginEditable name="sub9_btn" --><img src="../temp_site/images/Submenu/Submenu9_btn.png" width="120" height="31"><!-- TemplateEndEditable --></td>
          <td colspan="5" rowspan="2"><!-- TemplateBeginEditable name="sub10_btn" --><img src="../temp_site/images/Submenu/Submenu10_btn.png" width="121" height="31"><!-- TemplateEndEditable --></td>
     
    <td rowspan="2">
                <img src="../temp_site/images/Tekstvlak-36.png" width="34" height="31" alt="Regent Tekstvlak"></td>
            <td height="20" width="165" colspan="3">
                <img src="../temp_site/images/sitelayoutsub_36.png" width="165" height="20" alt=""></td>
      <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="20" alt=""></td>
        </tr>
        <tr>
          <td height="597" width="37" rowspan="6"><img src="../temp_site/images/sitelayoutsub_37.png" width="37" height="597" alt=""></td>
     
      <td height="22" width="128" colspan="2" rowspan="2"><img src="../temp_site/images/Nieuws/nieuwshoofd.png" width="128" height="22" alt="Regent Nieuws"></td>
    <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="11" alt=""></td>
        </tr>
        <tr>
          <td height="519" width="594" colspan="26" rowspan="2"><!-- TemplateBeginEditable name="main_content_area" -->
            <div id="site_layout_content">
              <h2 align="center" class="style9 style10">&nbsp;</h2>
            </div>
     
          <!-- TemplateEndEditable --></td>
    <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="11" alt=""></td>
        </tr>
        <tr>
          <td height="575" width="128" colspan="2" rowspan="4"><img src="../temp_site/images/Nieuws/nieuwstop_btn.png" alt="nieuwstop" width="128" height="6">
            <div id="Nieuws_01_btn">
              <div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span><br>
                  <span class="style6">Vacature manuele therapie</span></div>
     
            </div>
            <div class="style1" id="nieuws_02_btn">
              <div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span><br>
                <span class="style6">Impuls studio geopend</span></div>
            </div>
            <div class="style3" id="nieuws_03_btn">
              <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12<br>
     
                  </a><em>Nieuwe producten in de webshop</em><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3"><br>
              </a></div>
            </div>
            <div class="style3" id="nieuws_04_btn">
              <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
            </div>
            <div class="style3" id="nieuws_05_btn">
              <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
     
            </div>
            <div class="style3" id="nieuws_06_btn">
              <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
            </div>
            <div class="style3" id="nieuws_07_btn">
              <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
            </div>
            <div class="style1" id="nieuws_08_btn">
     
              <div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span></div>
            </div>
          <img src="../temp_site/images/Nieuws/nieuwsdown_btn.png" alt="nieuwsonder" width="128" height="89"></td>
    <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="304" alt=""></td>
        </tr>
        <tr>
          <th height="67" width="149" colspan="6" rowspan="3" nowrap><img src="../temp_site/images/sitelayoutsub_41.png" alt="" width="149" height="67"></th>
            <td height="12" width="317" colspan="15"><img src="../temp_site/images/Logo_02.jpg" alt="Regent Logo_02" width="317" height="12"></td>
     
          <td height="67" width="128" colspan="5" rowspan="3"><img src="../temp_site/images/Index_52.png" alt="" width="128" height="67"></td>
    <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="216" alt=""></td>
        </tr>
        <tr>
          <td height="55" width="92" colspan="5" rowspan="2" align="center">
            <img src="../temp_site/images/sitelayoutsub_44.png" width="92" height="55" alt=""></td>
    <td height="9" width="124" colspan="5" align="center">
                <img src="../temp_site/images/Copyright1.png" width="124" height="9" alt="Regent Copyright"></td>
    <td height="55" width="101" colspan="5" rowspan="2" align="center">
     
                <img src="../temp_site/images/sitelayoutsub_46.png" width="101" height="55" alt=""></td>
    <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="9" alt=""></td>
        </tr>
        <tr>
          <td height="46" width="124" colspan="5" align="center">
            <img src="../temp_site/images/sitelayoutsub_47.png" width="124" height="46" alt=""></td>
    <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="46" alt=""></td>
        </tr>
     
        <tr>
          <td>
            <img src="../temp_site/images/spacer.gif" width="27" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="4" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="3" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="26" height="1" alt=""></td>
     
            <td>
                <img src="../temp_site/images/spacer.gif" width="32" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="6" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="78" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="11" height="1" alt=""></td>
            <td>
     
                <img src="../temp_site/images/spacer.gif" width="13" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="25" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="42" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="39" height="1" alt=""></td>
     
            <td>
                <img src="../temp_site/images/spacer.gif" width="14" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="25" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="22" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="24" height="1" alt=""></td>
            <td>
     
                <img src="../temp_site/images/spacer.gif" width="17" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="17" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="39" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="27" height="1" alt=""></td>
     
            <td>
                <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="53" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="31" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="9" height="1" alt=""></td>
            <td>
     
                <img src="../temp_site/images/spacer.gif" width="34" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="37" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="9" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="119" height="1" alt=""></td>
            <td>
                <img src="../temp_site/images/spacer.gif" width="86" height="1" alt=""></td>
     
            <td>
                <img src="../temp_site/images/spacer.gif" width="28" height="1" alt=""></td>
            <td></td>
        </tr>
      </table>
    ... van 252 regels (!) kan allemaal vervangen worden door alleen maar deze regeltjes:
    HTML Code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    <div id="header">
        <h1><span>Impuls Fysiotherapie</span></h1>
        <ul>
            <li id="hme"><a href="index.html"><span>Home</span></a></li>
            <li id="wie"><a href="wie.htm"><span>Wie wij zijn</span></a></li>
            <li id="wat"><a href="wat.htm"><span>Wat wij doen</span></a></li>
            <li id="tar"><a href="tarieven.htm"><span>Tarieven</span></a></li>
            <li id="ctc"><a href="contact.html"><span>Contact</span></a></li>
            <li id="ovr"><a href="overigen.html"><span>Overigen</span></a></li>
        </ul>
    </div>
     
    <div id="content">
    ...
    </div>
     
    <div id="rechterkolom">
    ...
    </div>
     
    <div id="voetstuk"><!-- ! --></div>
    Dat is twee!

    =======
    De drie stylesheets site_layout.css, site_layout_content.css en nieuws_01_btn.css plus het ingesloten styleblok in de <head> kunnen door één stylesheet vervangen worden, dat voor alle pagina's bruikbaar is.
    • Bv. dit: imp-styles.css van nog geen 2kB
      (de verdere opmaak voor de content en de rechterkolom kan hieraan toegevoegd worden)

    Dat is drie!

    =======
    De 50 opgesplitste images kunnen vervangen worden door 3 stuks die juist een aantal dingen combineren:
    • Een imp-content-bg.png,
      dat is een strookje dat verticaal herhaald wordt zodat de opmaak niet kapot gaat als er een langere pagina is.
    • Een imp-sprite.png,
      dat is de kop met logo en de menu-tabjes, inclusief al hun hover-varianten, plus de bovenkant van de rechterkolom. Met de eigenschap background-position wordt hier telkens een gedeelte van gebruikt.
    • Een imp-voetstuk-bg.png,
      waar de onderhoekjes in zitten plus het watermerk en de onderkant van de rechterkolom.

    Het herhaalstrookje zit onderop, en wordt zo hoog als de pagina nodig heeft. De kop en het voetstuk worden er gewoon overheen geplakt. Klaar!
    Dat is vier, vijf en zes!

    =======
    Meer is er niet nodig!
    Want hiermee is ook het modelletje klaar:


    • Test: imp-nw1.htm

    • Er zitten nog 3 pagina's achter, waarmee je kan zien dat met exact dezelfde html-structuur en hetzelfde stylesheet alles goed gaat bij korte en lange pagina's, en bij veel of weinig tekst in de inhoud en/of rechterkolom. Alles gaat vanzelf!
    • Ook gaat vanzelf, dat elke pagina die openstaat, meteen zijn eigen tabblad in het wit laat zien. Dat gebeurt door de <body>-tag een per pagina verschillende class te geven, en dan regelt het zich allemaal vanzelf.


    Dus: de tabellen het raam uit, en CSS voor de opmaak = mooie schone en simpele html, en krachtig werkende pagina's.
    Voorjaarsschoonmaak!
    Is dit genoeg wettig en overtuigend bewijs?

    Met vriendelijke groet,
    CSShunter
    Laatst aangepast door csshunter : 8 mei 2012 om 20:21 Reden: paar tikfoutjes
    Als een webpagina plots niet doet wat je wilt, raadpleeg dan eerst de html-validator, vóórdat je wanhopig aan de css gaat sleutelen. En vraag de css-validator om op alle punten en komma's te letten. Staat er een (goed) DOCtype boven? Doet de pagina niet gewoon wat moet volgens de html-specificatie en de regels voor css? Daarna pas sleutelen!
    (als dat nog nodig is!) - O, ken je de Webrichtijnen (test) al?

  6. #6
    Senior Member Janzwart's avatar
    Geregistreerd
    21 november 2011
    Locatie
    Zwartewaterland
    Afstand tot server
    ±44 km
    Als dat geen service is, dan kunnen ze dat woord uit het woordenboek schrappen...
    Vriendelijke groet,

    Jan

  7. #7

    Thumbs up

    Hallo csshunter,

    Heel erg bedankt voor je uitgebreide antwoord, ik kan weer verder en nu de logge html-code efficiënter en gestroomlijnder maken!
    Super

    Hartelijke groet,

    Tieske85

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren
Linkpartners
Aanbiedingen