Mönstrad bläddringslist

I Internet Explorer finns möjligheten att färga bläddringslisten med hjälp av CSS-kod. Jag har fått frågan om man kan göra så att "track"-delen, dvs bakgrunden på bläddringslisten, blir mönstrad och detta är den lösning jag kommit fram till. Jag har skrivit kommentarer i koden så att det ska vara lätt att gå in och ändra efter de bakgrunder och färger som man själv vill använda. Observera att detta bara fungerar i Internet Explorer! I andra webbläsare ser scrollen ut som vanligt. Om du får problem så maila mig. Hämta hem koden här.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Katarina Wästlund">

<!-- This code is written by Katarina Wästlund, http://kattisdesign.wastlund.se, and can be used for pages for personal use as long as this comment stays intact. If you use this code for making linkware you must link to my page: http://kattisdesign.wastlund.se -->
<title>Mönstrad bläddringslist/ Scrollbar with patterned background</title>

<style type="text/css">
<!--
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {

/*sätt färgerna på din scrollbar, fungerar endast i IE*/
/*Add the colours for your scrollbar, works only in IE*/

scrollbar-face-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color : #FFFFFF;
scrollbar-darkshadow-color : #000000;
scrollbar-base-color : #000000;

/*Sätt en färg på din track som inte används någon annanstans på sidan.
Denna färg kommer att bli genomskinlig*/
/*Add a color for your track. This colour should not be used anywhere else on the page,
since it will become transparent.*/

scrollbar-track-color : #FF0000;

/*Här sätter du den bakgrund som kommer att lysa igenom.*/
/*Here is the background that will shine through.*/

background : url("http://kattisdesign.wastlund.se/grafik/textures/greenglass.jpg");

/*Ange en bakgrundsfärg i samma färgnyans som bakgrunden medan sidan laddas*/
/*Add a background color in the same colour as the background while the page is loading*/

background-color: #B3CFB3;

overflow : auto;
}

.contentbox {

width: 100%;
height: 100%;
overflow: auto;

/*Här sätter vi vilken färg som ska bli transparent*/
/*Here is the color that will be transparent*/
filter: chroma(color=#FF0000);

/*Ange en bakgrundsfärg i samma färgnyans som bakgrunden på sidan medan sidan laddas*/
/*Add a background color in the same colour as the main background while the page is loading*/

background-color: #f4c6dc;

/*Bakgrunden på sidan*/
/*The main background on the page*/

background: url("http://kattisdesign.wastlund.se/grafik/textures/pinkmarmor.gif");

}
-->
</style>

</head>

<body>

<div class="contentbox" allowtranparency="true">

<p>Lägg till din text här...<br>
Add your text here...</p>

</div>

</body>

</html>
© Kattis 2004