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.

Kapcsolódó bejegyzések:
  • Ha számít a szabványos kódAmennyiben értéket tulajdonít az ember a szabványos kódnak a szép megjelenés mellett, akkor egy-egy ilyen WordPress fícsör is nyom …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

  • 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í …

  • A végtelen scrollozású (infinite scroll technika) oldalak kapcsán szóba kerülni, hogy bár sokak szerint alapvetően ez egy elég jó megoldás a felhasználók miatt ( …

  • Ebben az újonnan felkerült videóban Remus azt mutatja be, hogy lehet Photoshop-ban sig-et rajzolni. A videó kicsit nagy méretű de érdemes megnézni.videó mé …

A cikket beküldte: Szépe Viktor (http://www.szepe.net/)

6 hozzászólás

  1. Szunyi Brigi says:

    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. Harder says:

    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. Kedves Szunyi Brigi!

    Erre választ adni akkor tudok, ha megvizsgálhatom az oldalt.
    Várom az oldal címét.
    Minden jót kívánok neked!
    +36 20 4242 498 szepe.viktor@online1.hu Skype: szepe.viktor

  4. Szunyi Brigi says:

    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

  5. Bamba says:

    “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!

  6. Örülök neki, hogy hasznát vetted.

Szólj hozzá
a Hogyan lehet megszüntetni a honlap vízszintes ugrálását lapváltáskor? 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>