74 besökare, 0 medlemmar och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

Bläddringbar ruta - scrollbox

En Box tillämpar du med CSS2 positionering som du kan läsa mer om här » Exemplen nedan använder bredd och höjd i pixlar och egenskapen "overflow" för att skapa scrollbars.

Nyheter! News!
En scrollbar ruta som du själv bestämmer storleken på. Denna ruta är 200 pixlar bred och 100 pixlar hög. Det är är egentligen en "Box" som kan ha de flesta andra egenskaperna för CSS-formatering som text kantlinjer, teckensnitt och bakgrundsfärg. Det som gör denna ruta bläddringsbar är egenskapen "overflow" som här är angiven till "auto" vilket innebär att bläddringslisten visas när innehållet i boxen inte får plats...
...glömde nästan berätta att avståndet från boxens kanter kan anges i som "padding", denna ruta har 10 pixlars avstånd från kanten.

Använd ett eget class-namn som tex: .scrollbox enligt exemplet nedan:

.scrollbox {padding: 10px; height: 100px; width: 200px; border: 1px solid #999999; overflow: auto; background-color: #F1F1EB;}

Tillämpa på märket <P> <TD> eller annat märke där du vill ha din scrollbox:

<p class="scrollbox">
Din text som ska vara i rutan skriver du här...
</p>

Du kan även använda <DIV> för att placera ut koden i dokumentet utan att koppla den till ett speciellt märke:

<div class="scrollbox">
Din text som ska vara i rutan skriver du här...
</div>

Om du inte kan koppla CSS-egenskapen till ett speciellt märke kan du ofta använda <DIV> före och efter märket istället. Här är ett exempel på hur du kan lägga boxen i en tabellcell med hjälp av märket <DIV>.

Nyheter! News!
En scrollbar ruta som du själv bestämmer storleken på. Denna ruta är 200 pixlar bred och 100 pixlar hög. Det är är egentligen en "Box" som kan ha de flesta andra egenskaperna för CSS-formatering som text kantlinjer, teckensnitt och bakgrundsfärg. Det som gör denna ruta bläddringsbar är egenskapen "overflow" som här är angiven till "auto" vilket innebär att bläddringslisten visas när innehållet i boxen inte får plats...
...glömde nästan berätta att avståndet från boxens kanter kan anges i som "padding", denna ruta har 10 pixlars avstånd från kanten.

Det går även bra att ha text under boxen men i samma cell.

Den bläddringsbara Boxen är placerad i en tabellcell med <DIV>:

<td>
<div class="scrollbox">
Din text som ska vara i rutan skriver du här...
</div>
</td>

(egenskaperna för "scrollbox" inom <HEAD> är samma som tidigare enligt rutan ovan)

Du kan använda färg på bläddringsslister (scrollbars). OBS! Fungerar inte i alla webbläsare.

I exemplen nedan ser du koderna under respektive exempel.
Läs mer om att ändra färg på bläddringslisten här »

Exempel:

<HEAD>
<style type="text/css">
<!--
.scrollbox{
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #999999;
overflow: auto;
background-color: #F1F1EB;
scrollbar-face-color: #F1F1EB;
scrollbar-highlight-color: #F1F1EB;
scrollbar-shadow-color: #F1F1EB;
scrollbar-3dlight-color: #F1F1EB;
scrollbar-arrow-color: #999999;
scrollbar-track-color: #F1F1EB;
scrollbar-darkshadow-color: #F1F1EB;
}
-->
</style>
</HEAD>
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 5px double #999999;
overflow: auto;
background-color: #669999;
scrollbar-face-color: #669999;
scrollbar-highlight-color: #669999;
scrollbar-shadow-color: #669999;
scrollbar-3dlight-color: #669999;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #669999;
scrollbar-darkshadow-color: #669999;
}
-->
</style>
</HEAD>
   
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #669999;
overflow: auto;
scrollbar-face-color: #339999;
scrollbar-highlight-color: #339999;
scrollbar-shadow-color: #339999;
scrollbar-3dlight-color: #336699;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #339999;
scrollbar-darkshadow-color: #336699;
}
-->
</style>
</HEAD>
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #669999;
overflow: auto;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #336699;
scrollbar-arrow-color: #336699;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #336699;
}
-->
</style>
</HEAD>
   
<HEAD>
<style type="text/css">
<!--
.scrollbox {
padding: 5px;
height: 100px;
width: 200px;
border: none;
overflow: auto;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #cccccc;
scrollbar-arrow-color: #cccccc;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #cccccc;
}
-->
</style>
</HEAD>
<HEAD>
<style type="text/css">
<!--
.scrollbox6 {
padding: 5px;
height: 100px;
width: 200px;
border: 1px solid #CCCCCC;
overflow: auto;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}
-->
</style>
</HEAD>