MaGiCSuN
08-23-2003, 03:53 PM
In this tutorial i will show you on how to make div scrollbars transparent too so that you can get nice effects with your layout by just viewing the two arrows.
[list=1]
First open a new file in notepad.
then add this coding between your <head> and </head> :
<style type="text/css">
<--
.divscroll { scrollbar-face-color: #CC9966; scrollbar-highlight-color : #CC9966; scrollbar-3dlight-color : #CC9966; scrollbar-shadow-color : #CC9966; scrollbar-darkshadow-color : #CC9966; scrollbar-track-color : #CC9966; scrollbar-arrow-color : #FFFFFF; }
-->
</style>
The next thing you have to do is adding a div area to your file between the <body> and </body> tag
<div style="height: 100px; width: 100px; overflow: auto; FILTER: chroma(color=#CC9966)" class="divscroll">YOUR TEXT IN HERE</div>
as you can see i added a green part to the code, that is the chroma filter that will make the scrollbar transparent. the colours of the scrollbar in the CSS coding should always be the same as the color from the CHROMA color in the <div>
I also added an blue part and that part makes the div area go scrolling. The class="divscroll" is the part that referrs to the CSS coding in the <head> section, so that it knows which scrollbars to make transparent.
if you have followed all the steps carefully then this should be the whole HTML from the whole page:
<html>
<head>
<style type="text/css">
<--
.divscroll { scrollbar-face-color: #CC9966; scrollbar-highlight-color : #CC9966; scrollbar-3dlight-color : #CC9966; scrollbar-shadow-color : #CC9966; scrollbar-darkshadow-color : #CC9966; scrollbar-track-color : #CC9966; scrollbar-arrow-color : #FFFFFF; }
-->
</style>
</head>
<body>
<div style="height: 100px; width: 100px; overflow: auto; FILTER: chroma(color=#CC9966)" class="divscroll">YOUR TEXT IN HERE</div>
</body>
</html>
now save your page as an .html file and you are ready to preview it in your browser. Make sure you have IE 5.5 or above, or else you will just see the grey scrollbars. [/list=1]
Love,
Mirna
[list=1]
First open a new file in notepad.
then add this coding between your <head> and </head> :
<style type="text/css">
<--
.divscroll { scrollbar-face-color: #CC9966; scrollbar-highlight-color : #CC9966; scrollbar-3dlight-color : #CC9966; scrollbar-shadow-color : #CC9966; scrollbar-darkshadow-color : #CC9966; scrollbar-track-color : #CC9966; scrollbar-arrow-color : #FFFFFF; }
-->
</style>
The next thing you have to do is adding a div area to your file between the <body> and </body> tag
<div style="height: 100px; width: 100px; overflow: auto; FILTER: chroma(color=#CC9966)" class="divscroll">YOUR TEXT IN HERE</div>
as you can see i added a green part to the code, that is the chroma filter that will make the scrollbar transparent. the colours of the scrollbar in the CSS coding should always be the same as the color from the CHROMA color in the <div>
I also added an blue part and that part makes the div area go scrolling. The class="divscroll" is the part that referrs to the CSS coding in the <head> section, so that it knows which scrollbars to make transparent.
if you have followed all the steps carefully then this should be the whole HTML from the whole page:
<html>
<head>
<style type="text/css">
<--
.divscroll { scrollbar-face-color: #CC9966; scrollbar-highlight-color : #CC9966; scrollbar-3dlight-color : #CC9966; scrollbar-shadow-color : #CC9966; scrollbar-darkshadow-color : #CC9966; scrollbar-track-color : #CC9966; scrollbar-arrow-color : #FFFFFF; }
-->
</style>
</head>
<body>
<div style="height: 100px; width: 100px; overflow: auto; FILTER: chroma(color=#CC9966)" class="divscroll">YOUR TEXT IN HERE</div>
</body>
</html>
now save your page as an .html file and you are ready to preview it in your browser. Make sure you have IE 5.5 or above, or else you will just see the grey scrollbars. [/list=1]
Love,
Mirna