Het grote webdesign topic

Hebje iets gemaakt of gewoon gevonden, met betrekking tot webdesign... Post het hier dan.

Als je kritiek hebt op sites, post ze dan.

Ben je trots op je site, post ze dan.

ik heb aardige portfolio
zal hem binnenkort is poste

Uitspraak van verwijderd op vrijdag 22 januari 2010 om 10:42:

▶

ik heb aardige portfolio

Die van ons wordt ook aardig alleen niet helemaal up-to-date haha.

Bezig met site van Deepack & MC DV8 atm. Beide afgerond echter nog even wachten totdat alles is gevuld met data.

Uitspraak van Pjom op vrijdag 22 januari 2010 om 10:38:

▶

Mensen nog met dingen bezig? Beetje stil hier

jazeker, maar dat zal ik pas over 2 of 3 maanden hier komen posten

Geen probleem alleen jammer dat het tussendoor zo stilletjes is Ik werk nu namelijk aan project administratie dingetje in PHP

Daar gelden dan weer hele andere disciplines voor dan een doorsnee website. Altijd wel leuk om te doen
Ik ben nu bezig met een website volledig in AS3.

Bevalt het een beetje? Ik prefereer toch nog steeds wel PHP liefst ICM met ZendFramework.

Zojuist weer nieuwe opdracht bevestigd gekregen

Actionscript 3 = Flash..
uiteindelijk zal alle data wel via PHP uit of in de database komen

Net online geplaatst.(simpele website hoor).

www.hardstyletop40.com

Ow en nog eentje trouwens

http://www.deepack.nl/

Ow en nog eentje

www.mcdv8.nl

Alles zelf ontworpen Heatzone?
Zeer netjes gedaan.

Uiteraard zelf ontworpen he Alhoewel ik het niet doe maar iemand binnen ons bedrijf.

PHP werk komt van mij af incl backend natuurlijk

backend ook?

Nee zelf geschreen he, geen joomla.

Vind joomla de laatste jaren maar prut zeker nu ze beweren een framework te zijn. Alles is netjes geschreven op Zend Framework

ah, kijk.. beter
Joomla heb ik uit nieuwsgierigheid ook een keer bekeken, maar meteen eraf gedonderd. Ik ben ook voor een eigen CMS.. als je het goed opzet, heb je er later alleen maar meer profijt van. Behalve .NET en Jquery ben ik niet van de frameworks.. je eigen code is wel compact, toch heb je vaak overhead. 't Is wel lekker snel ontwikkelen

Uitspraak van DeCo op vrijdag 29 januari 2010 om 21:34:

▶

't Is wel lekker snel ontwikkelen

Dat is met het .NET framework helemaal.

nja ZF laat je wel alle kanten opgaan dus is wel fijn Mooi als MVC dus alles blijft een beetje gescheiden.

Enige nadeel in PHP is nog altijd templating maargoed.

Howdy dudes, ik heb effe een technisch vraagje wat betreft DIVs en CSS... want ik kom er echt effe zelf niet uit. Ik zit hier al 2 dagen mee te stoeien.

Ik heb een jaar of 10 met tables gewerkt voor m'n layouts, en ik ben nu eindelijk naar DIVs aan het overstappen
Al wat dingen geleerd over positioneren, absolute, relative, clear: both, etc etc.

Maar nu heb ik toch 1 klein dingetje wat me met DIVs maar niet wil lukken:
Ziehier het ontwerp voor m'n nieuwe site:

http://2010.mentalwreckage.com/
Stylesheet: http://2010.mentalwreckage.com/style.css

Scroll naar beneden en je ziet eigenlijk al meteen wat het probleem is. 1 bepaald DIV'je rechtsonder moet uitgerekt worden. Met TD's / table cells kon dat prima door de table zelf een height van 100% te geven, en alle andere TD's een fixed height... zodat de ene TD zonder height parameter vanzelf meerekte. Maar gezien DIV's allemaal los van elkaar staan wil dat hier dus niet.

Ik heb de desbetreffende DIV al een minimum hoogte gegeven d.m.v. het voor sommige van jullie bekende truukje:
min-height: 209px;
height: auto !important;
height: 209px;

Maar als ik 'm 100% geef, dan wordt ie langer dan de hele site, en gaat 'ie ook over de footer heen. Ziehier:




