News Alert Box
Met een klein stukje code in je html-pagina en een doordacht samengesteld css-bestandje, kan je op alle html-pagina's van je site een alert box opnemen, waarvan je de inhoud centraal in één klap op alle pagina's tegelijk kan updaten. Zo maak je met CSS je eigen news alert box.
News alert - een alert box met CSS
In deze voorbeeldpagina is een <div> opgenomen met de id 'news alert'. Die <div> is absoluut gepositioneerd in de linker-bovenhoek van het venster van een grafische browser.
Als het goed is, ziet u links-boven een oranje blokje in het venster van uw browser staan, met daarin de tekst 'Nieuwsflits'. Dat is de <div> die ik bedoel.
Als u met de cursor op dat oranje blokje gaat staan, verschijnt een lap tekst in beeld. Dat is de nieuwsflits.
Naar behoefte kunt u die alert box 'aan' en 'uit' schakelen, door de relevante css-definities te verbergen (bijvoorbeeld door er commentaar van de maken in de style sheet).
Voordelen van een CSS News Alert Box
Zonder gebruik te maken van enige scripttaal is het toch mogelijk om wat content over een gehele site in één keer in alle pagina's tegelijk te actualiseren, door op slechts één plaats in een klein bestandje wat te wijzigen.
Dat betekent dat webmasters die geen mogelijkheden hebben om scripts te draaien (omdat ze in het gebruik van server side scripting door hun provider zijn beperkt, of omdat ze er geen verstand van hebben), toch in staat zijn een soort <!include te simuleren.
Een ander voordeel is, dat het er niet toe doet of de bezoeker client side scriptin toestaat of heeft uitgeschakeld. Zo zullen
Een laatste voordeel is de beheersbaarheid van de presentatie. Omdat de alert box in CSS wordt gedefinieerd, is niet alleen de content flexibel aan te passen, maar ook het uiterlijk, de vormgeving. Wat wijzigingen in de relevante style sheet en door de hele site heen zijn alle pagina's
Nadelen van een CSS News Alert Box
Het grootste nadeel is uiteraard, dat alleen grafische browsers met volledige CSS-capaciteiten de alert box zullen tonen op de manier die je hebt bedoeld.
Een ander belangrijk nadeel is het feit dat er niet alleen browsers zijn die CSS niet gebruiken, maar ook browsers die CSS fout renderen. Zo'n browser is de inmiddels haast antieke, maar desondanks toch extreem veel gebruikte Internet Explorer.
Internet Explorer in het bijzonder kan niets met :hover die op iets anders wordt geplaatst dan een anchor. Bovendien kan Internet Explorer niets doen met generated content, noch met :before of :after. En generated content met één van die twee pseudo-elementen is nou net de motor achter het in deze pagina getoonde grapje.
Hoe doe je dit?
Ik heb gebruik gemaakt van de pseudo-class :before op een anchor element. In mijn markup heb ik een anchor element geplaatst in een div met de id "news_alert". Het anchor element mag leeg blijven, maar ik laat 'm verwijzen naar deze pagina (hier niet zo zinvol, maar vanaf de andere voorbeeldpagina's is het dat wel). In de div heb ik een span opgenomen die als vervangende tekst werkt in niet-grafische browsers of browsers zonder CSS capaciteit.
In de html staat dus:
<div id="news_alert">
<a href="http://foo.bar/"></a>
<span>Hier de vervangende tekst, eventueel met
<a href="http://foo.bar/">een link</a>
naar de beoogde pagina.</span>
</div>
Vervolgens gebruik ik CSS om die div en het anchor element en de span in die div nuttig te maken. Niet alleen de opmaak bepaal ik in de CSS, maar juist ook de inhoud, content van de div.
In het stijlblad zijn dus niet de vormgevingsdefinities van belang, maar de overige definities. Heel kort door de bocht is dit wat er toe doet:
/* voor de plaatsing van de box */ body>div#news_alert a, body>div#news_alert a:before, body>div#news_alert a:hover:before { display:block; position:absolute; top:$top; left:$left; width:$width; height:$height; text-decoration:none; font-style:normal; } /* voor het 'aanmaken' van de box */ body>div#news_alert a { z-index:$z-index; content:" "; } /* voor de oorspronkelijke content van de box */ body>div#news_alert a:before { z-index:$z-index+10; content:"NIEUWSFLITS"; } /* voor de variabele content van de box */ body>div#news_alert a:hover:before { z-index:120; width:$width; height:auto!important; /* Hier de content van de alert box aanpassen */ content:"variabele content"; } /* de 'no-css' tekst verbergen */ div#news_alert span { display:none; visibility:hidden; } /* de alert box tijdelijk 'uit' zetten */ /* VERBERG DE ALERT BOX #content>div#news_alert { display:none; visibility:hidden; } */
Door gebruik te maken van de child selector en de pseudo class :before in de css, blijft het geheel verborgen voor Internet Explorer. Dat is belangrijk, want die browser kan niets fatsoenlijks met generated content doen.
Zie het gehele stijlblad bij deze pagina voor de exacte stijldefinities.
Check ook even de Test directory. Daar bevinden zich verschillende test- en voorbeeldpagina's waarvan er sommige relevant kunnen zijn bij het onderwerp van deze pagina.
Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,