Toon posts:

[html] layers/tabel eigen scrollbar

Pagina: 1
Acties:

dinsdag 19 maart 2002 22:18

Acties:
  • Vittek
  • Registratie: Juni 2001
  • Laatst online: 10-07 22:28

Vittek

Topicstarter
vraagje:
welke mogelijkheden zijn er om een layer of tabel een eigen scrollbar tegen geven, zodat je een grotere inhoud dan de tabel/layer kunt invoeren. Ik heb zoiets ik weleens bij flash gezien, maar dat wou ik graag omzeilen.
Hier moet toch een simpele oplossing voor zijn of niet??

tnx

dinsdag 19 maart 2002 22:20

Acties:

Verwijderd

zéér simpel zelfs, de search en mophor:
overflow: auto

dinsdag 19 maart 2002 22:36

Acties:

Verwijderd

One of the real handy features of CSS 2 is the ability to assign scrollbars to page elements. In this example, we will take a look at setting some scrollbars for a <p> tag. You will be surprised at how easy this is. All we need to do is redefine the tag via a CSS declaration as shown below:
code:
1
2
3
4
5
6
7

<style type="text/css">

p {display: block; overflow: scroll; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; position: absolute; height: 100px; width: 200px; left: 400px; top: 10px}

</style>

Any element on the page can be scrolled, provided that that the element is designated with a block attribute e.g.., display: block to turn the scrollbars on we use overflow: scroll. The remainder of the CSS provides text formatting for the tag and we also use absolute positioning to better manage where the tag is positioned. We position the tag, by using the left and top attributes and assigning values to them. With CSS we can also specify the height and the width of the block. As you can clearly see CSS2 provides more powerful options than traditional HTML formatting. All that remains to be done is to provide a <p> tag in the body section of the HTML and we are good to go. Here's the full code to work from.


code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html><head>
<style type="text/css">
P {display: block; overflow: scroll; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; position: absolute; height: 100px; width: 200px; left: 400px; top: 10px}

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<p>eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddieeddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddieeddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddieeddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddieeddie 
eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie eddie </p>

</body>
</html>

Beetje mee spelen.

position:relative maken en top:* en left* wegahalen en gewoon in je tabel zetten, dan pastie beter in je ley.

dinsdag 19 maart 2002 23:34

Acties:

Verwijderd

CLAY heeft hier iets leuks voor..
Reageer