Gördíthető DIV-ek létrehozása


A fórumon egyre gyakrabban előfordul a kérdés, hogy hogyan lehet weblapon gördíthető (scroll-ozható) sávot létrehozni IFrame nélkül. Ezt legegyszerűbben css segítségével lehet megcsinálni…

Ha a weblapunkon egy gördíthető sávot akarunk létrehozni (például hogy ne csússzon szét a design egy-egy szélesebb elem miatt), akkor a következő CSS kóddal ezt egyszerűen megtehetjük például az IFrame-s megoldás helyett (amit például a kereső-botok nem szeretnek, ráadásul a felhasználóknak is sok bosszúságot tudnak okozni).

A következő kóddal

1
<div style="width: 150px; height: 150px; overflow: auto;">...</div>

létrehozhatunk egy 150*150 pixeles részt, amin ha a tartalom túlcsúszik, akkor megjelennek rajta a gördítősávok.

Fontos megjegyezni, hogy itt mindenképp meg kell adnunk a szélességet és a magasságot, különben nem fog működni!

Ez a gyakorlatban így néz ki:

Itt nem lóg túl a tartalom

Itt már igen

Itt már igen

Itt már igen

Itt már igen

A példákat – a jobb érthetőség miatt – egy 1 pixeles kerettel is elláttam a border: 1px #000000 dotted; stílus használatával!)

És természetesen a túl széles tartalomnál is megjelnik a gördítősáv, de azt próbáljuk elkerülni, mert az átlag felhasználó nem szereti a horizontális gördítősávokat használni!

Kapcsolódó bejegyzések:
  • Apró de idegesítő hiba, mikor egy oldalon az iframe mind a horizontális, mind pedig a vertikális gördítősáv megjelenik annak ellenére, hogy a tartalom csak verti …

  • Előfordulhat olyan eset honlapszerkesztés közben, hogy a honlapon szeretnél kitenni egy hosszabb szöveget, de úgy, hogy ne legyen nagyon “hosszú” lefele a la …

  • Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla ér …

  • Célunk, hogy három fix szélességű oszlopból álló weboldalt készítsünk, ahol a tartalmat CSS stíluslapokkal formázzuk. A webtartalom megformázásához “sima” float- …

  • A CSS-ben a középre igazítás mindig is nehéz feladat volt, mert a böngészők máshogyan értelmezik a CSS tulajdonságokat, ráadásul vertikális középre igazítás ninc …

