Weboldalkészítõ suli

[Giraffe1 0]

@kléni

A csalás lehet, hogy ideiglenesen jó megoldás, de hosszútávon csúnyán visszaüt. Arról nem is beszélve, hogy abból nem tanul semmit az ember.

 

@Pjotr

A <div>, ha csak nem írod át, akkor mindig 100%-os szélességû lesz -- vagyis a gázokhoz hasonlóan kitölti a rendelkezésére álló teret --, így ezt nem sok értelme van igazgatni.

Ugyanakkor te nem a <div>-et, hanem a táblázatot, vagyis a <table> elemet szeretnéd igazítani. Próbáld meg, hogy a style.css 200. sorában a "div.tablazat" mögé odaírod még azt, hogy " table" -- azaz a tablazat osztályú <div>-en belüli <table> elemet igazítsd a többször említett "margin: 0 auto;"-val.

[Pjotr 9]

Világos, köszi! Nem értem, miért nem jutott el az agyamig, hogy mögé kellene írni a table-t, pedig egyértelmű. Ez egy hatalmas talpas egyest jelent az ellenőrzőmbe, ami 2 oldalt is elfoglal. ír:

 

Sikerült hegeszteni egy JS kiemelést is, igaz, máshogyan, mint ahogy az "órán" volt.

[Giraffe1 0]

Hidd el, egy-egy ilyen hibából sokkal többet tanulsz, mintha véletlenül sikerült volna. Így biztosan meg fogod jegyezni, hogy mit is rontottál el. (És ugye, hogy nem kellett csalni? )

 

A JS-d egészen addig mûködik, amíg a soroknak nincs stílusuk, mert az "egyszerûsítés" azokat csúnyán "ki fogja lõni".

 

Arra viszont érdemes lenne jobban odafigyelni, hogy értelemszerûek legyenek az elnevezések. Például a tables tömbbe a táblázatokat gyûjtsd, és ne a sorokat, azok legyenek pl. lehet a tabRows vagy hasonló neven. Egy ilyen kis programnál ez nem gond, de már egy 100+ soros programnál nehéz lesz megtalálni, hogy hol a gond, ha félrevezetõek a változónevek.

[Pjotr 9]

Ha megadom az egyes állapotokhoz a stílust, akkor elvileg nem változtatja meg, vagy igen?

Az elnevezés még az órai kódból maradt, átírom.

[Giraffe1 0]

Gondold el a következõt: van egy szép hosszú listád, amit táblázatba szervezel, és ebben a listában vannak különbözõ okokból kiemelt sorok (pl. páros-páratlan sorok, vagy egy országlistában különbözõ színnel jelölöd az európai, amerikai stb. országokat). Ezeket a kiemeléseket nagy valószínûséggel -- akár a HTML-ben jelölve, akár JS-bõl -- különbözõ stílusokkal fogod hozzárendelni a sorokhoz. Márpedig akkor a Te kódod alapján a felhasználó ezeket szépen eltávolítja, amikor a táblázat fölött mozgatja az egeret. Az "órai" kódban adjuk hozzá, majd töröljük "activerow" osztályt, mert így megmarad az eredeti is. Ráadásul nem is lesz sokkal hosszabb így a kód.

[Pjotr 9]

Világos, értem. Viszont nekem nem sikerült törléssel megoldanom, még gyúrom akkor egy kicsit (valamit ott is benézhettem).

 

Frissítés:

És tényleg benéztem! Tördelt programkód nem jó ötlet.

---

Olyankor mi van, ha egy link miatt nem valid az oldal? (Táblázat)

[Giraffe1 0]

Az &-ek helyére próbáld azt írni, hogy & -- mert ahogy elvileg "kacsacsõröket" sem illik HTML szövegen belül használni, úgy az & jel is foglalt karakter. A gond csak az, hogy nem minden honlap kezeli le az &-os URL-eket, de mindenképpen érdemes megpróbálni.

 

A tördelésbe sajnos nem sok beleszólásunk van (sem nekem, sem Batacinak), ezért is mennek képként egyre inkább a forráskódok (de azért 1-2 alkalommal muszáj). A DVD-n fent van mindig az aktuális teljes csomag, így "bónuszként" az összes országzászló ikonban, és a CoreDRAW-s címsorgeneráló program is.

[Pjotr 9]

href.hu

 

