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.