Kategória: CSS

html div img vertical-align:middle probléma és egy lehetséges megoldása

Meguntam, hogy minden ilyen vertical-align-os igazítást táblázattal oldok meg. Most megint ebbe a problémába ütköztem és végre rászántam az időt a probléma megoldására.

Az alapprobléma a következő:
Van egy fix méretű divünk és benne egy képi elemet akarunk vertikálisan és horizontálisan is középre igazítani. Ez egy hétköznapi probléma.

Miért írom én most ezt a cikket?
Sok helyen olvastam utána, hol és hogyan érdemes megoldani ezt a problémát. Sok helyen a kérdezőt, oltogatták és céloztak a megoldásra pl.: a weblaboron… olyan kioktatós jellegű hozzászólások voltak nagy számban, persze tisztelet a kivételnek. Nos én ezeket a bejegyzéseket vagy 5 ször átrágtam és nem igazán jutottam el a megoldáshoz, mivel elméleti szinten nagyon jól megmondják, csak példával nincs illusztrálva! Igazán akkor tudja megérteni az ember, ha megkeresi maga a megoldáshoz vezető utat. Nekem ez cirka 10 órámba került…

A feladat:
Adott egy fix méretű div és benne vertikálisan és horizontálisan is középre akarunk helyezni egy képi elemet. “html div img vertical-align:middle probléma és egy lehetséges megoldása” Tovább olvasása

Reklámok

Táblázatszerű lista színezése CSS3-al

Egy munkám során, olyan felületet kell építenem, ami épít a gyorsaságra. Egy részfeladata ennek a következő: Táblázatszerű listát kell megjelenítenem, ebben a táblázatban egyszerre több száz sornyi adat is megjelenhet. Egyszerűen akartam megoldani a problémát, és javascripttől  mentesen. A feladat minden második sor más és más háttérszínnel jelenjen meg, erre vannak jó kis javascriptes css-es megoldások, de én ettől mentesen akartam megoldani a dolgot. Ekkor akadtam a CSS3 Pszeudo Class-aira.   Ezzel, egyszerűen megoldható, hogy melyik sort milyenre akarjuk kidekorálni. A W3c egy aloldalon be is mutatja, hogyan működik és hogyan kell használni. Nagy probléma vele, hogy sok böngésző még nem támogatja, így publikus oldalon ez a megoldás még nem használható ki teljes mértékben. Támogatottság a korábban belinkelt oldalon, nos publikus oldalon maradnak a javascriptes megoldások, mert ez “még túl friss” :). Probléma még, hogy sor és oszlop szinten egyszerre nem lehet alkalmazni. Ezért nagy kár, mert így hover állapottal a táblázatban nem látható, hogy melyik sorban és melyik oszlopban vagyunk éppen.

Zend Framework – Céges Demo portál – CSS

Manapság a portálok kinézetéért nagyrészt a CSS fájlok illetve azok tartalma a felelős, ha gyorsan kell számunkra egy alap CSS fájl amiben az alapkinézet megvan, nem nekünk kell rájönnünk s kitalálunk kipróbálnunk, hogyan is lehet megoldani az elrendezést. Manapság sok ingyenes template CSS létezik ami kiindulásnak tökéletes lehet számunkra.

A weben böngészve találhatunk többféle előre legyártott css templatet a http://www.arth2o.hu/css/oldal ezek egyike. Amelyik template közel áll elképzelésünkhöz, érdemes azt letöltenünk s a továbbiakban azzal dolgoznunk. Saját magunk is megszerkeszthetjük de lévén, hogy ez a cikk sorozat a Zend Frameworkről szól ezzel nem fogunk sokat foglalkozni, ugyanis a egy jó design kifejlesztéshez grafikus szükséges “Zend Framework – Céges Demo portál – CSS” Tovább olvasása

Saját jquery függvényünk elkészítése és meghívása