JS-et lehetne használni, hogy pl. egy fájlból olvassa ki a teljes címet? Olyan jellegű "csalásként", mint a target="_blank"?

 

(Most nézem a júniusi kódot, olyan hévvel estem le a székről, hogy épp talajvízben ülök.)

[Giraffe1 0]

href.hu

És milyen jól nézne ki, amikor egy PR-es anyagban azt látod, hogy "további információ: href.hu/..."

 

JS-et lehetne használni, hogy pl. egy fájlból olvassa ki a teljes címet? Olyan jellegû "csalásként", mint a target="_blank"?

Persze, nagyon egyszerûen. Kell egy "kétdimenziós" tömb, amiben tárolod a HTML-kódban tárolt és a tényleges URL-eket, majd az inicializáló végigmegy az össze linken, megnézi, hogy az URL szerepel-e a listában, és ha igen, akkor kicseréli a másikra. Csak az a baj, hogy a) mi van, ha nincs a JS engedélyezve a felhasználónál (akkor megyx a rossz URL-re?); b) kicsit "vírusgyanús" egy ilyen átirányítás, hiszen így bármilyen oldal linkjeit el lehet téríteni.

 

(Most nézem a júniusi kódot, olyan hévvel estem le a székrõl, hogy épp talajvízben ülök.)

Hidd el, azért alapvetõen nem ez a célunk.

 

 

2009. július 19. 6:16: az OK, hogy én most vasárnap már fent voltam ilyen korán, de ez azért beteges

[Pjotr 9]

JS lesz ebbõl a linkesítésbõl. Valahogy úgy kellene, hogy JS elõtt nincs egyáltalán link, JS után van.

 

Beteges? Nem hiszem, talán az, hogy ma a betonlapokra ráképzeltem a dobozmodellt.

[Giraffe1 0]

JS lesz ebbõl a linkesítésbõl. Valahogy úgy kellene, hogy JS elõtt nincs egyáltalán link, JS után van.

Akkor "csak" jelölni kell a linkek helyét (pl. <span>-nal", majd azokba létrehozni az <a>-elemek, amiket szépen felparaméterezel (innerHTML, href, target stb.).

 

Beteges? Nem hiszem, talán az, hogy ma a betonlapokra ráképzeltem a dobozmodellt.

Lehet, hogy (Neked is) meg kellene vizsgáltatnod magad az avatorddal.

 

[payskin 917]

Lehet, hogy (Neked is) meg kellene vizsgáltatnod magad az avatorddal.

(OFF) Mikor utoljára láttam, a City17-től néhány kilométerre striderek különleges betegségét gyógyította mágneses robbanólabdákkal. (ON)

[Pjotr 9]

---

Mintha működne (Táblázat)

[Pjotr 9]

Volt órán a tabulátoros tartalomváltás (program.html). Most ezzel szenvedek, de kicsit megbolondítva.

 

A cél az lenne, hogy egymás fölött tanyáznak a "tab"-ok, 2 alapból nyitva van, és ha rányomok bármelyikre, akkor a nyitott-csukott állapota megváltozik, de csak neki.

 

Odáig meg a dolog, hogy megoldom, melyik van alapból nyitva, váltani is tudom az állapotaikat. A gondom az, hogy nem tudom bepakolni õket egymás alá-fölé.

Külön a linkek, külön a tartalmak egymás fölött vannak, de nekem ez így nem jó.

• Link1 (Ha rányomok, eltûnik a tartalma.)
• tartalma
• Link2 (Ha rányomok, eltûnik a tartalma.)
• tartalma
• Link3 (Ha rányomok, megjelenik a tartalma.)

Valahogy így kellene. És persze nem marad üres terület, ha becsukok egy tartalmat.

 

Az órai kódban egy listára lettek felfûzve a linkek, az vezérli az egészet. Itt ez nem használható, legalábbis nekem úgy tûnik. Egyre inkább körvonalazódik bennem, hogy nem is lehet megcsinálni, de ha tudjátok a megoldást, ne tartsátok magatokban.

 

Köszi!

 

---

Sikerült, csak aludni kellett egy kicsit így 9 év után.

[payskin 917]

[Giraffe1 0]

Az órai kódban egy listára lettek felfûzve a linkek, az vezérli az egészet.

Az "órai kódok" elsõsorban ötleteket próbálnak adni, és nem minden esetben "konyhakészek". Ugyanis a) utóbbiakból nem sokat lehet tanulni; b) azok a programok, amik minden lehetséges helyzetre felkészülnek általában nagyon összetettek (nem lehetne elmagyarázni a lényegüket), és általában sokkal lassabbak.

