ugrás a tartalomhoz

Táblázat használata oldal tartalmának pozícionálásra

tanuló lány · 2013. Jan. 2. (Sze), 12.18
Szervusztok!

Véleményeteket szeretném kérni!
A fórumban sokszor foglalkoztatok már az oldalak képernyő felbontáshoz igazodásával. Ebben a kérdésben nem láttam teljes egyetértést, és az okos telefonok terjedése miatt egyre nehezebb/komplikáltabb feladatnak tűnik.

Az lenne kérdésem, hogy egy szépen, div-ekkel felépített 100%-os szélességű site-ban, a tartalom középre pozícionálásának táblázatos megoldása mennyire "polgárpukkasztó"? Arra gondolok, hogy a befoglaló doboz tartalmát táblázat segítségével igazítanám.

JS-ben is gondolkodtam, sőt egyszer-kétszer alkalmaztam is, de mivel az egy-két böngészőben alapértelmezetten tiltott lehet, nem preferálom az ilyen jellegű megoldást.

Köszönöm szépen előre is az állásfoglalásokat!

A.
‹ javascript könyvtárak opcionális betöltése Swipe event érzékelés ›
 ■
1

A táblázat felejtős

Peete · 2013. Jan. 2. (Sze), 12.45
Mint azt mindenhol olvashatod, a táblázatot ma már nem igazán szokás ilyesmire használni.
Finoman fogalmazva elavult módszer, erősebben fogalmazva béna, szakértelem hiányát jelző, stb..

Szóval, ha valóban az a célod, hogy jó, és színvonalas site-ot hozz létre, akkor felejtsd el a table tagot (illetve csak valóban táblázat-szerű, sorokból és oszlopokból álló adattartalom megjelenítésére használd), és barátkozz meg a html+css alkotta oldalakkal.
Amúgy hidd el, megéri! Sokkal egyszerűbben dolgozhatsz vele, sokkal szerteágazóbb eszköztár áll a rendelkezésedre, igaz, bele kell tanulni.


++ha valóban tanulni vágysz, írd meg a konkrét problémádat, és akár a magamfajta, akár a nálam sokkal okosabbak segítségére is számíthatsz.
2

Táblázat nálam is tabu :)

tanuló lány · 2013. Jan. 2. (Sze), 13.03
Kedves Peete!

Köszönöm véleményedet, eddig sem nem használtam táblázatot :)

Belinkelni nem látom értelmét, mert az oldal(ak) az "átlag" 1024x768-as, valamint annál kisebb, és nagyobb felbontásokban is rendben vannak. Mint, ahogy Te is írtad csak html+css (divek, nüansznyi js, php...), csak az okos telefonos kérdéssel vagyok néha bajban. Ezért gondoltam a "parasztos" megoldásra...
3

Cel

janoszen · 2013. Jan. 2. (Sze), 13.07
Szerintem, kicsit tul van ertekelve a HTML (es a programkod) tisztasaga. Egy bizonyos meret folott minden projektben lesznek kisebb-nagyobb reszek, amik nem olyan tisztak. En szemely szerint azon a velemenyen vagyok, hogy ha egy tablazattal lenyegesen kevesebb idovel es koddal meg lehet csinalni valamit, akkor azt kell hasznalni. Senki nem dolgozik ingyen es ha a kesobbi karbantarthatosag nem szenved, akkor folosleges a szemantika a szemantika kedveert.
5

Elgondolkodtató

tanuló lány · 2013. Jan. 2. (Sze), 13.20
Kedves janoszen I proclub!

Nem indítottam volna témát, ha nem foglalkoztatna a gondolat.

Szerintem belepiszkítok :) és kipróbálom, lesz, ami lesz.
Elvégre a lényeg, hogy felhasználó barát legyen...egy kis táblázat csak nem bonyolítja meg az ő életüket.

Amúgy van arról tapasztalat, hogy a telefonok hogyan kezelik a táblázatos szerkezetet?

Csak, hogy még érthetőbb legyek, az az elképzelésem, hogy a meglévő div-eket, nem a teljes body-t, belerakom egy egysoros-egy oszlopos táblázatba (befoglaló doboz helyett, vagy pluszban), amit középre igazítok. Ezáltal a benne lévő tartalom, ha minden igaz mindig az oldal közepén lesz felbontástól függetlenül-persze a százalékos méretek miatt összébb, vagy szét csúszik a tartalom, de ki nem csúszhat belőle.(?)
7

..

Peete · 2013. Jan. 2. (Sze), 13.31
Fura lenne vitába szállnom valakivel, aki olyan konferencián ad elő, aminek az előadásainak felét, ha értettem; Janoszen-nek nyilván teljesen igaza van, de valahogy jelen esetben nem tudom elképzelni, hogy egy:

