Welkom bij WeetHet!


Managed Web Hosting by Liquid Web

Jouw IP adres:
54.159.148.171
     
 
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.

HTML

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:

<applet code="myapplet.class" width="100%">

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).

<applet code="myapplet.class" width="&{getwidth(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>
 

 


Je bent nu al op de nederlandstalige pagina's Click here to switch to the English pages
Hulp & OverWelkom ... !!GastenboekHulp voor WeetHetWoordenlijst ...Zoeken op het InternetZoeken in WeetHetBeschikbare downloadsNieuws & UpdatesStatistiekenAansprakelijkheidAdverterenDoe mee !!!Vermeldingen/AwardsOver WeetHet ...Hansie goes USAWaar is Hansie?Eerste maandenNieuw thuisUitgaanPuck goes USAMijn nieuwe autoSnapshots PuckRandom snapshotsEindelijk LENTE!Lekkere warme zomerEerste familie bezoekCD's en DVD'sMuziekAudio-DVD naar MP3Muziek CD naar MP3Muziek CD naar WAVKopieer Muziek CDEigen Muziek CDMuziek uit het InternetMP3 Volume aanpassenNero Burning RomBIN/CUE brandenBIN naar ISOComputer CDRomISO brandenFoto VCDFoto SVCDNero vs Nero ExpressNRG naar ISOSVCD brandenSVCD met menuVCD brandenVCD met menuDVD FilmsWat zijn Regiocodes?Wat is MacroVision?Video formatenDIKO: 3 films - 1 DVDHoe werkt een CD?Zelf CDs brandenZelf een DVD makenBIN naar ISONRG naar ISODisk catalogus makenComputer UitlegHoe werkt een CD?Netiquette: E-MailWat is DivX?Wat is MP3?Wat is RAID?Wat is USB?Wat zijn PAR files?Wireless LAN introPC naar TV kabelsXP sneller startenOpstart van USB penFireWire verbind 2 PC'sFoto FormatenGrafisch / Foto'sPhotoshopFoto FormatenSnelle auto3D knoppenBliksem tekenenFotos op CDPictureToTVVideoCD met NeroSVCD met NeroMagix Fotos op CDDVD PictureShowFoto FormatenFoto FormatenGSM / PDAsCompaq iPAQAccu vervangenSeriele craddle op USBGarmin eTrex kabelGarmin eTrex stekkerRonde Garmin stekkerPalmPilotAan Ericsson GSMGarmin eTrex GPSMobiele telefonieEricsson MelodietjesMusicBoxRingtonesMasterA edit SIMSMSC nummersConnector pinoutsHardware & HacksCPU OverklokkenAlgemeenAMD CPU codesAMD Slot-AAMD Socket-ASmartcards Progr.MillenniumAlactel HackLCD display aan PCNetwerk kabelsOpstart van USB penPC naar TV kabelsPromise Ultra -> RAIDSoundblaster MIDIWeerstand kleurenFireWire NetwerkInternetNetwerk algemeenDHCP instellenWin95/98/ME ClientWin2000/XP ClientMac OS 7/8 ClientMac OS X ClientBekende IP-poortenDNS adressenNetwerk kabelsWireless LAN IntroFireWire NetwerkInbel verbindingTCP/IP optimaal Win9xPubliek IP adres?ADSL / MxStreamADSL AlgemeenHoe werkt ADSL?DNS adressenMXStreamInstallerenAnaloog EthernetISDN EthernetRouters en MXStreamSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerProblemen oplossenAlcatel HackHack het modemPassword CalculatorDoel v.d. lampjesProblemen oplossenFirmware upgradeDNS adressenBekende IP-poortenPoorten mappenAutoPortMappingInternet delenMogelijkhedenWinRoute (software)Netwerk Win95/98/MENetwerk Win2000/XPNetwerk Mac OS 7/8Netwerk Mac OS XBekende IP-poortenWireless LAN IntroNetwerk kabelsRoutersSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerInternet via SatellietHoe werkt het?Korte intro ...Overzicht variantenStandaardBySky methode2-Weg InternetKaart installerenWelke Satellietkaart?PC eisenHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemenNieuwe driversSchotel plaatsen (Astra)Schotel formaat?EON ChecklistTransponders EOLRamdisk voor FazztEigen webpaginaNavigatie oplossingenInzicht en oplossingenApyCom apPopupMenuD.Binard PopupMenuPopupMenu generatorPopupMenu platTips en TruuksE-Mail linkE-Mail FORMFavorieten ToevoegenWebpagina ikoon'Pagina Terug' linkSpringen binnen paginaOntsnap aan framesGebruik frametitelStuur framesAutomatisch doorsturenHet 100% probleemAndere link kleurTekst in de statusbalkAchtergrond vastzettenTekst over plaatjesBrowser veilige kleurenHet .htaccess bestandBijzondere tekensWaar downloadenIRC met mIRCInstalleren mIRCDownload films enzoVragen (FAQ)Films uit het InternetFilm kwaliteitWat zijn PAR files?LeechGuyLeechGuy editoreMuleWinMXE-MailNetiquetteCitaat van de dagOverigenHack Arescom NetDSLWireless LAN IntroFireWire NetwerkBekende IP-poortenWat is mijn IP adres?Zoeken (WeetHet)Zoeken (Internet)WeetHet DownloadsEen paar goede websitesDNS adressenMicroControllersBasic Stamp IIStarten met de BS2Assembleren v.d. kitVolledig schemaAansluiten aan de PCBS2 aan 44780 LCD44780 LCD foto'sBS2 aan M50530 LCDM50530 LCD Foto'sZelfbouw BS2Smartcards/SIMProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumKaart soortenGSM SIM bewerkenWeerstand kleurenMuziek / AudioMuziek van InternetIntroductieLeechGuyLeechGuy editorWinMXeMuleM.b.v. mIRCBIN/CUE brandenBIN naar ISOAudio-DVD naar MP3Hoe werkt een CD?Kopieer muziek CDEigen muziek CDWat is MP3?Muziek CD naar MP3MP3 CD v. Yamakawa?MP3 Volume aanpassenMuziek CD naar WAVSB MIDI interfaceAC3 naar WAV/MP3ProgrammerenBorland DelphiHansie zijn Delphi ToolsAYeah!CatalogCitaat van de dagPopupMenu generatorOverzicht ASCII tekensSatelliet (TV & GPS)Satelliet TelevisieSatelliet TV op de PCTV ontvangst op de PCPC eisenNieuwe driversPentam. Pent@VisionHauppauge DVBs NexusTechnoTrend PCLinePVA file naar MPEG2DirecTV TiVoAfstandsbedieningDirecTiVo naar O6.21: Intro & Images2: TiVo disk in PC3: Installeer OS6.24: Eerste start van OS6.25: SuperPatch & Meer6: Films naar PCTyTools - Films naar PCOud: DirecTiVo naar OS4Oud: Sleeper HackSmartcardsProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumKaart soortenWat is DiSEqC?Schotel plaatsen (Astra)Schotel formaatSRT8000 firmwareGPS NavigatieGarmin eTrexDiagnose modeSeriele aansluitingAan de iPAQ 36/38xxAan een PalmPilotDe eTrex stekkerDe ronde stekkerHoe werkt GPS?Wat is GeoCaching?Internet via SatellietHoe werkt het?Korte intro ...Overzicht variantenStandaardBySky methode2-Weg InternetKaart installerenWelke Satellietkaart?PC eisenHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemenNieuwe driversSchotel plaatsen (Astra)Schotel formaat?EON ChecklistTransponders EOLRamdisk voor FazztVideoVideo gids - begin hierIntroductieGSpot: AVI InfoDIKO: 3 films - 1 DVDDownload kwaliteitVideo AlgemeenWat is DivX?Video formatenOpname TypesWelke AVI codecs?Intro K(S)VCD/KDVDDVD+RW ProblemenOver bitratesVideoServer pluginWat zijn Regiocodes?Wat is MacroVision?RippenAudio-DVD naar MP3Foto FormatenAVI naar MPEGGSpot: AVI InfoDIKO: 3 films - 1 DVDAVI naar DVD/(S)VCDZonder ondertitelsD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc met AC3Met OndertitelsD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc met AC3CD Branden NeroVCD brandenVCD met menuSVCD brandenSVCD met menuBIN/CUE brandenDVD SpelersCompatibiliteitDVD toevoegenDVD+RW ProblemenIntro K(S)VCD/KDVDVideo ToolsBitrate CalculatorDVD RippenGSpot: AVI InfoFlaskMPEG en CCEVideoServer pluginDVD naar DivXIntroductieBitrates berekenenRippenDVDx en SmartRipperDVDx instellingenFlaskMPEG methode 1FlaskMPEG methode 2FlaskMPEG methode 3DVD naar (S)VCDIntroductieBitrates berekenenRippenDVDx en SmartRipperDVDx instellingenFlaskMPEG 0.6 en CCEDVDx en Video ServerDivX naar (S)VCDDVD naar DVDDVD2OneDVDShrinkDVD+RW ProblemenTMPGEnc & CoDIKO: 3 films - 1 DVDFilm Knip & PlakGSpot: AVI InfoSamenvoegenMPEG1 en MPEG2Met TMPGEncWomble MPEG2VCRAVI met VirtualDubKnippenMPEG1 en MPEG2Met TMPGEncWomble MPEG2VCREasy Video SplitterAVI en DIVXAVI met VirtualDubEasy Video SplitterFilms van InternetIntroductieLeechGuyLeechGuy editoreMuleWinMXM.b.v. mIRCWat zijn PAR files?BIN/CUE brandenBIN naar ISOFoto's op CDPictureToTVVideoCD met NeroSVCD met NeroMagix Fotos op CDDVD PictureShowOndertitels RippenVobsub: snel en simpel!SubRip (OCR)SynchroniserenOndertitels weergaveWeergave met VobsubSynchroniserenMaak een MicroDVDPC aan de TVPC naar TV kabelsATI softwarenVidia softwareTiVo - Harddisk VCRTiVo Serie 1Wat is een TiVo?TiVo openmakenSeriele toegangDebug Mode toegangLinux Bash shellInstellen van de klokInbellen uitzettenDirecTV TiVoAfstandsbedieningDirecTiVo naar O6.21: Intro & Images2: TiVo disk in PC3: Installeer OS6.24: Eerste start van OS6.25: SuperPatch & Meer6: Films naar PCTyTools - Films naar PCOud: DirecTiVo naar OS4Oud: Sleeper HackYamakawa 713/715IntroductieVeel gestelde vragenDe AfstandsbedieningGeheime codesRegiocode instellenRegiovrij zettenMacroVision uitStandaard-InstellingenWelke DVDRom driveFirmware versieVerander firmwareDownload firmwareAnder achtergrondMP3 CD makenM.U.F.Y. MP3 CD'sHulpForumZoeken (WeetHet)Zoeken (Internet)NieuwsWoordenlijst ...DownloadsLinksStatistiekenAdverterenDoe mee !!!Gastenboek

Liquid Web Fully Managed Web Hosting