A Te esetedben én címsorokkal és divekkel "operáltam" volna (esetedben ez a kifejezés külön helytálló ), és az adott szintû címekre illesztettem volna rá a megjelenítõ, eltüntetõ utasításokat (esetleg egy kis jQuery effektussal megfûszerezve).

 

Sikerült, csak aludni kellett egy kicsit így 9 év után.

Igen, állítólag úgy könnyebben fog az ember agya.

 

[Pjotr 9]

Így csináltam. <h4>-ben van a cím, ha erre rákattint a látogató, akkor eltűnik vagy megjelenik az alatta lévő <div>.

 

Ide kattintva előtűnik az alkotásom. Még hegesztés alatt áll, de már üzembe van helyezve.

 

(Találtam benne egy zsák hibát, de már csak feltöltés kérdése. )

[Pjotr 9]

2 div-nek hogyan tudom összehangolni a magasság a másikhoz viszonyítva? Mindig a magasabb lenne a mérvadó, tehát az alacsonyabbnak kellene megkapnia a másik magasságát.

JS-tel (oldal.style.height varázsigével) próbáltam úgy, hogy lementettem (elvileg) a div magasságát, összehasonlítottam, majd az eredménynek megfelelően utasítottam. Nem jött be. Ja, CSS-ben nincs előre megadva egyik magassága sem, legfeljebb a minimum.

[KGigi 21]

Amikor lekérdezed az értékeket, akkor még jó? Írasd ki minden lépés után a változókat, valahol meghülyül.

[Pjotr 9]

Behalok! A méret lekérdezése sem megy neki. Más módon kell kivernem belőle, hogy mekkora az aktuális magasság.

 

Már alakul. Közben találtam egy sokkal jobb megoldást. Talán nem sokkal jobb, még meglátom, de alakulok. Nem este kellene ezeknek nekiguggolni.

[KGigi 21]

Ha sytle-t írsz, ne felejtsd el a végére hozzáfűzni, hogy pixel.

 

Ha például a content egy div és a height-ban tárolod a kívánt magasságot, akkor content.style.heigh t= height + "px" lesz.

[Pjotr 9]

Ez rendben van, a gond a lekérdezéssel volt. Object.clientHeight-tal kellett lekérdezni, innentõl sima volt.

[payskin 917]

Ha jól rémlik, a style.height csak akkor mûködik, ha inline style-ban van megadva a magassága.

[Giraffe1 0]

Egy objektum számított magasságát az offsetHeight-tel lehet lekérdezni. Ez - legalábbis normális böngészők esetében - a padding-gal és border-rel bővített területet adja vissza, vagyis a margók (margin) már nem számítanak bele. A clientHeight elvileg ugyanezt adná vissza a keret nélkül, de az IE6 clientHeight-re 0-t (de nem null-t) ad vissza.

 

Minimálteszt:

<html>
<head>
    <title>Untitled</title>
</head>

<body onload="alert(document.getElementById('teszt').clientHeight + ' - ' + document.getElementById('teszt').offsetHeight);">

<div id="teszt" style="margin: 5px; padding: 2px; border: 1px solid black;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio est. Pellentesque ligula diam, tincidunt ut facilisis vel, laoreet eu urna. Duis ac ipsum sem, vel placerat neque. Vivamus vitae tortor at arcu ultrices tincidunt. Cras fermentum, neque at sollicitudin convallis, libero neque tempor ante, quis feugiat neque diam et nibh.
</div>

</body>
</html>

Ezek az értékek csak olvashatóak, beállítani a magasságot az obj.style.height = magassag + "px" formában lehet.

 

@Balázs: az új böngészőkben már szerencsére nem.

[Pjotr 9]

A style.height azért nem ment nálam, mert nem volt CSS-ben megadva a <div> mérete, ez még -- talán -- időben leesett.

Próbáltam offsetHeight-tal is, de nem ment, még megnézem ma. Azt, hogy az IE6 mit ad vissza megjegyzem, de nem igazán akarok ezzel a problémával foglalkozni. Az oldal úgyis olyan embereknek lesz, akik Vista-t használnak, így IE6 -- elvileg -- nem jön szóba sem.

 

Jaj, a hétvégén még megnézem a második űrlapozást, aztán majd jövök kérdezni.