WeetHet - HTML - Het 100% probleem opgelost

Jouw IP adres:

18.224.55.63

Pagina printen
- kies Landscape

Zoeken in de
WeetHet pagina's

WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
Voor uitstekende webhosting welke zowel betrouwbaar als betaalbaar is adviseren wij: LiquidWeb

Op deze pagina ...

Als je met tabellen gaat werken, of andere zaken die een breedte-parameter hebben (width), dan kan het gebeuren dat je te maken krijgt met het 100% probleem.

Wat is nu dat 100% probleem?

Het 100% probleem doet zich op verschillende plaatsen voor. De (mij) meest bekende plaatsen zijn:

Als een Java Applet 100% breed moet worden
Als een tabel een onbekende breedte heeft voor minstens 1 kolom

Oplossing?

Ik heb een Javascript geschreven die dit probleem oplost.

Wat is het 100% probleem?

Hieronder schets ik 2 situaties waarin dit probleem zich voordoet.

Als eerste: het probleem met een Java Applet die 100% breed moet worden.

Normaal doe je dat door de "width" op 100% te zetten zoals in dit voorbeeld:

In de meeste browsers gaat dit goed, althans ... de eerste keer. Met name Internet Explorer werkt nog weleens in de verkeerde volgorde. Eerst de applets initialiseren en dan pas bepalen wat 100% is uitgedrukt in pixels. De Applet wordt dan of te klein of er verschijnt een grijs vakje ... en geen applet.

De tweede situatie: tabellen met minstens 1 kolom met een ongedefineerde breedte.

Stel je hebt een tabel met 3 kolommen (dit doet zich op deze WeetHet pagina ook voor!).

De meest linkse en meest rechtse kolom bevatten een plaatje van 100 pixels breed en deze kolommen mogen absoluut niet breeder worden omdat anders de plaatjes op de verkeerde plaats komen te staan. De middelste kolom moet zich aanpassen aan de breedte van de pagina.

Een truuc is geen width invullen voor de tweede kolom, of voor de tweede kolom een width van 100% invullen. In HTML gaat er dat zo uitzien:

<table width="100%">
<tr>
<td width="100"><plaatje></td>
<td width="100%">blabla</td>
<td width="100"><plaatje></td>
</tr>
</table>

Helaas pindakaas,... in bepaalde browsers wordt dat dus niet wat je zou willen (Netscape is daar erg goed in).

De breedte van de middelste kolom wordt verhoudingsgewijs aangepast aan de breedte van de pagina en dus ook de linkse en rechtse kolom zijn niet meer de gewenste 100 pixels breed.

De Oplossing

Ik heb een klein stukje JavaScript gemaakt die hier omheen werkt (werkt met o.a. Internet Explorer, Netscape, Opera en NetCaptor). Dit is een Javascript functie ("getwidth()")die de breedte van de pagina in pixels terug geeft, verminderd met de waarde van de meegegeven paramter. Zo kan dit script op 1 pagina voor meerdere doelen gebruikt worden.

Dus stel de totale breedte is 600 pixels en je roept de functie "getwidth(0)" aan, dan wordt het antwoord 600 pixels. Als je de functie aanroept "getwidth(200)" dan levert dit het antwoord 400 pixels.

<script language="JavaScript">
  function getwidth(x)
  {
  // this script fixes some clientwidth bugs for the menu to be fullsize
  // Free to use by anyone if this header remains in position
  // (C)2000 Hans Luyten
  
  clientwidth=2000;

  if (self.innerWidth)
     {
     if (navigator.appName.indexOf('etscape')!=-1)
        {
        clientWidth = self.innerWidth-17;
        }
        else
        clientWidth = self.innerWidth; 
     }
     else if (document.body)
     {
        clientWidth = document.body.clientWidth;
     }

  returnwidth=clientWidth-x;

  return returnwidth;
  }
</script>

Hoe gebruiken we deze code nu?

Als eerste kopieer je deze code in jouw webpagina, tussen de </head> en <body> tags.

In de code zet je in plaats van de term "100%" het volgende: "&{getwidth(BREED)};". Hierbij is BREED gelijk is aan de som van de breedte van de twee kolommen in het tweede voorbeeld, of gelijk aan nul als we kijken naar het eerste voorbeeld.

Bovenstaande voorbeelden worden dan als volgt ingevoerd.

Java Applet voorbeeld:

We willen de volle breedte in pixels weten, dus de parameter wordt nul (0).

Tabel voorbeeld:

We willen het aantal pixels weten van de totale breedte van de pagina, minus de breedte van de twee kolommen. De parameter wordt dus 200 (2 kolommen van ieder 100 pixels).

<table width="100%">
<tr>
<td width="100"><plaatje></td>
<td width="&{getwidth(200)};">blabla</td>
<td width="100"><plaatje></td>
</tr>
</table>