Weg met die grijze scrollbalken!
joel |
2003-11-13 |
Programmeren en techniek
Je kunt heel eenvoudig gekleurde scrollbalken in jouw site maken. Je kunt natuurlijk meerdere scrolbalken hebben in de site zelf of in een tekstvak. Deze kun je allen voorzien van een kleur. Als je gebruik maakt frames, is dit zeker een aanrader. Op deze manier kan je namelijk de kleur van de scollbalken aanpassen aan de opmaak van jou site.
Misschien heb je wel eens van die HTML-codes gezien en kwam dat wat ingewikkeld over. Het voorbeeld hieronder is vrij simpel.
Om aan te geven van welk object je de scrollbalk-kleur wil aanpassen, moet je een classnaam voorzien. In onderstaand voorbeeld kan je zien dat ik twee objecten heb, de body en een tekstveld. Beiden hebben een gekleurde scrollbalk.
Stap 1: Kopieer onderstaande code en zet die tussen de tags van de HTML van de homepage:
<style>
.zethierjeersteclassnaam
{scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:red;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:}
.zethierjetweedeclassnaam
{scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:blue;
crollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:}
</style>
Stap 2: Vervang <BODY> voor <BODY CLASS="
zethierjeeersteclassnaam ">
(Niet kopiëren en plakken!)
Stap 3: Kopieer onderstaande code en zet die tussen de BODY-tags van de HTML van de homepage:
<textarea cols=75 rows=15 wrap=off
class=" zethierjetweedeclassnaam ">
In dit voorbeeld heb ik enkel de basiskleuren ingesteld, red en blue. Je kunt natuurlijk meerdere kleuren instellen voor de verschillende onderdelen. Je kunt de kleur op twee manieren aangeven, door de naam van deze kleur op te geven of het kleurnummer. Zo is bijvoorbeeld #FFFFFF wit en is #000000 zwart.
De code die tussen de STYLE-tags staat, is de code die de kleuren voorziet. Deze moet tussen de HEAD-tags staan. De kleuren ga je bepalen per classnaam. In de BODY-tags ga je dan weer aangeven bij welke classnaam jouw object (in dit voorbeeld: de body en de textarea) hoort.
Probeer het maar eens uit. Veel plezier!
Tip 1: MSDN is een site die voor jou de code opbouwt. Helaas zijn hier enkel lichte kleuren voorzien, maar je kunt natuurlijk altijd andere kleuren kiezen.
Tip 2: Klik hier voor een heel handig hulpmiddel bij het bepalen van de kleurcodes: Color Picker.
