CSS codes ingekort (shorthand properties)

laadtijd verkorten door shorthandproperties te gebruiken
Je kunt er voor kiezen om al je css code helemaal uit te schrijven, maar er zijn verschillende korte
notaties mogelijk, waarmee je toch hetzelfde resultaat bereikt. De zogenaamde shorthand properties.
We zetten ze op een rij, zodat je website weer een beetje sneller wordt.

We gaan in op shorthandproperties voor de border, font, lijsten, background, margin en padding.

Shorthand properties voor border

Gebruik:

border: 1px solid black;

in plaats van

border-width: 1px;
border-style: solid;
border-color: black;

Gebruik:

border-right: 1px solid black;

in plaats van

border-right-width: 1px;
border-right-style: solid;
border-right-color: black;

Hierbij kun je ‘right’ vervangen voor left, top en bottom.

Shorthand properties voor font

Gebruik:

font: 1em/1.5em bold italic serif;

Lees verder »

Navigatie op je website

highlight menu
De meeste sites gebruiken een vorm van navigatie om de bezoeker te helpen door de website te klikken.
Soms kan het handig zijn om de bezoeker te laten weten waar hij zich bevindt. Zonder dat je gebruik
maakt van het invoegen van een uitgebreid script en zonder dat je html code op elke pagina moet
aanpassen is het mogelijk om de knop van de huidige pagina te veranderen ten opzichte van de rest.

Stel dat je navigatie er als volgt uit ziet:

<ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> <li><a href="#" class="contact">Contact</a></li> </ul>

Lees verder »

De basis van SEO, zoekmachine optimalisering


SEO, Search Engine Optimization, in goed Nederlands Zoekmachine optimalisatie, is een
ingewikkelde materie, maar met een aantal basisprincipes die voor iedere websitebouwer
goed te regelen zijn. We zetten een aantal van die zaken op en rij. We hebben ook een
onderdeel in het forum ingevoegd over SEO.

Lees verder »

Foto met schaduwrand in CSS


Wanneer je een foto wat meer eruit wilt laten springen dan kun je er een schaduwrand achter laten vallen
zodat de foto oplicht. Dit kan met behulp van CSS. Je hebt een foto nodig en een schaduwplaatje. In
ons artikel willen we gaan kijken hoe je dit precies aan moet pakken.

voorbeeldfoto met schaduwrand

Het eerste wat je natuurlijk nodig hebt is de foto die je wilt gaan verfraaien met een schaduw. Nu zal dit
het probleem niet zijn dus daar hebben we het verder niet meer over.
Het tweede wat je moet maken is een
achtergrondplaatje met een egale kleur, in ons voorbeeld hebben we een .png gemaakt van 600×600 pixels.
in principe is deze groot genoeg voor ieder plaatje wat op een website komt te staan.
Maak van het zelfde
plaatje ook een .gif bestand aan, dat hebben we nodig voor Internet Explorer. Wij hebben in ons voorbeeld
gekozen voor de kleur grijs (#666666).

We zetten de foto voor het gemak in de htmlcode in een fotolijst. Dat doen we door het in een div te
zetten met de klasse “fotolijst”. Dus zo:

<div class="fotolijst">
<img src="img/woman1.jpg" alt="voorbeeldfoto met schaduwrand" width="150" height="186">
</div>

In het stijlblad komt de volgende code te staan voor de achtergrond

div.fotolijst{ float: left; background: url(shadow.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 7px 0 10px !important; margin: 10px 7px 0 10px; }

Lees verder »