Ik denk dat ik m'n gehele DIV-structuur misschien moet veranderen, maar ik weet effe niet hoe... ik ben daar nog iets te n00b voor denk ik.

Wie o wie weet heeft een oplossing?

En oh ja... om effe on-topic te gaan. Dit was m'n laatste werk:
http://www.darkraver.nl/inbedwith/

Graphics gebruikt van de flyer & artwork van Psytek. Niet m'n beste werk, maar er was wat haast bij.


En ja, nog met tables

Uitspraak van DeCo op vrijdag 29 januari 2010 om 21:34:

▶

h, kijk.. beter
Joomla heb ik uit nieuwsgierigheid ook een keer bekeken, maar meteen eraf gedonderd. Ik ben ook voor een eigen CMS.. als je het goed opzet, heb je er later alleen maar meer profijt van. Behalve .NET en Jquery ben ik niet van de frameworks.. je eigen code is wel compact, toch heb je vaak overhead. 't Is wel lekker snel ontwikkelen

Heb ook van alles geprobeerd maar toch steeds weer het wiel opnieuw uitgevonden, aan de andere kant je leert er wel weer van.
Nu met Drupal bezig werkt ook goed moet ik zeggen

Uitspraak van verwijderd op zondag 31 januari 2010 om 05:09:

▶

Wie o wie weet heeft een oplossing?

Probeer ipv een position-absolute een float.

Zo heb je meer controle over de layout

Als je dat hebt gedaan, maak dan gebruik van een <br clear="left|both|right" />

Voordeel met floating is dat op de meeste browsers hetzelfde is, en meer controle hebt over de divs

float: right; had ik al geprobeerd... maar om een of andere reden komt 'ie dan juist onder het content-gedeelte. Ziehier:




Mijn DIV-constructie is eigenlijk als volgt:



Rechter colom is idd absolute gepositioneerd in een relative placeholder.
Maar die is eigenlijk helemaal goed... Ik heb om te testen een rode border eromheen gezet, en die is idd 100% vullend in de placeholder.
Dus daar ligt het probleem ook niet. Het probleem zit 'm juist ergens bij de rechts1, rechts2, rechts3 kolommetjes. (n)

Uitspraak van verwijderd op zondag 31 januari 2010 om 19:39:

▶

float: right; had ik al geprobeerd... maar om een of andere reden komt 'ie dan juist onder het content-gedeelte. Ziehier:

Dan is je wrapper waarscheinlijk te klein. Ik ga morgen wel even kijken wat ik ervan kan maken

Uitspraak van verwijderd op zondag 31 januari 2010 om 19:56:

▶

Dan is je wrapper waarscheinlijk te klein.

Zat ik ook al aan te denken, maar links is 709 en rechts 190 in een placeholder van 899. Past dus exact.
Maar misschien heb ik geen rekening gehouden met padding... zal eens effe checken

Uitspraak van verwijderd op zondag 31 januari 2010 om 20:02:

▶

Zat ik ook al aan te denken, maar links is 709 en rechts 190 in een placeholder van 899. Past dus exact.
Maar misschien heb ik geen rekening gehouden met padding... zal eens effe checken

Zet je document type ook op strict

Ik heb er zelf toen ook mee zitten stoeien:

http://www.project-development.nl/projecten/cms/

Uitspraak van Marcel op zondag 31 januari 2010 om 18:11:

▶

Heb ook van alles geprobeerd maar toch steeds weer het wiel opnieuw uitgevonden, aan de andere kant je leert er wel weer van.

Precies ook mijn idee. Frameworks, voorgebakken scripts, etc.. allemaal leuk en aardig, maar het echte hardcore programmeren heeft nog altijd mijn voorkeur. Allereerst kun je alles naar je eigen hand zetten, kan het zelfs optimaler worden, en je leert er nog eens een boel van.

Uitspraak van verwijderd op zondag 31 januari 2010 om 22:02:

▶

Zet je document type ook op strict

ALTIJD op strict zetten. Meestal werkt het dan al in de meeste browsers, met misschien een kleine uitzondering op IE6.. daarbij heb je je opzet dan ook meteen voorbereid op de toekomst. In transitional kun je meer kloten, maar dat komt niet ten goede van de compatibiliteit.

Uitspraak van DeCo op zondag 31 januari 2010 om 22:32:

