DIV elemek és az overflow

Írta: Tupacko | 2007. augusztus 20. | kategóriák: (X)HTML, CSS

Bizonyára sokunkat idegesíti a tény, hogy egy vagy több, a kelleténél szélesebb elem vagy a böngészők nem jó összeférhetőségi hibája szétnyomja az oldalunkat. Példáúl másképp kezeli az IE és a Mozilla a padding értékeket, ezért másként jelenik meg egy elem a két böngészőben. A megoldás a következő stíluselemmel orvosolható: overflow. A feltétel az, hogy minden esetben meg kell adjuk a pontos szélességet, illetve magasságot, hogy a böngésző tudja, milyen méretektől kell elrejtse vagy görgesse a DIV vagy egyéb elem tartalmát.

A legkönnyeb személtetés példán kerezztűl lehetséges, így egy példával mutatom be, hogy miről is van szó:
A css kód:

1
2
3
4
5
6

#gordulo{
  width: 120px;
  height: 40px;
  overflow: scroll;
  border: 1px solid #000099;
}

A megadott kód megformázza a “gordulo” ID-t (100 px széless, 20 px magass, 1px vastag kék keret és automatikus gördülősáv. Az automatikus gördülősáva abban nyilvánukl meg, hogy csak akkor látható a gördítő sáv, amikor szükség van a tartalom túllógása miatt a görgetéstre (FF esetén nem mindig jelenik meg, helyette a scroll értéket kell használni. A különbség az, hogy így mindig látható a gördítősáv). Más esetekben el van tünve.

HTML kód:

1

<p id="gordulo"> szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg</p>

A kódok eredménye:

szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg

További lehetőségek állnak rendelkezésünkre, amennyiben nem görgetni akarunk, hanem példáúl rejteni. Ha az overflow értékét “hidden”-re állítjuk, persze figyelembe kell vegyük azt a tényt, hogy szélesebb lesz a DIV beltere, mivel az elöző esetben elvett belőle a gördülősáv is:

szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg

Az így kapott módon, bár nagyobb a tartalom, mint a div elem méretei, nem kapunk oldalszéttolást, mivel a túllógó részek el vannak tüntetve.

Share
Delicious


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



szia,

és ha azt szeretném, hogy csak függőlegesen látszódjon a srcoll bar, akkor mit tegyek?

köszi!

xeras 2007. október 7. - 20:15

Igen, megoldható ez is. Ehez nem az overlow paramétert kell állítani, hanem az overflow-x és overflow-y változókat.
overflow-x: hidden
overflow-y: scroll
Ez el fogja rejteni a vízszíntesen kilógó elemeket.

Avatar Tupacko
2007. október 7.
21:32