Sok oldalon jártam már, amik szépek voltak, tartalmasak, csak egy, de annál sokkal idegesítőbb dolog rontott bele az összképbe: az, hogy szétesett az egész portál. Ez nem vet túl szép fényt magára a portálra, mert van olyan, amikor olyan szinten zavaró, hogy hiába érdekelne a portál, egyszerűen nem tudom magamat rávenni arra, hogy akkor én most meg is nézzem, esetleg elolvassam a tartalmat, és mivel mostanában egyre sűrűbbek az ilyen dolgok (gondolom a nyár miatt több időtök jut egy dizájn elkészítésére), szeretnék nektek kis segítséget nyújtani ahhoz, hogy ne essen szét annyira a portálotok.

Egy nagyon fontos dolgot azért még kiemelnék: jelenlegi CSS kódod csak és kizárólag akkor módosítsd, ha biztos vagy magadban! Ha nem vagy biztos a sikerben, inkább másold ki a CSS kódodat egy .txt fájlba, és ha netalántán balul sülne el az igazítás, akkor vissza tudod rakni a portálodba a régi CSS kódot.

Ha végképp nem tudod megérteni a dolgokat, akkor itt van az én CSS kódom, amit nyugodtan vehetsz alapnak. Be vannak jelölve, hogy a kódrészletek mihez igazodnak, mit módosítanak, tehát nagyon nehéz dolgod nem lesz kiigazodni benne, viszont jó alapot biztosít akkor, ha egyáltalán nem vagy biztos a dolgodban.

Első lépés: dönts!

Lehet, hogy hülyeségnek hangzik, de igenis nagyon fontos lépés, mint ahogy általában az első lépés(ek) a legfontosabb(ak). Amikor nekiülsz a képszerkesztőknek, fejben döntsd el, hogy akkor milyen stílusú dizájnt szeretnél. Egyszínűt, háttereset, HTML-stílusút (a nagy, csillivilli, nagyon király, de hamar túlzásokba eshetős dolog), esetleg egy szimplát, egyszerűt. Minden itt dől el, mert ha azt mondod, hogy egyszínűt szeretnél, minimalistát, kis csillogással, akkor már van egy nagyon jó kiindulópontod, aminek következtében elindulhatsz egy rögös úton.

Akkor kezdjünk neki

Hála a G-Portálnak, nagyon sok divet, táblázatot lehet testre szabni, akkor is, ha azokról fogalmad sincs, hogy léteznek. Például tudtad, hogy a bal oldali moduloknak és a jobb oldali moduloknak is van külön-külön CSS részük, amit csak elő kell halászni, ha használod őket? Ha nem lennének, nem lenne ott fent az egekben a bal oldali cucc legeleje.

Legelőször mindig gondold ki, hogy milyen hátteret szeretnél. Ha egyszínűt, akkor nagyon nem kell gondolkodnod, viszont ha mintásat, akkor figyelned kell arra is, hogy ismétlődjön, és ne hirtelen szakadjon meg a minta, és kezdődjön megint. Figyelned kell arra is, hogy legalább 1920 pixel széles legyen a háttérfájlod - lehet, hogy ennek köszönhetően lesz vagy 69 megabájt a fájlod, de ez egy elengedhetetlen dolog ahhoz, hogy ne csússzon el a portálod. Miután megcsináltad a fejlécet, és úgy van, mint nálam (link), hogy a fejlécen már "elkezdődik" az oldalsó modulok cucca, akkor csináld meg úgy, hogy megnyitod magát a fejlécet, majd a felesleges részeket, amik nem kellenek a háttérhez, letörlöd róla, így megkapod magát a hátteret. Kijelölés, másolás, új lap megnyitása, kiválasztod a méretet, ahogy az előbb is írtam, és beilleszted a fejléc alapját. Szépen kitöltöd a maradékot a textúráddal, és beilleszted úgy, hogy középen legyen a fejléc. Ezt úgy tudod megcsinálni, hogy kiveszed a nagyítást, körülbelül 30%-ra, beszúrod, és a shift mozgatásával húzod felfele, amíg csak bírod. A fejlécedből másolod azt a fehér részt, és beilleszted azt is. Valahogy így kellene kinéznie az egésznek. Húzd le a fehér részt (de csak akkor, ha fedett árnyék van rajta, és fehér színű átfedés) kicsit lentebb, mint amekkora az egész dokumentom, valahogy így, mert ha ezt nem csinálod meg, így fog kinézni, és világos háttéren nagyon zavaró + nem fog folytatódni sem a háttéren, meg fog szakadni. És íme, készen is vagyunk a háttérrel, ami - ha ügyesek vagyunk - nem fog ismétlődni. Királyság.