▶

ALTIJD op strict zetten. Meestal werkt het dan al in de meeste browsers, met misschien een kleine uitzondering op IE6.. daarbij heb je je opzet dan ook meteen voorbereid op de toekomst. In transitional kun je meer kloten, maar dat komt niet ten goede van de compatibiliteit.

Hmm... als ik van Transitional naar Strict ga, welke attributen kan ik dan zoal niet meer gebruiken?
Ik weet alleen dat target="_blank" in een link niet meer kan.

Edit: Nevermind... heb het al gevonden
http://24ways.org/2005/transitional-vs-strict-markup

Ik neem aan dat je dit al weet, maar ik zeg het toch even.
Als je de website op doctype strict zet, controleer je code dan hier even:
http://validator.w3.org/
Anders heeft het vrijwel geen zin om je doctype te veranderen.

Nieuw design:

http://www.louis-dragstra.nl/

Content moet nog aangevuld worden maar dats bijzaak hierzo:)

Graag opmerkingen

Uitspraak van • L™ÐRÀG$TRÁ op donderdag 4 februari 2010 om 13:50:

▶

Graag opmerkingen

Errors found while checking this document as XHTML 1.0 Transitional!
Result: 107 Errors, 6 warning( s)

W3C CSS Validator Resultaten met object : http://www.louis-dragstra.nl/ (CSS versie 2.1)
Sorry! We vonden de volgende fouten (4)

Verder werkt de site niet echt. Als ik in opera op een menu item klik zie ik niets meer.

Lol ja achter die errors was ik ook maar dat is iets wat nog moet nagekekne worden aangezien het van die prutsfoutjes zijn

Met die browsers is dat verschillend door de errors, bij mij werkthet dus weer wel in Opera maar niet in IE.
Dank voor je reactie

pfff, veel van die fouten zijn dingen die slaan nergens op of ligt dat weer eens aan mij?
Ik kom der verder niet uit met de meeste fouten tenminste zoals:

Line 15, Column 15: Attribute "src" exists, but can not be used for this element.

<embed src="/css/images/header.swf" width="880px" height="190px" quality="hig

wtf is der mis met SRC in een embed?

Uitspraak van • L™ÐRÀG$TRÁ op donderdag 4 februari 2010 om 14:16:

▶

Line 15, Column 15: Attribute "src" exists, but can not be used for this element.

<embed src="/css/images/header.swf" width="880px" height="190px" quality="hig

wtf is der mis met SRC in een embed?

gebruik swfobject http://code.google.com/p/swfobject/

Naast deze bestaat er nog een paar, maar daar kan ik even niet opkomen

Betreft over je site (ik bekijk het in FF):
- ik vind je header iets te groot, neemt een groot deel van de site in beslag.
- haal de "menu vernieuwen" weg uit je header (heb je niet nodig lijkt mij).
- vind het effect in het menu te lang duren.
- sluit je bg van je content links en rechts volledig aan het scherm, nu zie ik 2 balken zitten. (tenzij dit de bedoeling is..)
- de heading vind ik niet echt strak. Wellicht cufon gebruiken voor wat strakkere (gebruik maken van truetype) headers
- pagina's zelf (content) is wel erg simpel gedaan.
- haal die poll weg, of maak er zelf 1 vind 'm erg lelijk zo erbij.

Verder vind ik de layout (kleur etc) best ok. Maar mag nog wel wat meer css gebruiken bij de rest

PS: Zet je pagina's (DOCUMENT TYPE) op STRICT

Zooo hee, danku Killer, alleen die document type heeft al tientalle fouten weggehaald!( zit nu op 36 )
Ik zal even kijken naar een SWF object.

dank voor opmerkingen!

-Header is opzettelijk groter aangezien dat toch anders is dan normaal.
-Vernieuwen kan handig zijn maar dit is idd maar een tijdelijke oplossing om menu in originele staat terug te brengen.
-Bg van content ben ik nog mee bezig, voor de een of andere reden pakt de CSS deze buiten de DIV index lijkt het wel.
-Wat bedoel je precies met de 'heading'? Ja, slecht datk dat niet weet maargoed
-Content is een standaard op dit moment inderdaad.

Louis

Uitspraak van • L™ÐRÀG$TRÁ op donderdag 4 februari 2010 om 14:52:

▶

