ugrás a tartalomhoz

css, vertikális középreigazítás, magasság függő div

voidnull · 2007. Nov. 7. (Sze), 20.04
Sziasztok, remélem nem off amit írok, nézelődtem a fórumon nem-e született megoldás, de nem találtam.

Problémám a következő, szeretnék egy div -et úgy középre igazítani, hogy alul felül legyen 20-20 pixel távolság, a div szélessége fix. Olyan megoldást már találtam ami explorerben működik, de az sem tökéletes, mert az oldal magassága megnövekszik ezáltal (kirakja a görgetősávot).

Tudtok erre valami böngészőfüggetlen egyszerű megoldást?
‹ JS: onclick/ondblclick Layerek, table, vagy div? ›
 ■
1

hm?

juhasztibi · 2007. Nov. 7. (Sze), 20.24
mitől legyen 20-20px távolságra? Pontosítsd a kérdést mert lehet csak nekem magas de nem értem. Esetleg egy páldával szmléltetheted is (jpg).

T.
2

margin?

ErdosJ · 2007. Nov. 7. (Sze), 20.41
ha jol ertem, van egy div, abban egy masik, es a ket div kozti fuggoleges ter 20px-20px legyen..
monnyuk, a belso divnek allitsd be a margin tulajdonsagat..
margin: 20px 0px;
vagy:
margin-top:20px; margin-bottom:20px;
3

pontosítás

voidnull · 2007. Nov. 7. (Sze), 21.04
pontosítok: 1 darab dív van és a böngésző szélétől (tetejétől aljától) való távolság az a 20px. Linkeljek be esetleg egy példát azzal ami idáig megvan?
4

igen

juhasztibi · 2007. Nov. 7. (Sze), 21.36
ez egy jó ötlet!

De szerintem ezt úgy tudod megoldani, hogy létrehozol 3 div-et. Egymás alatt ahova amúgy is kerülnek. Az felső és alsó fix a középső pedig változik az böngésző ablak méretétől függetlenül, de sose éri el a böngésző szélét (alsó, felső) mert ott vannak a 20px-es divek. Az a lényege, hogy az alsó div mindig a böngésző alján helyezkedjen el. A középsőnek pedig auto (100%) magasság kell, ami kitölti a két div közötti távolságot.

T.
5

absolute position

juhasztibi · 2007. Nov. 7. (Sze), 21.59
Ez is jó lehet, a scrollt off-ra kell állítani.
Igaz akkor meg fix lesz a tartalmad mérete. De valamit valamiért:)
http://www.alistapart.com/d/conflictingabsolutepositions/layout-1.html
6

scroll off nem jo

voidnull · 2007. Nov. 7. (Sze), 22.12
ezek szerint kitotóztad hogy a 3 div scrollhoz vezet, scroll off-ra állítása nem jó, lehet hoszabb tartalom is.
7

érdekes

juhasztibi · 2007. Nov. 7. (Sze), 22.25
Akkor hogy gondolod ezt az alsó 20px-t? A tartalom addig megy amíg a böngésző méretének arányában engedi a középső div, onnan tovább csak scroll vagy hidden.

http://www.alistapart.com/d/footers/footer_variation1.html
9

egész oldal görögjön

voidnull · 2007. Nov. 7. (Sze), 22.42
Ha több a tartalom, akkor ne a div-en belül görögjön (googli nem díjazza ezt a módszert, mivel nem kedveli az ilyen jellegű hidelt tartalmat) hanem olyankor már nem szükséges az alsó 20px hanem tolja ki a tartalom ameddig kell (tehát az egész oldal legyen gördíthető), viszont amíg kevesebb, vagy alig van tartalom addig a pont 20px legyen lent.
11

Ki mindta ezt a gugli dolgot?

Jano · 2007. Nov. 8. (Cs), 00.04
Ezt honnan veszed, hogy a gugli nem szereti a scrollozható div-et? Bocs de nekem ez baromságnak tűnik.
13

googlinál semmi sem biztos

voidnull · 2007. Nov. 8. (Cs), 10.23
természetesen ez nem egy álllítás, mivel a googlin kivül úgy vettem észre az ilyesmit senki sem tudhatja biztosan. Egyszerüen olvastam valahol, hogy ez úgyanúgy spam gyanús lehet mint pl. a háttérszínnel írt szöveg, persze lehet hogy semmi alapja nincs. Mindenesetre nem ez a kizáró ok itt, hanem hogy az egész lapot szeretnél scrolloztatni ha sok a szöveg.
8

kiindulás

voidnull · 2007. Nov. 7. (Sze), 22.35
Ezen az úton indultam el: div igazítás teszt

ha berakok még plusz két div -et, (alá, fölé) akkor már nem fér el az oldal, hanem megjelenik a böngészősáv, azt szeretném, hogy amíg nincs annyi tartalom, hogy indokolt legyen a böngészősáv, addig ne is jelenjen meg.
10

táblázat

voidnull · 2007. Nov. 7. (Sze), 23.14
megcsináltam táblázattal, na ilyenre lenne szükség div -el.

kevés szöveggel

sok szöveggel
12

div+css table?

ksgy · 2007. Nov. 8. (Cs), 01.45
egy otlet: es mi lenne, ha ugyan divekkel csinalnad, de css-bol display: table/table-row/table-cell-kent formazod a diveket? :)
15

Csaholó vadászkutya legyek, ha ezt meg lehet csinálni divvel

Fraki · 2007. Nov. 9. (P), 11.40
Csaholó vadászkutya legyek, ha ezt meg lehet csinálni divvel css2-ben.
Van ez a trükk, de ez sajnos trükk. Csak 100%-os magasságra jó, így a margót ki kéne takarni, de az már gány, és csak homogén háttérrel működik.

Csináld táblával, nincs vele semmi gond.
14

részleges megoldás

voidnull · 2007. Nov. 9. (P), 11.27
Született egy részleges megoldás, de azért néhány böngészőn ez sem az igazi (pl. konquerror). Nem én találtam ki, de azért belinkelem hátha valakinek hasznos lesz még:

http://voidnull.alida.hu/divaligntestdone.html

Sajna ezt úgy néz ki normálisan jelenleg csak táblázatokkal lehet lekezelni, dehát hogy pakoljak be egy táblázatos verziót egy friss szájtba, amikor mindenki fika áradatba kezd ha meglát egy ilyet (pedig ezek után szerintem teljesen alaptalan leszólni a < table > -t), inkább csak meg kellene tanulni normálisan használni. (na mind1 ez ugye szubjektív)

Köszönöm mindenkinek aki lépett az ügy előremozdításában!
16

Upsz, lekéstem.

Fraki · 2007. Nov. 9. (P), 11.50
Upsz, lekéstem.

Van egyébként egy olyan álláspont is, ami megengedi a táblázatokat egy bizonyos mértékig, körülbelül épp eddig. Itt racionálisabb a táblahasználat, mint a div-erőszak.

A probléma pedig az, hogy nem ismert a viewport magassága. Így csak 100%-kal lehet ráilleszkedni, abból kellene kivonni a pixelértéket, de ilyen kalkuláció css2-ben nem lehetséges. A padding sem játszik, mert az meg kifelé növel (ilyen szempontból az IE quirk box modellje szerencsésebb).