Üdvözlünk mindenkit a Blurred Colors-on, amely továbbra is az első és egyetlen magyar szerepjátékos és grafikai fórum, illetve annak közössége. Kedves, segítőkész emberekkel, változatos versenyekkel, sokoldalú kódokkal, grafikákkal és egyéb hasznos dolgokkal látjuk el a rászoruló eltévedt szerepjátékozni, vagy épp csak képet szerkeszteni vágyókat. Csatlakozz hozzánk te is! Regisztrálj, de még mielőtt megtennéd, kérlek, olvasd el a szabályzatunkat.






a hónap aláírása by
don'tFORGET


a hónap blendje by
away from the light &


a hónap ikonszettje by
light up the world


  
  válaszol új topik szavazás

» Overflow, ~görgetősáv~
gazdy
 Posted: Sep 20 2011, 12:55 PM
idézés



Group Icon

Group: statiszta
Posts: 47
Member No.: 11
Joined: 19-September 11









GÖRGETŐSÁV?!?!

HELLO KEDVES IDEGEN! Itt a következő lecke. Ezúttal a hozzászólásod görgetését mutatom meg neked. Láttál már olyat, hogy egy hozzászólásban a szöveget lefelé lehetett vinni egy görgetősávval, akár a weboldalaknál? Nos, itt a titok nyitja! Egy egyszerű levezetésen keresztül megmutatom, hogy hogyan is kell ezt megcsinálni wink.gif

Hogy jobban érthető legyen, kiemelve és példákon keresztül mutatom be nektek a görgetést.
Ez az egyik legalapvetőbb dohtml-es szempont, amit a kódolók 99%-a előszeretettel használ. Hogy mégis miért? A válasz igen egyszerű: Azért, mert így kisebb helyen is elfér a szöveg és a sablon; ergo nem kell például nagy mennyiségű szöveg esetén attól tartani, hogy két-három hozzászólás után már új oldalon fog a következő megjelenni... tehát helytakarékosságra ösztönöz.



CODE
[dohtml]<center><div style="padding:5px 5px 5px 5px; width:200px; font-family:trebuchet ms; font-size:9px; text-align:justify; line-height:95%; overflow: auto;">sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!</div></center>[/dohtml]


és így néz ki:

sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!


Hoppá! Valami nem stimmel, mert nem tudjuk még görgetni a dobozkánkban lévő szöveget. Ahhoz, hogy ezt megtehessük nem csak a szélességet (width) kell megadnunk, hanem a magasságot (heigth) is! Erre nagyon oda kell figyelni, különben nem lesz görgethető a dobozkánk, hiába állítottuk be a görgetősávot automatikusra (overlow: auto)! Lássuk hát a javított kódot és a helyes görgethető dobozkát:

CODE
[dohtml]<center><div style="padding:5px 5px 5px 5px; width:200px; height:100px; font-family:trebuchet ms; font-size:9px; text-align:justify; line-height:95%; overflow: auto;">sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!</div></center>[/dohtml]


és így néz ki:

sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!


Most már a szövegünk köré mindenféle hátteret, szegélyt és hasonló díszítéseket pakolhatunk és mire észbe kapunk, már kész is a hozzászólás sablonunk!

Még mutatok néhány példát, hogy hogyan is nézhet ki a dobozod:

CODE
[dohtml]<center><div style="border:1px dotted #ffcc33; padding:5px 5px 5px 5px; width:100px; height:200px; overflow:auto; font-family:trebuchet ms; font-size:9px; text-align:justify; line-height:95%;">sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat! </div></center>[/dohtml]


és így néz ki:

sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!


CODE
[dohtml]<center><div style="border:3px dashed #336
699; background-color:#d5d5d5; -moz-border-radius:20px;  padding:15px 15px 15px 15px; width:225px; height:100px; overflow:auto; font-family:calibri; font-size:10.5px; text-align:justify; line-height:95%;"><div style="font-family:courier new; font-size:25px; text-shadow:1px 1px 1px #000;color:2b857a">OH MY GOD! </div><BR>
sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!  </div></center>[/dohtml]


és így néz ki:

OH MY GOD!

sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!


CODE
[dohtml]<center><div style="border:3px dashed #336
699; background-color:#1f1f1f; border-radius: 50px 300px / 50px 40px; -moz-border-radius: 50px 300px / 50px 40px; padding:15px 15px 15px 15px; width:225px; height:100px; font-family:calibri; font-size:10.5px; text-align:justify; line-height:95%;"><div style="font-family:courier new; font-size:25px; text-shadow:1px 1px 1px #000;color:2b857a">WTF?!?! </div><BR><div style="width:225px; height: 75px; overflow:auto; color:f1f1f1;">sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat! </div></div></center>[/dohtml]


és így néz ki:

WTF?!?!

sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! sálálálálá! ez egy görgetősávval ellátott szövegdoboz! próbáld csak meg görgetni! szeretem a görgethető szövegdobozokat!



Nos, a tanmesém végéhez ért, remélem hasznos volt számotokra. Már csak némi visszajelzését szeretnék kapni tőletek! Hasznos volt ez egyáltalán? Van valami, amit esetleg magyarázzak meg ezzel kapcsolatban? Tudasd velem, és én megpróbálom a legjobb tudásom szerint megválaszolni a dolgot.

--------------------
user posted image
pm
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options válaszol új topik szavazás