Gondolom, biztos ti is észrevettétek például nálam is, hogy a fejléc mindenféle képernyő méretben végtelennek tűnik, tehát nem ér véget, és mindkét oldal felé még tart. Ha csak simán beszúrtok egy fejlécet, akkor ezt lehetetlenség csinálni anélkül, hogy ne tolódna ki a végtelenségig az oldal tőle. Pedig ha belegondolunk, ez nem is olyan nagy trükk, csak egyszerű CSS. Most bemutatom ezt is, hogy hogyan készíthetitek el ti is így a fejléceteket.

Először is kell, hogy legyen egy 1920 pixel széles fejlécetek (ez az a szélesség, aminél nagyobb képernyőméret nincs, kivéve persze a TVket) a magasság nem számít, kedvetektől függően készíthetitek ezt. Ha elkészült a munka, akkor nyisd meg Photoshopban a már PNG-ben, vagy JPG-ben lementett(!) fejlécet, hiszen fontos, hogy a rétegek már zárva legyenek, hogy semmi ne mozduljon el. Mivel ehhez a módhoz középre kell legyen igazítva az oldalad, így a fejlécedet is pont középen kell kivágnod az egészhez képest.

Menj a Kép/Rajvászon mérete opcióra, mivel ezzel tudod pontosan megvágni a fejléced csúszás nélkül.

 Itt láthatod képpontban a méreteket (ha nem képpontban van megadva, értelem szerűen állítsd át) Nem kell semmi mást sem állítanod rajta, csupán átírnod az 1920 pixel szélességet 1000 pixel szélességre (ez az a méret, aminél nem igen van kisebb képernyő).

 Ha át is írtad, akkor lehet leokézni. Itt fel fog jönni egy ablak, miszerint az eredeti kép kisebb ennél, de ne foglalkozz vele, lépj tovább.

 Ezután láthatod, a fejléc pont középen lett elvágva 1920 pontról 1000-e. Mentsd el a végleges változatot, és természetesen legyen meg a teljes is. A következő lépésben kell beraknunk a CSS-ünkbe a fejlécet.

Az alábbi kód szerint illeszd be a képeid URL-jét a CSS-edbe. Fontos, hogy az oldaladon a modulok, és az alap fejléc is középen legyen. Plusz ehhez jó, ha szintén előre elkészíted a háttered is, mert annak is fog kelleni a kódja.

body{
margin: 0; /*fejléc távolsága a lap tetejétől nézve: maradjon nulla!!*/
background: url(http://teljesfejléc), url(http://oldalháttér); /*háttérképek linkje*/
background-position: center top, center top; /*hátterek elrendezése*/
background-repeat: repeat-x, repeat; /*hátterek ismétlődése*/}

Ha ez megvan, csupán a kivágott fejlécet kell beraknod a fejléc helyére, az alábbi kód szerint középre igazítva:

<div align="center"><img src="http://kivágottfejléc"></div>

És tulajdonképpen ennyi az egész. Egyszerű megoldani, ráadásul bárhol működik (még G-portálon is). Remélem, hasznotkra válik a segítség. Ha valamit nem értetek, vagy elakadtatok, csak hozzászólásban írjatok!


Komment részleg
2015/04/11 18:09

Nekem nem akar működni, pedig mindent a leírás szerint csináltam. :/

Brielle
2015/04/13 21:56

Hát, akkor valamit mégsem a szerint csináltál, ha nem sikerült. És pontosan mi nem sikerült benne? A fejléced, vagy a háttered nem került középre? Nem igen tudok segíteni, ha nem adsz meg semmit se róla. Leginkább egy link segítene :)

2015/05/19 19:00

Szia Brielle! : )
Nagyon hasznos a leírásod, nekem egy problémám lenne, a fejléc sajnos nem akar a helyére kerülni, így néz ki: http://i.imgur.com/QkuxsXr.jpg

Lehet, hogy rossz helyre másolom a kódot, vagy valamit rosszul csináltam valahol, nagyon megköszönném, ha tudnál segíteni egy kicsit : )

Üdv: Layla

Brielle
2015/05/19 21:50

Nem, semmit sem csináltál rosszul. Bele kell számolnod, hogy G-Portálon a reklám is számít, tehát a teljes fejlécedhez még azt is hozzá kell adnod. Tehát kell egy pont olyan vastagságú sávot a fejléc háttered tetejére tenned, ami megegyezik a reklámcsíkéval. Pluszban mivel be vagy lépve, ezért még lejjebb tolódik a kis fejléc. :)

2015/05/20 18:47

Jaaj, köszönöm szépen!:3

Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *