Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Biernase" data-source="post: 1560482" data-attributes="member: 12510">In der Vergangenheit hatte ich immer einzelne Navigationselemente erstellt. Da es in Mode gekommen ist, sämtliche Navigationselemente in einer einzelnen Grafik abzuspeichern, wollte ich das nun auch einmal versuchen. Irgendwie ist mir das aber unklar.Ich hoffe, ihr könnt mir das anhand einer Beispielnavigation verständlich erläutern. Nehmen wir eine fiktive Beispielnavigation aus drei Navigationspunkten an, die der Einfachheit alle 100 Pixel breit und 50 Pixel hoch sind. Dadurch ergibt sich eine Breite von 300 Pixeln und eine Höhe von 150 Pixeln.Mein Code sieht so aus.[code]/* -------------------------------------------------------------------------------------- *//* ----------------------------------| Navigation Main |------------------------------- *//* -------------------------------------------------------------------------------------- */ul#navi {&nbsp; position:absolute;&nbsp; top:295px;&nbsp; }&nbsp; ul#navi li {&nbsp; float:left;&nbsp; text-indent:-9999px;&nbsp; }&nbsp; ul#navi li a {&nbsp; position:absolute;&nbsp; top:-94px;&nbsp; left:176px;&nbsp; background:url(../images/menu-complete.jpg) 0 0 no-repeat;&nbsp; width:300px;&nbsp; height:50px;&nbsp; display:block;&nbsp; }&nbsp; /* ------------------------------------| Eins |---------------------------------- */ul#navi #eins {&nbsp; width:100px;&nbsp; background-position:0 0;&nbsp; }&nbsp; ul#navi #eins:hover { background-position:0 -100px; }ul#navi #eins:active { background-position:0 -50px; }/* -------------------------------------| Zwei |---------------------------------- */ul#navi #zwei {&nbsp; width:100px;&nbsp; background-position:-200px 0;&nbsp; }&nbsp; ul#navi #zwei:hover { background-position:-200px -100px; }ul#navi #zwei:active { background-position:-200px -50px; }/* -------------------------------------| Drei |---------------------------------- */ul#navi #drei {&nbsp; width:100px;&nbsp; background-position:-300px 0;&nbsp; }&nbsp; ul#navi #drei:hover { background-position:-300px -100px; }ul#navi #drei:active { background-position:-300px -50px; }[/code][code]&lt;ul id=&quot;navi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;eins.html&quot; title=&quot;Einse&quot; id=&quot;eins&quot;&gt;Eins&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;zwei.html&quot; title=&quot;Zwei&quot; id=&quot;zwei&quot;&gt;Zwei&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;drei.html&quot; title=&quot;Drei&quot; id=&quot;drei&quot;&gt;Drei&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;[/code]</blockquote>

[QUOTE="Biernase, post: 1560482, member: 12510"] In der Vergangenheit hatte ich immer einzelne Navigationselemente erstellt. Da es in Mode gekommen ist, sämtliche Navigationselemente in einer einzelnen Grafik abzuspeichern, wollte ich das nun auch einmal versuchen. Irgendwie ist mir das aber unklar. Ich hoffe, ihr könnt mir das anhand einer Beispielnavigation verständlich erläutern. Nehmen wir eine fiktive Beispielnavigation aus drei Navigationspunkten an, die der Einfachheit alle 100 Pixel breit und 50 Pixel hoch sind. Dadurch ergibt sich eine Breite von 300 Pixeln und eine Höhe von 150 Pixeln. [u]Mein Code sieht so aus[/u]. [code] /* -------------------------------------------------------------------------------------- */ /* ----------------------------------| Navigation Main |------------------------------- */ /* -------------------------------------------------------------------------------------- */ ul#navi { position:absolute; top:295px; } ul#navi li { float:left; text-indent:-9999px; } ul#navi li a { position:absolute; top:-94px; left:176px; background:url(../images/menu-complete.jpg) 0 0 no-repeat; width:300px; height:50px; display:block; } /* ------------------------------------| Eins |---------------------------------- */ ul#navi #eins { width:100px; background-position:0 0; } ul#navi #eins:hover { background-position:0 -100px; } ul#navi #eins:active { background-position:0 -50px; } /* -------------------------------------| Zwei |---------------------------------- */ ul#navi #zwei { width:100px; background-position:-200px 0; } ul#navi #zwei:hover { background-position:-200px -100px; } ul#navi #zwei:active { background-position:-200px -50px; } /* -------------------------------------| Drei |---------------------------------- */ ul#navi #drei { width:100px; background-position:-300px 0; } ul#navi #drei:hover { background-position:-300px -100px; } ul#navi #drei:active { background-position:-300px -50px; } [/code] [code]<ul id="navi"> <li><a href="eins.html" title="Einse" id="eins">Eins</a></li> <li><a href="zwei.html" title="Zwei" id="zwei">Zwei</a></li> <li><a href="drei.html" title="Drei" id="drei">Drei</a></li> </ul>[/code] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?