Hogyan lehet megszüntetni a honlap vízszintes ugrálását lapváltáskor?

Sokszor jelentkező probléma a vízszintes ugrálás lapváltáskor, mert …

Az olyan honlapok, amelyek nem elég hosszúak ahhoz, hogy a böngésző jobb oldali gördítősávját (csúszka sáv, scrollbar) automatikusan megjelenítse, különös jelenség áll elő. Főleg olyan honlapoknál venni ezt észre, ahol több rövid oldal mellett több hosszú is van. Ha a rövid oldalakról átnavigálunk a hosszúakra, úgy tűnik, mintha az azonos tartalmak – például menü vagy oldalsáv – ugranának egyet balra.

Az ugrálás okai

Az utóbbi években igen megnőtt a kijelzők felbontása, és sokszínű lett a kínálat belőlük: szélesvásznúak, álló táblagépek, szélés és igen alacsony kijelzőjű üzleti telefonok, stb. A honlapokat úgy tervezik, hogy a legtöbb mostani kijelzőn megfelelően jelenjenek meg. Ebből az adódik, hogy középre igazítják a rögzített szélességű tartalmat. Tehát a honlapok odalainak szélessége általában fix, a hosszuk változik, így lehetséges, hogy néhányon van scrollbar, másokon nincs.

Megoldás a scrollbar

Úgy lehet megoldani ezt a csúszka problémát, hogy egy CSS sort beszúrunk a honlap kódjába:

1
html {overflow-y:scroll;}

Ez a CSS szelektor a html tag-et, tehát az egész honlapot ellátja egy állandó jobb oldali gördítősávval, ami csak akkor válik aktívvá, ha a képernyőnkön függőlegesen már nem fér ki a tartalom. Így nem látszik ugrálni a honlap az oldalak közötti váltásnál. Minden jót kívánok, kedves Olvasó!

Ha honlapkészítés előtt áll, ajánlom magunkat: aprólékos honlapkészítés online1.

6 HOZZÁSZÓLÁS

  1. Hali!
    Nekem is elcsúszás problémám van, csak nem vízszintes hanem függőleges irányban. Egy táblázatot használok a honlap készítéséhez úgy, hogy háttereként kész képrészleteket teszek bele, a táblázat oldalát eltüntetve pedig olyan, mintha egyben lenne az egész. Ám miközben írok a tartalom részébe (ez a sablonom), minden lejjebb csúszik, és így szétdarabolódik. Mi lehet a probléma? Tudsz segíteni? Köszi!

  2. Ennyi infó alapján elég nehéz, mert több hiba is lehet ami ezt okozza. Pl.
    – a képet nem háttérként raktad a cellába, hanem tartalomként
    – nem elég nagy a háttérkép ahhoz hogy kitöltse a cellát, ezért ha több a tartalom, eltolódik az is
    – alulra pozícionáltad a háttérképet és ha a cella tartalma nő, a cella aljával vándorol lejjebb a háttérkép is

    Mindezzel együtt szerintem a táblázatos honlapkészítést ne erőltesd, mert évek óta elavult technika amit ma már nem igazán használ senki. A honlapon számos leírást találsz CSS témakörben, amivel elindulhatsz és amelyek segítségével létrehozhatod a saját első CSS layout-odat.

  3. Sziasztok!
    Köszi a válaszokat és a segítséget! Még csak néhány hónapja mélyedtem bele komolyabban a témába, így sok mindent nem tudok még, útközben formálódik a fejemben a dolog:) Végül sikerült rájönnöm, mi a gond, nem szabad csak az entert használnom, ha új sort akarok kezdeni, hanem shift+entert kell nyomnom, így minden a helyén maradt. A css layout-ot mindenképp megnézem, és javítom az oldalamat! Ha bármi gondom akad – már pedig nagy valószínűséggel lesz ilyen – akkor mindenképp írok, és Viktor, akkor elküldöm a honlapot is – de ez egyelőre még csak a gépemen létezik:) Még egyszer köszi mindkettőtöknek!
    Üdv és szép napot!
    Brigi

  4. “Mindezzel együtt szerintem a táblázatos honlapkészítést ne erőltesd, mert évek óta elavult technika amit ma már nem igazán használ senki.”
    Ezzel vitatkoznék, a Google.com, msn.com is használ táblázatokat, továbbá számos smarty templét alapú webshopnál is talákozni velük a világhálón.
    Nekem egy lightbox “játszotta” azt, hogy amikor megnyilt, eltüntette a gördítősávot, igy okozva ugrálást. Ez a kód kiküszöbölte a hibát. Köszi!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét