Pagina hits: 2824 [Vandaag: 3] | Momenteel: 6 gebruikers online

WebsiteBaker - Tips

Fouten in CSS oplossen

Templates / CSS
WebsiteBaker - Tips >> Templates / CSS


Veel gebruikers van Website Baker (maar ook andere CMS'en) gebruiken bestaande templates voor hun website. Bestaande templates speciaal aangepast voor Website Baker kan je natuurlijk vinden op de website van Website Baker maar ook bij allerlei Open Source Template websites kan je leuke ontwerpen vinden die je met weinig moeite kan aanpassen voor gebruik in je website.

Heel vaak komen er op het forum vragen over het aanpassen van de template. In 99% van de gevallen betreft het aanpassingen die in de stylesheet (CSS) zijn gemaakt, en een ander effect blijken te hebben als de bedoeling was.

Voor de Firefox browser bestaan hiervoor een paar erg handige hulpmiddelen.

Ten eerste is er FireBug. Met deze plugin kan je de pagina inspecteren door met je muis over delen van de pagina te gaan. Onderin het window komt dan de HTML code en de op dat moment aktieve stijl elementen te staan.
Erg handig daarbij is dat je de stijl elementen direct kan aanpassen waarbij je in het scherm ziet wat er gebeurd. Ook kan je nieuwe rules toevoegen in de bestaande elementen waardoor je het effect van die rule kan bekijken.

Screenshot Firebug

 

Een andere tool voor Firefox is de plugin Web Developer.

Web Developer geeft je heel veel informatie over je webpagina. Zo kan je bijvoorbeeld alle tabellen of cellen bekijken. Web developer zet er dan een dun lijntje omheen waardoor je precie kan zien waar eventuele fouten in je tabel veroorzaakt worden.
Ook zijn er hele handige tools zoals het direct aanroepen van de CSS en/of HTML validators van w3.org en het resizen van je (browser)scherm naar andere formaten om te controleren hoe je website er op zo'n scherm formaat uit ziet.
Ook erg handig bij het ontwikkelen van een template is de mogelijkheid om je browser cache of javascript tijdelijk uit te schakelen.

Screenshot Web Developer

 

Voor Internet Explorer bestaat er de Internet Explorer Developer Toolbar.
De mensen van Microsoft hebben goed naar de hierboven beschreven FireFox plugins gekeken.

Screenshot IE Developer Toolbar


Omdat Internet Explorer toch de meest gebruikte browser is kan je er niet omheen om je website goed in IE te bekijken. Helaas heeft IE ook nogal wat foutjes in de verwerking van de stylesheets dus je zal vaak ook nog wat speciale truuks moeten uithalen om je website zowel in Internet Explorer als in Firefox er goed uit te laten zien.

Over de problemen en oplossingen met Internet Explorer stylesheets zal ik later nog wat proberen te schrijven.



<< Naar het overzicht

Commentaren

Niet gevonden

Commentaar toevoegen


Onderwerpen


Meest gelezen