<table>
<tr>
<td>tartalom</td>
</tr>
</table>
jellegű html tag bármi olyan előnnyel járna, amit ne lehetne mondjuk

<div id="valami">
tartalom
</div>
formátumú megoldással egyszerűbben, jobban megvalósítani.
8

Tipikusan

janoszen · 2013. Jan. 2. (Sze), 13.34
Attol meg, hogy konferencian adok elo a szerverekrol, nem feltetlenul ertek a frontendhez. :) Inkabb mukedvelo sitebuilder vagyok, mint gyakorlott profi.

Egyebkent nekem tipikusan akkor szokott elojonni a "csinaljuk tablazattal", ha olyan keres jon, hogy jo, akkor legyen harom oszlop, a bal oldali oszlopban pedig ket dinamikus magassagu resz, amibol az also legyen alulra igazitva.
14

korpa :)

tanuló lány · 2013. Jan. 2. (Sze), 13.53
Már kezdem restellni magam, hogy ilyen amatőr gondolattal keveredtem közétek.

De még egyszer hálás vagyok, hogy foglalkozt(at)ok a felvetésemmel!
15

Off

Peete · 2013. Jan. 2. (Sze), 13.57
igen, tudom, hogy nem a frontend a szakterületed, ám ennek ellenére úgy gondolom, hogy bár alapból minden felhasználóhoz kellő tisztelettel illik beszélni, de a nyilvánvalóan nálam sokkal képzettebbek álláspontját főleg tiszteletben kell tartani (főleg, mert 100-ből 99-szer azért nem értek egyet, mert az illető tud valamit, amiről még nem is hallottam)
/off
11

tanuló

tanuló lány · 2013. Jan. 2. (Sze), 13.41
Bár nem vagyok mai csirke, de nem véletlenül választottam ezt a nevet itt a fórumon :)

div-ekkel az a tapasztalatom, hogy css-ben a böngészők általi különböző megjelenés miatt - mivel egyik ezt szereti, a másik azt, had ne részletezzem..., jóval több munkával lehet a kívánt pozícionálási eredményt elérni, mint feltételezem egy egyszerű táblázattal. Félreértés ne essék, nem a teljes oldal táblázatos felépítésére gondolok!

Mondom ezt úgy, hogy eddig hallgatva a nagyokra, ódzkodtam tőle, mint a tűztől, szóval nincsen éles tapasztalatom...
21

Átlátható, rövid, de jó kód

Pepita · 2013. Jan. 3. (Cs), 17.43
Talán ez lehet a helyes jelmondat, mind HTML, CSS, JS - és szerveroldal / adatbázis terén is.

Nem szoktam Janoszennek ellentmondani, de én inkább azon a véleményen vagyok, hogy ha vmit meg tudsz szögelni táblázattal, akkor szánj rá elég időt és oldd meg divvel. Persze kivételek mindig akadnak (és erősítik a szabályt :)), de óvatosan!
Ha valóban tanulónak tartod magad, akkor az - számomra - azt jelenti, hogy akarsz is tanulni, tehát olvass-kérdezz-próbálkozz addig, amíg meg nem oldod szemantikusan.

Másik gondolkodnivaló: mit is akarok (T. Megrendelő mit akar) valójában csinálni? Mert olyasmit ne akarjunk, ami gyakorlatilag értelmetlen. Ha arra használjuk a webet (HTML-t), amire való, akkor nem szorulunk ilyen szögelésekre.
19

Inkább legyen valaki

Joó Ádám · 2013. Jan. 2. (Sze), 16.08
Inkább legyen valaki vallásos, mint bűnöző.
20

Jellemzően a táblázattal sem

tgr · 2013. Jan. 2. (Sze), 20.42
Jellemzően a táblázattal sem lesz kevesebb idő, viszont sokkal több kód és rosszabbul karbantartható (keveredik a tartalom és a kinézet), plusz még a böngészők is nehézkesebben renderelik. Vannak helyzetek, amiket a CSS2 nem igazán támogat (az újabb megoldásokat meg a böngészők nem támogatják még eléggé), pl. változó magasságú blokk függőleges középre pozicionálása változó magasságú blokkban, vagy blokk szélességének hozzáigazítása egy másik, változó szélességű blokkhoz, ezeket néha egyszerűbb táblázattal megoldani, de egyszerűbb esetekben tényleg csak hátrányai vannak. (Persze időt lehet spórolni azzal, hogy nem kell új dolgokat megtanulni, de az hosszú távon nem egy jó stratégia.)
4