Jöjjön a neheze: CSS

Talán ez az egyik legnehezebb része a cikknek, de azért annyira ez sem megerőltető. Amint írtam, a G-Portál rengeteg segítséget ad, és ennek köszönhetően nagyon jól testreszabható minden portál, csak egy kis kreativitás és kódismeret kell hozzá.

Nyisd meg a CSS fájlomat, és nézz szét benne. Az első rész neve az, hogy "alapok", itt vannak a fontosabb részek, amik magát a portált formálják meg. A body részt szerintem nem igazán kell magyaráznom, ez maga a háttér, az oldal, amire jönnek a divek. A td rész a táblázat, de viszont van egy olyan rész, hogy .site, ami nagyon fontos, ez maga az oldal divje. De ne haladjunk előre, mert a body résznél kell valamit alkotnunk.

Ahhoz, hogy portálod ne csússzon, először a hátteret kell beállítani megfelelően. A mi esetünkben ez úgy történik, hogy beszúrod a háttér linkjét, majd nyomsz egy entert a ";" jel után, és beírod ezeket a sorokat:

background-repeat: repeat-y;
background-position: center top;
background-attachment: scroll;

Hogy ez miért fontos? A background-repeat rész a háttér ismétlődését szabályozza, ha azt írod be, hogy repeat, akkor vízszintesen és függőlegesen is ismétlődik, ha azt, hogy repeat-x, akkor csak vízszintesen, azonban ha azt írod be, hogy repeat-y, akkor csak függőlegesen ismétlődik. A background position azért fontos, mert középre kell igazítani, amit a center állít be, a top annyira nem is fontos, mert a center a fontos, de nem baj, ha ott van. A background-attachment rész pedig azt szabályozza, hogy a háttér gördüljön az oldallal, vagy vagy fix legyen, most éppen gördül, a fixed nagyon furcsa hatást kelt ilyen háttereknél.

Ezek után, ha minden igaz, már majdnem nem csúszik szét annyira az oldalad, mint ezelőtt, de ha még mindig, akkor a .site részbe illeszd be ezt a két sort:

width: 1010px;
margin-left: 10px;

Hogy ez miért fontos? Azért, mert ezzel magát az oldalt tudod csúsztatni jobbra vagy balra, illetve az oldal szélességét tudod felülírni, attól függetlenül, hogy mit állítottál be a "stílus és a felület" részen. A margin-left pedig azt szabályozza, hogy mennyire csússzon jobbra, vagy balra az oldal. Ha pluszba van, akkor jobbra iszkol az oldalad, ha minuszban, akkor balra. Próbáld meg tökéletesre csinálni, hogy egyáltalán ne csússzon, és lám-lám, máris nem esik szét az oldalad.

Elméletben ez működik, gyakorlatban lehet, hogy vannak olyan részek a CSS-ben, amik befolyásolhatják ennek a helyes működését. Mindenféleképpen nézd meg, hogy van-e a CSS kódodban lentebb ilyen részek beállítva, mert ha egy kódban több ugyanolyan rész van, akkor az utolsót veszi figyelembe a portál, tehát teljesen mindegy, hogy mit állítasz be, ha lentebb van 3 másik olyan részed.

+1 tipp

A G-Portál beépítette azt a funkciót, hogy lehessen a <head> részbe beszúrni CSS fájlt. Ez azért fontos, mert először ezt tölti be a böngésző, nem a tartalmat, és mivel általában egy utolsó, jobb vagy bal oldali modulba szoktátok beszúrni a CSS kódot, így azt tölti be konkrétan utoljára. Ezért a CSS kódot szúrd be NotePad++-ba, mentsd el valami.css néven, töltsd fel a tárhelyedre a fájlt, és illeszd be a "stílus és a felület" részen belül a Plusz CSS mezőbe a fájl linkjét.

Nem nagy ördöngősség, de viszont annál inkább hasnosabb, tehát remélem tudtam segíteni mindenkinek, aki eddig nem értette ezt a csodálatos dolgot, és egyre kevesebb ilyen portált fogok látni. Ha nem értetek valamit, írjatok chatbe/hozzászólásban, és segítek szívesen.