Ugrás a cikk elejére!

Címkék: ,

A múlt héten a “Tapadós fejléc és lábléc.” című bejegyzésem végén felvetettem egy kapcsolódó problémát a lapon belüli hivatkozásokkal kapcsolatban, melynek megoldásáról ebben a bejegyzésben rántom le a leplet.

Csak pár új sorral kell bővíteni a múltkoriakat, ezért ebben a cikkben csak  ezeket közlöm, a teljes kódot nem. Mielőtt bemutatom a megoldást, leírom a gondolatmenetet, amely segíti a könnyebb megértést.

Tehát képzeljünk el egy blogot, ahol bejegyzések és címek váltják egymást, a bejegyzések végén pedig el szeretnénk helyezni egy hivatkozást, ami a cikk elejére gördíti a lapot, azonban a “tapasztott” fejléc miatt a cikkek címe a fejléc alá csúszik be.

Remélem logikusan hangzik, hogy a címek és az azokat megelőző bekezdések között kell elhelyeznünk pontosan akkora dobozokat, mint a fejléc, és az “Ugrás a cikk elejére!” című hivatkozásokat erre a helykitöltőre kell ráirányítanunk. Azonban rögtön felmerül bennünk az is, hogy egy nagyméretű fejléc esetén emiatt óriási űr tátong majd a bejegyzések között, ami egyáltalán nem esztétikus. Az űr megszűntetéséhez nem kell mást tennünk, mint ezeket a helykitöltő dobozokat észrevétlenül rácsúsztatni az őket megelőző tartalomra. A hivatkozásokról se feledkezzünk meg, amiket a bejegyzések végén kell elhelyezni, és már készen is vagyunk. Az egyszerűség éredekében most csak egyetlen címmel illusztrálom a megoldást, ami a következő:

Ugrás a cikk elejére! 1.

HTML Kód:
<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>
<div id="Cikk"></div>
<h2>A cikk címe ...</h2>
<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="#Cikk">Ugrás a cikk elejére! (#Cikk)</a>&nbsp;&bull;&nbsp;<a href="#Torzs">Vissza a lap tetejére! (#Torzs)</a>&nbsp;&bull;&nbsp;<a href="#Fejlec">Vissza a lap tetejére! (#Fejlec)</a></p>
CSS Kód:
#Cikk	{
	margin-top: -64px;
	height: 64px;
	width: 768px;
	display: block;
}

Ahogy a kódból látható, nem csináltam mást, mint a felső margónak (margin-top) egy negatív értéket adtam, ami pontosan megegyezik a fejléc magasságával. Így, amikor erre a láthatatlan dobozra mutató hivatkozásra kattintunk, akkor a böngésző a doboz tetejéhez gördít, vagyis a “A cikk címe …” cím pontosan a fejléc alatt jelenik majd meg, ahogy kell.

A képen a Web Developer segítségével illusztráltam a láthatatlan doboz létét, de ennek hiányában a #Cikk háttérszínének (background-color) beállításával is könnyedén nyomonkövethetjük a módosítások hatását. Gyerünk, próbáljátok ki ti is! 😉

Hozzászólás: » 0 « • Írta: Péter (2010/02/27 13:36)

Hozzászólás írása a “Ugrás a cikk elejére!” című bejegyzéshez:

Kötelező!

Kötelező!