okostelefonhoz:

Peete · 2013. Jan. 2. (Sze), 13.18
az okostelefonok térnyerésére a "szakma" azzal a megoldással állt elő, amit reszponzív webdesign-nak neveztek el.


lényege, 1 mondatban, hogy a CSS-be bele lehet tenni elágazásokat olyan módon, hogy: "ha a kijelző, amin az oldal megjelenik kisebb, mint 600px, akkor #div1 {width: 100px;} , ha kisebb, mint 200px, akkor #div1 {width: 50px;}" stb.

Szerintem erre van szükséged!


SZERK.: a legvelősebb "hogykell"-leírás, amit anno erről találtam:
http://tib.entropy-framework.net/2011/08/12/responsive-web-design-5percben/
6

ez tetszik :)

tanuló lány · 2013. Jan. 2. (Sze), 13.26
Látom, mostanra fogalmaztam érthetőbben :)

Kipróbálom ezt a verziót, ráguglizok a telefonok képernyő felbontásaira- remélem nincsen ezernyi változat.
10

Nem

janoszen · 2013. Jan. 2. (Sze), 13.36
Nem a telefonok felbontasahoz kell igazitani a designt, hanem hagyni kell nyulni az elemeket. Nezd meg pl. a smashingmagazine.com-ot kulonbozo meretu bongeszoablakokban.
12

megnéztem

tanuló lány · 2013. Jan. 2. (Sze), 13.42
Megnéztem ezt az oldalt.

Van jelentősége annak, hogy balra van igazítva az oldal?
16

Nincs

janoszen · 2013. Jan. 2. (Sze), 14.57
Nagyon nincs. :)
9

Tablazat

janoszen · 2013. Jan. 2. (Sze), 13.35
A fenti tablazatos temahoz: FooTable
13

köszönöm

tanuló lány · 2013. Jan. 2. (Sze), 13.45
Nagyon köszönöm, gugli a barátom, de napok óta böngészve nem találtam ennyi hasznos információt, mint amit most Tőletek kaptam!!

Lesz min dolgoznom a következő napokban :)
17

Smashing

janoszen · 2013. Jan. 2. (Sze), 14.57
Olvass SmashingMaget, ok szoktak irni az ilyen hasznossagokrol.
22

Nem jó

Pepita · 2013. Jan. 3. (Cs), 18.13
1. Ne haragudj, de miért adnék egy div-nek pixelben szélességet?! Ahogy Janoszen is írta: nyúljon minden, ami csak teheti.
2. Ezzel még távolról sem tudsz megoldani egy csomó mobilos problémát, mint pl. (h)over hiánya (legördülő menük), stb.

Szerintem az elfogadható megoldás a megfelelő template-ezés, és egy (session v. cookie -) változóban tartani az eszköztípust (mobil/monitor), ez alapján adni a tartalmat az A vagy B template-el. Az eszköz felismerésére több megoldás is létezik, de fontosnak tartom a linkkel történő nézetváltást is, ne legyen kötelező a látogatónak azt a nézetet használni, amelyikre mi tippeltünk. Persze mindkét template-nek kellően rugalmasnak kell lennie.

A hivatkozott (miért nem link?) cikk szerint kb. 10-15 CSS-t kéne írni, ugyanennyi feltételes elágazással. Hát... ez elég erőforrásigényes mutatvány a kliensoldalon.
18

Ne

Joó Ádám · 2013. Jan. 2. (Sze), 16.06
Ha más CSS-megoldás (a margin: auto miért nem jó?) nem célravezető, akkor használj display: table-t!
23

JS?

T.G · 2013. Jan. 3. (Cs), 18.15
Egy dolgot nem értek, arról van szó, hogy azért használhatunk táblázatot, mert táblázattal x idő alatt elkészíthető valami, míg táblázat nélkül sokszor x lenne ugyanez. Némi jóindulattal ez elfogadható, védhető, támogatható, sőt már szabványosított is, ekkor kell megadni a role-t:
<table role="presentation">
Na, de ebbe tényleg beleillik, hogy JS-t ne használjunk? A kérdés szerintem itt az, hogy melyik kezünkbe harapjunk bele, a formázáshoz használjunk táblázatot, vagy JS-sel állítsunk magasságokat, akkor tényleg a táblázat nyer?

Aki kikapcsolt JS-sel böngészik valószínűleg nem fog megakadni azon, hogy a képernyő jobb és bal hasábja különböző hosszú. Azaz, ha kompromisszumot akarunk kötni, akkor nem biztos, hogy a táblázat a megfelelő választás. Szerintem.