-Wat bedoel je precies met de 'heading'? Ja, slecht datk dat niet weet maargoed

de h1, h2, h3, h4 etc. tags (titel van je pagina).

Gebruik daarnaast een reset css, geeft betere weergave bij meerdere browsers , als je de css wilt hebben, moet je het zeggen

Uitspraak van • L™ÐRÀG$TRÁ op donderdag 4 februari 2010 om 14:52:

▶

dank voor opmerkingen!

Score: 35 van 47
125 richtlijnen:
35 goed of mogelijk goed
12 verbeterpunten
78 niet automatisch te meten.


- Het gebruik van de font tag is niet toegestaan. Fonts dienen middels CSS te worden gespecificeerd.
- Geldige HTML met een strikte DOCTYPE gevonden, maar de pagina toont fouten bij validatie.
- Deze pagina toont bij validatie fouten in de HTML en lijkt gebruik te maken van deprecated (achterhaalde) elementen.
- De CSS toont/tonen fouten bij validatie.
- Deze pagina toont syntactische fouten bij validatie.
- In de kopregelhiërarchie lijkt een niveau te zijn overgeslagen (bijvoorbeeld van h1 naar h3 zonder een h2. Vaak wordt dit veroorzaakt door gebruik van kopregelelementen vanwege de wijze waarop het wordt weergegeven (grootte, nadruk), in plaats van de in de HTML-specificatie beschreven functie van het element: "A heading element briefly describes the topic of the section it introduces".
- In de kopregelhiërarchie lijkt een niveau te zijn overgeslagen (bijvoorbeeld van h1 naar h3 zonder een h2. Vaak wordt dit veroorzaakt door gebruik van kopregelelementen vanwege de wijze waarop het wordt weergegeven (grootte, nadruk), in plaats van de in de HTML-specificatie beschreven functie van het element: "A heading element briefly describes the topic of the section it introduces".
- De pagina bevat b of i tags. Deze tags beschrijven visuele aspecten van tekst, welke beter door CSS beschreven kunnen worden.
- Er is minstens één img element gevonden zonder alt attribuut.
- Er is minstens één style attribuut op de pagina gevonden.
- Er is minstens één tabel gevonden die geen th element gebruikt.
- Er is geen basistaal voor de pagina gespecificeerd.
- Er is geen karakterset in de HTTP header gevonden.

Nog genoeg te doen denk ik zo

Uitspraak van • L™ÐRÀG$TRÁ op donderdag 4 februari 2010 om 14:16:

▶

<embed src="/css/images/header.swf" width="880px" height="190px" quality="hig

waarom staat de SWF in een images map? En waarom staat er een images-map in de css map?
leg je je brood ook in de boekenkast, is je koelkast gevuld met vaatwas en ligt de sokkenkast vol met bestek?

Zooo ... zeker genoeg xD
Hier duik ik straks allemaal nog in zal eerst nog even die SWF object fixen

Toch goed hier te posten aangezien ik nu tegen dingen aanloop waar ik anders niet eens naar kijk

Btw, waarom is de validatie belangrijk als ze het bijv wel in alle browsers goed gezien word?
Dank

Uitspraak van • L™ÐRÀG$TRÁ op donderdag 4 februari 2010 om 15:10:

▶

Btw, waarom is de validatie belangrijk als ze het bijv wel in alle browsers goed gezien word?

Wordt niet in alle browsers goed gezien Zijn gewoon verkeersregels van het web waar je jezelf aan moet houden.

Zoekmachines kunnen het ook wel waarderen als de code gewoon correct is.
Gewoon altijd aan houden, is niet veel moeite en je leert er ook nog eens wat van.

Hallo daar, maat van mij heeft een nieuwe zaak geopend in Vianen en die site moet omhoog bij google en andere zoekmachines. Het gaat om deze site http://www.beaubien.nl

Iemand ideeen of oplossingen behalve spammen dan, want dan lukt me nog wel

Gr

Dan moet je sowieso af van het intro scherm (wat trouwens ook niet goed werkt in firefox).
Dit is alleen maar irritant voor de bezoekers en voor zoekmachines is het ook een ramp.

Verder zie ik dat er nergens goede titels en metadata gebruikt worden, wat wel echt basic dingen zijn.
Google maar eens op 'seo', dan kom je er vast wel aan uit.

Uitspraak van verwijderd op zaterdag 6 februari 2010 om 16:51:

▶

Hallo daar, maat van mij heeft een nieuwe zaak geopend in Vianen en die site moet omhoog bij google en andere zoekmachines. Het gaat om deze site http://www.beaubien.nl

Uitspraak van verwijderd op zaterdag 6 februari 2010 om 18:03:

▶

Dan moet je sowieso af van het intro scherm (wat trouwens ook niet goed werkt in firefox).
Dit is alleen maar irritant voor de bezoekers en voor zoekmachines is het ook een ramp.

Verder zie ik dat er nergens goede titels en metadata gebruikt worden, wat wel echt basic dingen zijn.
Google maar eens op 'seo', dan kom je er vast wel aan uit.

+

- heading tags gebruiken (h1, h2 enz)
- title tags bij je linkjes
- geduld

Uitspraak van ruudvaneijk op zaterdag 6 februari 2010 om 18:26:

▶

http://www.emblic.com/

Netjes ruud, alleen je menu ben ik niet zo'n voorstander van. Al met al vond ik het op het begin allemaal een beetje druk.

Nu er meer video's opstaan krijgt het wel meer vorm moet ik zeggen.

Uitspraak van Qre8ive op woensdag 10 februari 2010 om 18:22:

▶

De Top40 site is dan ook vrij snel gemaakt omdat andere personen met het idee er vandoor wilden gaan. PNG was snelste optie, nog geen tijd gehad om het te verbeteren en te vullen . M.b.t. iets vernieuwends maken. Het is precies wat je zegt, je hoeft niet perse vernieuwend te zijn omdat de browser te oud is. Als je dat wel wil moet je extra tijd gaan steken om de website optimaal te maken voor IE6. Als je constant maar rekening moet houden in je achterhoofd met IE6 bij alles wat je maakt voor het web dan komt er toch een moment waar je stilstaat en niet vooruit kunt? En daarbij zeg ik nog steeds... als iedereen maar braaf alles voor IE6 blijft ontwikkelen, komt er uberhaupt wel een moment waar IE6 verdwijnt? Hoeveel makkelijker zou het zijn dat Microsoft gewoon een standalone versie maakt dat op alle OS draait wat ze nu nog ondersteunen? Het is namelijk al mogelijk via andere software maar omslachtig. Ze hebben genoeg geld lijkt mij bij MS om dat te ontwikkelen.

PNG's gelaagd over elkaar heen leggen, of gewoon een GIFje uitknippen.. dat laatste lijkt me sneller. Daarbij maakt het niet uit of je nu een transparant pixeltje in GIF of in PNG maakt. Dan gaat de voorkeur naar GIF ivm. compatibliteit

Je móet juist vooruit kunnen als ontwikkelaar, maar maak direct bij de ontwikkeling ook concessies voor IE6-gebruikers. Die hoeven de nieuwe dingen niet persé te zien, zolang ze maar wel de functionaliteiten kunnen blijven gebruiken. En wat is "vernieuwend" wat in IE6 niet mogelijk is? In IE6 kun je met workarounds nog steeds dezelfde dingen doen als in IE8. Ik kan je voorbeelden laten zien.

Nogmaals.. het gaat niet om Microsoft, maar het gaat om de bedrijven die pakweg 1250 werkstations (ofzo) hebben staan waar nog IE6 op draait. Langzaam zal IE6 uitgefaseerd worden bij deze bedrijven dus het gaat verdwijnen, maar tot die tijd zul je voor dat bedrijf IE6 moeten blijven ondersteunen, wél met het oog op de huidige browsers natuurlijk, dus laat je niet remmen in eventuele beperkingen die er vaak niet zijn. Je ontwikkelt dus niet specifiek voor IE6, maar je ondersteunt IE6: dat zijn twee wezenlijke verschillen. Je kunt geen applicatie of website verkopen aan dat bedrijf, als ze het zelf niet eens kunnen zien. Door slim te ontwerpen en ook slim te ontwikkelen hoeft IE6 niet tot ergenis of beperkingen te leiden bij de ontwikkelaar. Het kan nog gekker.. ik heb nog niet zo heel lang geleden zelfs nog een site moeten maken dat ook in IE5.5 moest werken. Dan is IE6 een verademing
Of andersom.. een dure applicatie ombouwen wat destijds voor IE6 is ontwikkeld en compleet de fout in gaat in huidige browsers, kost een bedrijf ook een godsvermogen. Klakkeloos al die werkstations upgraden kan dus ook tot problemen leiden. En upgraden doe je niet in een week, of maand.. misschien wel een jaar? Hoe ga je dan om met zo'n overgangsfase? Het is niet zo dat de bedrijven niet willen, maar misschien ook niet eens kunnen.
Je zou eens moeten weten hoeveel oude troep bij bedrijven nog draait.. dan heb ik het niet alleen over browsers.

Kijk.. met alle respect, maar een hippe coole DJ site is zo complex nog niet en daarbij hoeft het niet persé IE6 te ondersteunen. Misschien kun je met kleine, supersimpele aanpassingen dat wel doen (zoals ik al aangaf met de TOP-40 site). Er surfen dagelijks nog erg veel mensen in de pauze of daarbuiten via oude bedrijfsnetwerken naar deze sites. Wat op de anti-IE6 site ook werd vermeld: het zou sadistisch zijn om deze mensen buiten te sluiten.

Een transparatie maken in de vorm van een gif vind ik persoonlijk niet echt strak. De gekartelde randjes is wel iets dat je ziet. Er is een png fix die werkt, maar het stukje code zoekt in ie6 constant naar <img> plaatjes die png bevatten, bovendien is dan de transparantie in je container nog steeds niet opgelost (neem aan dat dat een backround repeat op de y-as is dat zich in de css bevind).

In dit geval zou het niet ernstig zijn omdat je body al redelijk lichblauw is. Google op png-fix en gooi het erin zou ik doen. Mensen die ie6 hebben en zich af vragen waarom hun browser vertragend werkt moeten maar eens updaten naar 7 of het liefst naar FF en Chrome.

ik had 't over een transparant pixeltje.. dat kun je beter met GIF doen ipv. PNG.

En inderdaad.. transparantie met GIF geeft je geen alpha-channel.. maar je hebt niet altijd persé een alpha-channel nodig.
In dit geval staat het logo (PNG) los op een achtergrond (JPG). Waarom? Je kunt ook één GIFje maken (logo incl. achtergrond), dat is kleiner, sneller en meer compatible. PNG is makkelijk, maar er wordt nog iets te vaak naar gegrepen omdat het zo makkelijk is

Uitspraak van DeCo op maandag 15 februari 2010 om 14:22:

▶

ik had 't over een transparant pixeltje.. dat kun je beter met GIF doen ipv. PNG.

En inderdaad.. transparantie met GIF geeft je geen alpha-channel.. maar je hebt niet altijd persé een alpha-channel nodig.
In dit geval staat het logo (PNG) los op een achtergrond (JPG). Waarom? Je kunt ook één GIFje maken (logo incl. achtergrond), dat is kleiner, sneller en meer compatible. PNG is makkelijk, maar er wordt nog iets te vaak naar gegrepen omdat het zo makkelijk is

Het ligt er maar net aan hoe de layout opgebouwd moet worden, wat voor elementen er weergegeven moet worden en daarbij natuurlijk de functionaliteiten die er aan te pas komen.

dat is zeker waar.. ik heb 't dan ook over "in dit geval"
begrijp me niet verkeerd: ik heb niets tegen PNG, maar het blijft een vreemde eend die ik liever vermijd dan gebruik. Soms kan het niet anders.. dan moet je met PNGfix aan de slag. En dan geldt ook, gebruik PNG met mate want PNGfix is killing voor een oudere browser

Uitspraak van DeCo op maandag 15 februari 2010 om 17:19:

▶

dat is zeker waar.. ik heb 't dan ook over "in dit geval"
begrijp me niet verkeerd: ik heb niets tegen PNG, maar het blijft een vreemde eend die ik liever vermijd dan gebruik. Soms kan het niet anders.. dan moet je met PNGfix aan de slag. En dan geldt ook, gebruik PNG met mate want PNGfix is killing voor een oudere browser

Weet jij trouwens of er veel verschil is tussen de pngfix (js) en de CSS versie met DXImageTransform.Microsoft.AlphaImageLoader ?

Volgens mij is de AlphaImageLoader sneller met laden (ben je wel verplicht om background-image te gebruiken) alleen wat instabieler?