Tapadós fejléc és lábléc

Ezt a bejegyzést már régóta ígérem Johnny barátomnak, és végre ma volt egy kis időm, hogy megírjam a fixen pozícionált fejlécek és láblécek rejtélyeit. A bemutatásra kerülő példa segítségével a jobb és baloldalon lebegő menük is könnyen kialakíthatóak, de ezek kivitelezésére nem térek ki.

Tehát legyen adott egy portál “csontváza”: fejléc, törzs, lábléc. A jobb szemléltetés érdekében döntöttem a kontrasztos színek és ismétlődő idézeteket mellett.

HTML Kód:

<div id="Fejlec">
	<h1>Susnya Blog</h1>
</div>
<div id="Torzs">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p><a href="#Torzs">Vissza a lap tetejére! (#Torzs)</a>&nbsp;&bull;&nbsp;<a href="#Fejlec">Vissza a lap tetejére! (#Fejlec)</a></p>
</div>
<div id="Lablec">
	<h1>Susnya Blog</h1>
</div>

CSS Kód:

body	{
	color: #ffffff;
	margin: 0px;
}
p	{
	margin: 0px;
	padding: 16px;
}
h1	{
	margin: 0px;
	padding: 8px 16px;
	text-align: center;
}
a	{
	color: #000000;
}
#Fejlec, #Lablec, #Torzs	{
	width: 768px;
	margin: 0px auto;
}
#Fejlec	{
	background-color: #0000ff;
	height: 64px;
}
#Lablec	{
	background-color: #ff0000;
	height: 64px;
}
#Torzs	{
	background-color: #00cc33;
}

Ahogy a képen látható, egy nagyon egyszerű szerkezetet hoztam létre, melyben két hivatkozást is elhelyeztem, de ezekről csak a cikk végén írok bővebben. Tehát, ha azt szeretnénk, hogy a kék színű fejléc állandó jelleggel látható legyen, és a tartalom a görgetéskor beússzon a fejléc alá, akkor nincs más dolgunk, mint rögzíteni a fejléc pozícióját a position: fixed; parancssal (A következőkben csak a változó kódrészleteket idézem.):

CSS Kód:

#Fejlec	{
	background-color: #0000ff;
	height: 64px;
	position: fixed;
}

Sajnos, nem teljes a siker, mert a fejléc fittyet hány a megadott jobb és bal margók auto paraméterére, mely arról gondoskodna, hogy minden esetben az ablak középén tartsa azt. Ennek kiküszöbölésére be kell vezetnünk egy új dobozt a #Fejlec-en belül, melynek a #Menu azonosítót adtam. Ez a doboz már a fejléctől teszi függővé a pozícióját, így végre azt kapjuk amit szeretnénk. (A lábléc esetében hasonlóan járok el, csak #Menu helyett az #Impresszum azonosítóval láttam el a megfelelő dobozt. Mellesleg úgy tűnik, a FireShot kiegészítő jobban renderel, mint maga a Firefox, mert teljes oldal lefényképezése esetén a lábléc narancs színben pompázik, ahogy az elvárható lenne. 8))

HTML Kód:

<div id="Fejlec">
	<div id="Menu"><h1>Susnya Blog</h1></div>
</div>
.
.
.
<div id="Lablec">
	<div id="Impresszum"><h1>Susnya Blog</h1></div>
</div>

CSS Kód:

#Fejlec	{
	background-color: #0000ff;
	height: 64px;
}
#Lablec	{
	background-color: #ff0000;
	height: 64px;
}
#Menu	{
	background-color: #00ccff;
	position: fixed;
	height: 64px;
	width: 768px;
}
#Impresszum	{
	background-color: #ee0000;
	height: 64px;
	width: 768px;
}

A fejléc végre feltapadt, és a szöveg is aláfolyik, de a láblécről ugyanez nem mondható el. Ehhez még egy apró módosításra van szükség, vagyis a bottom paraméter deklarálására a CSS kódban, ahol pixelben adhatjuk meg azt a távolságot, amit tartani fog a lábléc a böngészőablak alsó vonalától. A mi esetünkben ez 0px-t jelent:

CSS Kód:

#Impresszum	{
	background-color: #ff9933;
	bottom: 0px;
	position: fixed;
	height: 64px;
	width: 768px;
}

Ugyanígy használhatjuk a fejlécnél a top paramétert, ha távolságtartóak szeretnénk lenni. Természetesen az elrejtett kék és piros dobozok továbbra is (rejtve, de) jelen lesznek az oldalon, melyeket ebben a példában azért nem látunk, mert a #Menu és az #Impresszum méretei megegyeznek rendre a #Fejlec és #Lablec méreteivel.  Erről egyébként könnyen meggyőződhetünk, ha belegörgetünk a tartalomba, és készítünk a teljes oldalról egy képernyőképet:

Úgy érzem, hogy a tapadó elemek problémáját ezzel megoldottuk, úgyhogy térjünk át a HTML kódban elhelyezett két link tanulságára. Aki követte a kódolást és közben próbálgatta a linkeket, talán már tudja is, hogy mire gondolok. Gyakran előfordul ugyanis, hogy ugrási lehetőséget szeretnénk biztosítani a lap tetejére vagy egy cikk elejére, melynek felhasználóbarát megvalósítása a fejléc tapasztása után problémákat okozhat. Ugyanis, ha a #Torzs szóval jelölt linkre kattintok, akkor az alábbi kép kell, hogy fogadjon mindenkit:

Ez azért van, mert a böngésző az eredeti #Fejlec dobozt már képes kiusztatni, és ennek következtében a tartalom becsúszik a tapasztott fejlécünk alá. Tehát ebben az esetben mondhatni “leszűkültek a lehetőségeink”, és a lap tetejére történő ugráskor a #Fejlec-re kell hivatkozni. Gondoljátok végig ennek alapján, hogyan lehetne megoldani azt a helyzetet, amikor több cikket helyeztek el egy oldalon, és az egyes cikkek elejére szeretnétek hivatkozni! 😉

Hozzászólás: » 6 « • Írta: Péter (2010/02/18 21:35)