A cikket beküldte: Harder (http://blog.harder.hu)

11 hozzászólás

  1. Mónika says:

    Ez tökéletesen működik FF-ben. IE-ben hogyan tudom megvalósítani?

  2. Szobby says:

    IE-ben ugyanúgy működik (most néztem 6.0-ás verzióval…).
    Mi a gond vele? Ha a tutorial jól jelenik meg neked, csak a saját kódodban nem, akkor valószínűleg csak valami elírás lehet. Szerintem…

  3. Mónika says:

    Szóval. Az énproblémám eléggé összetett.
    van egy css felépítésm

    Fejléc
    Navigáció
    Bal sáv
    Tartalmi rész
    Lábléc
    Az egész egy fix divvel ven megoldva. Pl. tartalmi rész width:770 px ; height: 500px;
    ezen van egy

    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
    27
    28
    29
    
    /* átlászóság */
    #bg {
    width:750px;
    height: auto;
    }
     
    /* átlátstóság folytatása */
    #transbox {
    width: 750px;
    height: auto;
    margin: 2px 2px 2px 2px;
    background-color: #fff;
    border: 2px solid black;
    filter:alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity:0.5;
    }
     
    /* This is the container which set text to solid color.
    position: relative used for IE */
    #transbox div {
    padding: 20px;
    font-weight: bold;
    color: #000;
    filter:alpha(opacity=100);
    opacity: 1;
    -moz-opacity:1;
    position: relative;
    }

    átlátszó réteg, alatta egy kép.
    ugye ha túl csordul a gyerek a szülőn akkor lép életbe a gördítő sáv.
    FF-ben lekezeli szépen, IE-ben pedig részben működik csak, az átlátszó rétegen a szöveg egy bizonyos része jelenik meg a többi lefolyik a láblécre, és a vége meg sehol sincs.
    A scroll működik de nem úgí ahogy kellene.
    Még kezdő vagyok, és így nem tudom, hogy mit írtam el vagy mit hagytam ki.

  4. Mónika says:

    SZóval, IE-ben a szöveg megjelenítésével van problémám, hogy az átlátszó rétegen lévő szöveget nem kezeli normálisan. FF-ben meg minden tökéletes.

  5. Szobby says:

    Fel tudnád tenni valahova az oldalt, hogy lássuk az egész kódot, mert ez így kicsit kevés (legalábbis nekem). Nem látszik, hogy pontosan mit hova helyeztél el, és a gördíthető dív helyzete sem látszik abból amit leítál.

  6. zoleytaylor says:

    minek az a position: relative az ie-nek? mondjuk ezt az egészet nem értem…

    csinálsz egy 750px-es wrappert, amin van egy 50% opacity-s réteg. ennek csak a 20px-es szélét szeretnéd, ha látszana (meg ott a keret és a margó)… tehát teszel rá egy újabb réteget, ami láthatósága 100%… jól értelmezem? ha igen, akkor ennek á esetben semmi köze ehhez a tutorialhoz, bé esetben pedig az a problémád, hogy megjelenik a vízszintes gördítősáv a dobozmodell hülyesége miatt… csak mert a height a kódodban auto-n van mindig, az overflow pedig meg sincs említve…

    nem értem… mondd hogy ez valami mályszpész kódgenerálós cucc, és akkor érteni fogom… :S próbáld így:

    1
    2
    3
    
    .wrapper{ width: 750px; }
    .halvanyszegely{ margin: 2px; border: 2px solid #000000; padding: 20px; background-color: #fffffff; filter: alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; }
    .normalhatter{ color: #000000; background-color: #fffffff; filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; }
  7. Mónika says:

    Oldalad már elérhető a http://mony27.atw.hu címen.

  8. Mónika says:

    IE-be a footeren lesz egy kis felírat valami ez a bajom. Hogy nem a gördíthető étlátszó réteggel együtt gördül, hanem lelóg róla. Mintha a felett lenne a szövegem, és nem az átlátszó rétegen. FF-ben tökéletesen működik.

  9. zoleytaylor says:

    már látom. a görgő csúszik, a tartalom nem mozdul. első ránézésre az okozza a hibát, hogy van úgy a nagyvilágban egy li… se lezárva, se ul-lal körülfogva… na meg túl sok a bekezdés és a div összevissza… nincsenek párban a nyitó és zárótagek…

    szerintem az egészet alakítsd át, tedd egységesebbé. túl sok az egymásba tett dived, épp ezért nehéz a lépcsőzetességre hagyatkozni, jobb ha osztályokkal vagy azonosítókkal társítod hozzájuk a stílusukat. szóval minden kapjon egy id-t…

    de jobb lenne átalakítani az elképzelést is kicsit. mindenki meg fog őrülni ezektől a scrollbaroktól. 1024-es felbontáson megjelenik a vízszintes is, aminél nem sok rosszabb dolog történhet egy üres oldallal… tegyük fel hogy az fel van számolva egy karcsúsítással… talán 2 függőleges elviselhető… ha biztosan ráfér egy képernyőre a gördíthető terület… de itt ez is túl nagy. 768-as felbontással kell számolni, lejön belőle egy “tálca és státuszsor” meg egy “böngésző eszköztár”. (és akkor még nem is kalkuláltunk azzal, hogy nem feltétlenül teljes méretű az ablak, stb… sőt, ott az atw.hu bannere is…) a 768-ból marad vagy 550 px… tehát kb 512 magasság a fájdalomküszöb. annál nagyobb ne legyen. inkább kisebbnek kéne, az viszont hülyén nézne ki. (és amúgyis haszontalan…) tehát a legjobb, ha lemondasz a szkrollozásról. azzal megoldódik a csúszás problémája is… (az ilyen görgős dobozokat – amiről a tutor is szól – olyankor ajánlott használni, ha az nem tartalmazza “fontos” részét az oldalnak. tehát pl beállíthatsz a kommentároknak egy maximális hosszt, pl 400px-t, ha többet ír a kommentelő, akkor megjelenik a görgő. akit érdekel, elolvassa úgyis. és el van kerülve az hogy a hülyegyerek beír 8000 soron keresztül egyegy k betűt… de amit te magad írsz, az kontrolálva van magad által.)

  10. Mónika says:

    Köszönöm. Sikerült megoldanom a problémát. Csak ki maradt egy fontos tényező. A kezdő .
    Nem baj. A saját hülyeségemből tanultam. Így ezt a szarvashibát nem követem el legközelebb.
    Amit írtál arra gondoltam én is, hogy ugy fogom megvalósítani, hogy ha a szöveg hosszabb mint a fix dobozom, akkor nem fixre veszem a dobozt, hanem a szöveg hosszúságától függően változik.
    De a megrendelő ezt kérte, hogy valósítsam már meg neki ezt, mert Ő ilyet szeretne.
    De már működik. Az atw hely csak egy ideiglegenes tároló, nem ott lesz majd a végleges helye, így több hely áll rendelkezésemre majd.
    viszont egy átlag képernyő felbontást fogok nézni, és ugye a szokásos felírat az oldalakon az ajánlott felbontás, ill. böngésző. Bár mindenki azt használ amit megszokott, és szeret.
    Mégegyszer köszönöm.

  11. Zsoca says:

    Nekem olyan problémám van hogy én is div és css segítségével csinálok egy honlapot de én úgy szeretném görgethetővé tenni a dolgot hogy a scroll-os sáv ne jelenjen meg de görgetni azért lehessen, nemtudom hogy érhetően fogalmaztam e. A lényeg az lenne hogy hogy lehetne láthatatlanná tenni vagy átlátszóvá a scrollt,de mégis működjön?

Szólj hozzá
a Gördíthető DIV-ek létrehozása c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>