Zij-effecten bij het werken met style-sheets
Om een webpagina er aantrekkelijk uit te laten zien, moet deze worden opgemaakt: Tekst netjes uitgevuld, kopjes gecentreerd (of juist niet…), plaatjes van geschikte afmetingen op de goede plaats, enzovoort.
Om dit te bereiken bestaan verschillende mogelijkheden:
- HTML-tags zoals p, hx, blockquote, code, enz.
- Classes en/of ID's in een CSS-styleblock of -sheet.
- Style-attributen in HTML-tags.
Als je de zaken heel consequent aanpakt zul je er één benadering kiezen en daar niet van afwijken. Helaas leidt dat er toe dat de code van je website óf onnodig groot, óf heel ingewikkeld wordt. In beide gevallen wordt het onderhoud van de webpagina erg lastig.
Bij de huidige status van de techniek kun je er niet omheen om deze drie benaderingen te combineren. Dat geldt zeker als je zelf code schrijft met een HTML-editor (of met Windows Kladblok). Dan kun je er echter tegenaan lopen dat opmaak-attributen in een tag door de browser worden genegeerd.
De oorzaak van deze verschijnselen is terug te voeren op de volgorde die een browser gebruikt bij het verwerken van opmaak-voorschriften in styles en tags. Op deze pagina wordt een aantal voorbeelden gegeven van dingen die fout gaan en hoe je dat oplost.
Van belang is te weten dat de browser een bepaalde volgorde aanhoudt bij het opmaken van de pagina:
- instellingen van de browser zelf, worden overschreven door:
- opmaak-attributen in tags, worden overschreven door:
- CSS-styles (in sheet of block), worden overschreven door:
- style-attributen in tags
Voorbeelden
Probleem:
De tekst in onderstaande table cell moet worden gecentreerd, dat werkt niet.
<td align="center">Gecentreerde tekst</td>
Het stylesheet bevat:
td {
text-align:justify;
}
Merk op dat dit ook kan voorkomen met body,p, div, span, enz.
Mogelijke Oplossing:
<td><div align="center">Gecentreerde tekst</div></td>
De <div>-tag verandert de inhoud van de cel, niet de cel zelf.
Probleem:
Alle plaatjes komen aan de linkerkant van de pagina. Het attribuut align="right" in de <img>-tag werkt niet.
Het stylesheet bevat:
img {
float: left;
}
Dit zorgt ervoor dat alle plaatjes links worden uitgelijnd.
Mogelijke Oplossing:
<img src="......" alt="" width="..." height="..." hspace="..." vspace="..." border="..."
style="float:right">
Het style-attribuut in de <img>-tag overschrijft de instelling in het stylesheet.
Probleem:
Onderstaande tekst moet vet worden weergegeven, dat werkt niet.
<b><span class="Kopje">Vetgedrukte tekst</span></b>
Het stylesheet bevat:
.Kopje {
font-weight: normal;
}
Dit zorgt ervoor dat tekst normaal wordt weergegeven.
Mogelijke Oplossing:
<span class="Kopje"><b>Vetgedrukte tekst</b></span>
Plaats de <b>-tag binnen de <span>-tag. Dit verandert de opmaak binnen de <span>-tag.
Probleem:
Positioneren met geneste <div>-tags gaat niet goed.
Als je een <div>-tag binnen een <div>-tag nodig hebt, kunnen er problemen ontstaan als je in beide tags de CSS-eigenschap position gebruikt.
Mogelijke Oplossing:
Wissel de CSS-eigenschappen position:absolute en position:relative af. Als de eerste <div>-tag relative heeft, heeft de volgende absolute, Daarbinnen is het weer relative, dan weer absolute, enzovoort.
Probleem:
CSS-eigenschappen kunnen niet worden gewijzigd met JavaScript
Als je bijvoorbeeld de CSS-eigenschap left wilt animeren met JavaScript, lukt dat vaak niet als left binnen een <style>-tag in het HTML-document staat, of in een gelinkt CSS-bestand.. De oorzaak is mij niet duidelijk, want volgens de specificaties zou het wel moeten kunnen.
Mogelijke Oplossing:
Zet de CSS-eigenschappen die je wilt animeren in een style-attribuut in de HTML-tag van het betreffende element.
Opmerking:
Het ligt voor de hand te denken dat je dit soort problemen niet tegenkomt als je een content management systeem (CMS) gebruikt.
In het CMS is de opmaak van de betreffende website vastgelegd in CSS-sheets, waar je niet zomaar van af kunt wijken. Op deze
manier wordt inderdaad voorkomen dat je conflicten tussen tags en styles krijgt. Dat levert echter niet altijd de meest
efficiënte code op. De kwaliteit van het CMS en de kundigheid van de programmeur zijn hier bepalend.
Zie ook het item Eenvoudige <style>-sheets voor tekst.