Weboldal fejlesztés közben, szükségünk lehet egyedi magunk által fejlesztett akár paraméterrel is rendelkező jquery függvényre. Számtalan helyen le van írva,  hogy ha egy click esemény történik akkor, hogyan lehet azt elkapni, és ekkor a kért módosításokat elvégezni, ez mind szép és jó, de ha egy weboldalt generálunk, ahol nem tudjuk előre hány elem és milyen id-vel class-al fog szerepelni, és ezt előre meghatározni nehéz szinte lehetetlen, ekkor én paraméterrel rendelkező függvényt szoktam meghívni ami elvégzi azokat a módosításokat ellenőrzéseket amik szükségesek.

Hogyan néz ki egy paraméterrel rendelkező saját magunk által írt jquery függvény?

Az alábbi példa válasz a fenti kérdésre :

jQuery.fn.fShowElement = function(cid){
if($("#elementid_"+String(cid)).is(':hidden')){
var i = 0;
while($("#elementid_"+String(++i)).length > 0){
$("#elementid_"+String(i)).hide();
}
$("#elementid_"+String(cid)).show();
}
};

A fenti kód annyit csinál, hogy végigfut az oldalon és a #elemntid_1-től amíg létezik az összes ilyen div css display tulajdonságát none-ra állatja majd, a paraméterben kapottat megjeleníti.

Most már van egy függvényünk, ami csinál is valamit, nah de mikor hívjuk meg? Mi azt szeretnénk, hogy ha ez a paraméterrel rendelkező függvény egy bizonyos div-en történő kattintáskor hívódjon meg. Egy bizonyos ez kicsit téves megfogalmazás, ugyanis sejtésünk sincs arra vonatkozóan, hogy a jövőben mindig csak a 3. elem esetén fusson le a függvényünk. Viszont azt tudjuk az oldal generáláskor, hogy ha erre a div-re kattint akkor függvényünket milyen paraméterrel kell meghívni. Így az elemnek definiáljuk az onclick eseményét és hogy mit kell meghívni, ezt a HTML tag onlick eseményében az alábbi módon tehetjük:

onclick="$(this).fShowElement(1);"

Ezzel, egy HTML tag onclick eseményénél megadtuk, hogy hogyan kell meghívni  a saját paraméterrel rendelkező jquery-s függvényünket.

Egyszerűnek tűnik, én is azt gondoltam de több napomba került mire kisilabizáltam, hogyan is kell ezt megvalósítani, mivel szinte sehol sincs leírva ez a hasznos információ.

960 Grid System – tapasztalatok

Sokszor nagyon fontos, hogy egy weboldal grafikai terve és ennek megvalósíthatósága legyen gyors a rövid határidők miatt. Eme megfontolásból, valahogy gyorsítani akartuk a kivitelezést. Grafikus tervező ismerőseim ekkor ajánlották figyelmembe a 960.gc tervezési és kivitelezési lehetőséget. Weboldalak sablonszerű felépítését, tulajdonképpen template építését segíti, ez a tervezési és megvalósítási lehetőség. Titka annyiból áll, hogy a weboldal tartalmi, képi elemeit valamilyen táblázatos(oszlopos) elrendezés szerint alakíthatjuk ki.

A weboldal kiegészítőkkel látja el a grafikai programok szinte mindegyikét, hogy már a tervezéskor illeszkedjen az elkészítendő weboldal az oszlopokra, tulajdonképpen ez a legfontosabb eleme a 960 Grid System használatának. Eme kiegészítő segítségével grafikus már könnyedén tud olyan weboldal grafikát építeni ami illeszkedik az oszlopokra.

Az oldal lehetőséget biztosít az egyedi grafika által megadott szélesség és a tervezéskor figyelembe vett oszlopszám alapján legenerálni a sitebuilder számára egy css-fájlt, aminek használatával, a weboldal felépítése is gyorsabbá válik.

Én a napokban próbáltam elkészíteni az első ilyen weboldalt. Hát mint mindennek, ennek a technikának is vannak hátrányai. Ha a grafikus szereti a blokkokat függőleges vonalakkal elválasztani, akkor ez a technika szinte használhatatlan, ugyanis ebben az esetben elveszik minden előnye.

Nézzünk egy példát:

Vegyünk:  70px oszlopszélességet

