Sokszor nem esztétikus a görgetősáv, főként kis méretű, keskeny szövegdobozoknál, ahol egyébként is kevés hely vana  szövegnek. Erre is van egy trükk, amivel némi plusz idő ráfordításával el tudjuk ezeket tüntetni bemutatónkról.

A feladat: belehelyezni egy nagyobb szövegdobozt egy kisebbe, a fizika törvényei itt most elbuknak, a weben (majdnem) mindent lehet.

Az első, alap szövegdoboz kódja lesz a külső szövegdoboz, amibe a másikat helyezzük. Ennek a szövegdoboznak nem kell semmilyen felesleges formázást adni, az csak növeli a kód hosszúságát, de értelmetlen. Egyedül a méreteket (magasság=height, szélesség=width) és az elhelyezkedését (balról=margin-left, fentről=margin-top) kell változtatni, itt csak a px előtti számértéket írd át tetszőlegesen. Tipp: ha kód nézetben átírtál valamit, nézd meg normál nézetben a módosítás után a változásokat.

*****

<div style="text-align: justify; width: 335px; height: 138px; margin-top: 116px; margin-left: 22px; -webkit-transform: rotate(0deg); float: left; overflow: hidden; background-color: transparent; padding: 5px 5px 5px 5px; border: 0px;">

Ide illeszted be a másik szövegdoboz kódját, amiben a bemutatód szövege van.

</div>

*****

Második, aminek helyét a fentebb jelzett kódban pirossal jelöltem. Ebben már csak pár értékét kell átírni a fentihez igazodva. Vizsgáljuk meg először a szélesség és magasság viszonyait. A nagyobb szd. magassága átlagosan 0-2 pixellel nagyobb csupán, a szélesség ( a görgetősáv és a belső margók miatt) már 13-15px pluszt jelent. Ha a szöveged színét, méretét, betűtípusát, stb. szeretnéd átállítani, azt is ebben a részben teheted meg, a már ismert módon, amit egy korábbi cikkben olvashatsz.

*****

<div style="text-align: justify; width: 350px; height: 140px; margin-top: 0px; margin-left: 0px; float: left; overflow: auto; background-color: transparent; padding: 1px 10px 5px 5px; border: 0px;"><font style="font-family: Century Gothic; text-shadow:#acf8f9 1px 1px 1px; line-height: 11pt; font-size: 12px;"><font color="#118aac"><b>? SZÖVEGDOBOZOD CÍME</b><br><br><div style="text-align: justify;"><span style="line-height: 11pt;">here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your&nbsp;text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text  here your text here your text here your text here your text here your text here your text here your text - ITT A SZÖVEG VÉGE</span></div></font></font>
</div>

*****

Demo:

Kód, amivel kísérletezhetsz, vagy alkothatsz egy teljesen másikat:

<div style="cursor: url('http://kepfeltoltes.hu/160206/blue_www.kepfeltoltes.hu_.png'), default;"> <div style="text-align: center;"></div><div style="width:721px; height:444px; margin: auto;text-align:center;background: url(http://orig00.deviantart.net/7e18/f/2016/037/c/8/halak_by_nseth-d9qqe7p.png);"> <div style="text-align: justify; width: 335px; height: 138px; margin-top: 116px; margin-left: 22px; -webkit-transform: rotate(0deg); float: left; overflow: hidden; background-color: transparent; padding: 5px 5px 5px 5px; border: 0px;"> <div style="text-align: justify; width: 350px; height: 140px; margin-top: 0px; margin-left: 0px; float: left; overflow: auto; background-color: transparent; padding: 1px 10px 5px 5px; border: 0px;"><font style="font-family: Century Gothic; text-shadow:#acf8f9 1px 1px 1px; line-height: 11pt; font-size: 12px;"><font color="#118aac"><b>>>> SZÖVEGDOBOZOD CÍME</b><br><br><div style="text-align: justify;"><span style="line-height: 11pt;">here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text - ITT A SZÖVEG VÉGE</span></div></font></font></div> </div> <div style="text-align: justify; width: 370px; height: 108px; margin-top: 25px; margin-left: 22px; -webkit-transform: rotate(0deg); float: left; overflow: hidden; background-color: transparent; padding: 5px 5px 5px 5px; border: 0px;"> <div style="text-align: justify; width: 383px; height: 110px; margin-top: 0px; margin-left: 0px; float: left; overflow: auto; background-color: transparent; padding: 1px 10px 5px 5px; border: 0px;"><font style="font-family: Century Gothic; text-shadow:#acf8f9 1px 1px 1px; line-height: 11pt; font-size: 12px;" color="#008181"><b>>>> SZÖVEGDOBOZOD CÍME</b><br><br><div style="text-align: justify;"><span style="line-height: 11pt;">here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text - ITT A SZÖVEG VÉGE</span></div></font></div> </div> </div></div>

Ha valami kérdésed van, vagy éppen nem sikerül sokadszorra sem, írd meg kommentben!