10px eltartást az oszlopon belül, így a weboldal bal jobb oldalán 10px eltartás lesz míg az oszlopok között tehát a belső részeken 20px.

Számoljunk 12 oszloppal.

A technika előnye abban rejlik, hogy a blokkoknak valamilyen háttérszínt adhatunk meg, így különülnek el egymástól könnyedén. Az eltartás az oszlopok között margin css tulajdonsággal adják meg, ennek hátránya, hogy ez a háttérképekre színekre, vonalakra tartalomra, egyszóval mindenre hatással van. Van két css osztály “alpha, omega”, előbbi az oszlop előtti eltartást redukálja 0-ra míg az utóbbi az oszlop utánit. Gondolnánk hoho nincs akkor probléma, de van hiszen az oszlopok szélességei fixek, így az alpha omega css osztály div-hez rendeléssel tulajdonképpen, az eltartást vettük 0-ra de ettől még az oszlop szélessége nem nő meg 10- 10 pixellel. A border tulajdonságnak egy hátránya van, hogy számít a szélessége, így ha két ilyen grid systemes blokkot vonallal szeretnénk elválasztani, ott vagyunk ahol  a part szakad, jöhet a fejszámolás a pixelek tologatása és a weboldal kivitelezése is lassul.

Egy szó mint száz, 960 Grid Systemmel csak akkor érdemes weboldalt, vagy weboldal templatet tervezni, ha egy egyszerű a tartalmi blokkokat egymástól nem vonallal elválasztó weboldalt szeretnénk megvalósítani, ugyanis ilyen esetekben a weboldal elkészítése nem gyorsul sőt inkább lassul mert időközben felül kell írni a Grid System által beállított szélességeket.

Minden más esetben optimális lehet használata, főleg ha a megszerkesztett grafika is illeszkedik hozzá. Ha van 12 oszlopunk  akkor az egymás után következő 3 divnek a grid_4 css osztályt állítjuk be akkor az nem más mint egymás mellett 3 oszlop 20-20 pixel eltartással és 310px tartalmi szélességgel. A weboldal jobb és bal oldalától pedig 10-10 pixel eltartás.

Drupal 6.x Simplemenu modul hibái

Van egy drupal oldalam ahol a Simple menu drop down(lenyíló) menüt használtam. Egész jól működött és tetszetősre sikerült megcsinálni. Én egy olyan változatát használtam ami egy <div> innerHTML tag-jébe tölti be az oldal betöltése után a menüt. A gond ezzel az volt, mint utóbb kiderült, hogy nem mindig jelent meg, főleg amikor egy linkre kattintva dobta el a látogatót az oldalra a böngésző. Ennek következménye, hogy az oldalról a visszafordulások aránya hatalmasra duzzadt. Első körben nem értettem, miért de amikor más számítógépeken is megnéztem az oldalt, akkor derült ki számomra, hogy ilyen bajok vannak a menü betöltődésével, ráadásul a keresők számára a menü linkek is rejtve voltak…

Hurrá…

Megoldás: Menü csere.

A menümet superfishre cseréltem, ennek mikéntjéről a adatptivethemes.com blogon olvashattok. A megoldás előnye a korábbival szemben, hogy nem utólag az oldal betöltése után kerül a menü a helyére, hanem azonnal az oldal generálása közben, így ha a css vagy a javascript nem töltődik meg akkor is megjelenik a menü, igaz ebben az esetben a megjelenése nyílván hagy kívánni valót maga után. De ez még  így is jobb mint a semmi.

A blogon amit, korábban említettem annyi kimaradt, hogy a superfish blokkhoz kell hozzárendelni az elsődleges linkeket. Ami nem is baj, a baj annyi, hogy a blokk hozzárendeléssel együtt megörökli a blokk css osztályait, ami a kinézetet nagyban befolyásolja, ezért a kiíratásnál bizonyos <h2></h2> tagek közötti és magukat a tageket is érdemes törölni a forásból, illetve a blokk css tulajdonságait elem szinten felül kell definiálni. Így tudjuk a menü megjelenítését érdemben befolyásolni.