Auf Thema antworten 2026

Beitrag

<blockquote data-quote="mindraper" data-source="post: 1787847" data-attributes="member: 115163">AW: Sidebar - wie bekomme ich das hinHi mikemike,ich gehe mal davon aus, Du meinst den auf der linken Seite bei der von Dir angegebenen HP <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /> das ist kein Hexenwerk:In einem &lt;div&gt;-Container, der (zumindest würde ich das so machen) links angeordnet wird, setzt du 3 oder 4 (je nach Anzahl der SocialNetworks auf die Du verweisen willst) &lt;a&gt;-Elemente. Gib denen ne Klasse via class=&quot;&quot;-Attribut, Beispiel:[CODE]&lt;body&gt;&lt;div id=&quot;sidebar&quot;&gt;&nbsp;&nbsp; &lt;a href=&quot;einSocialNetwork.com&quot; class=&quot;sn-link&quot; id=&quot;sn1&quot;&gt;Social Network 1&lt;/a&gt;&nbsp;&nbsp; &lt;a href=&quot;neuesSocialNetwork.com&quot; class=&quot;sn-link&quot; id=&quot;sn2&quot;&gt;Social Network 2&lt;/a&gt;&nbsp;&nbsp; &lt;a href=&quot;dasSocialNetwork.com&quot; class=&quot;sn-link&quot; id=&quot;sn3&quot;&gt;Social Network 3&lt;/a&gt;&lt;/div&gt;...&lt;/body&gt;[/CODE]Die &lt;a&gt;-Elemente, die im Standart inline-Elemente sind, gibst Du die Eigenschaft display:block; und jeweils über die ID das zuzuordnende Hintergrundbild. Mach das Bild gleich als EIN Bild im normalen und im :hover-Zustand, dann muss es dabei nicht nachgeladen werden. Bei dem Bild ist der Standartzustand oben, das hovern unten. Wenn ein Besucher die Links mit der Maus überfährt, wird der :hover ausgelöst und das Hintergrundbild nach oben verschoben. Dann baust du ein CSS, das ungefähr so aussieht:[CODE]#sidebar {&nbsp;&nbsp; position: absolute; /* position: fixed; wenn es mit &quot;scrollen&quot; soll */&nbsp;&nbsp; top: 100px; /* kommt halt drauf an, wie weit von oben weg */&nbsp;&nbsp; left: 0px;&nbsp;&nbsp; z-index: 9999; /* legt das div über alle anderen Elemente */}.sn-link:link, .sn-link:visited {&nbsp;&nbsp; display: block;&nbsp;&nbsp; width: 50px; /* größe hängt von der hintergrundgrafik ab, auch bei height */&nbsp;&nbsp; height: 100px;&nbsp;&nbsp; margin-bottom: 15px;&nbsp;&nbsp; background-repeat: no-repeat;&nbsp;&nbsp; background-position: top left;&nbsp;&nbsp; font-size: 0px; /* macht den text im link 0px groß */&nbsp;&nbsp; text-indent: -999999em; /* &quot;schiebt&quot; den text um 999999em aus dem viewport */}&nbsp;&nbsp; .sn-link:hover, .sn-link:focus, .sn-link:active {&nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; background-position: bottom left;&nbsp;&nbsp; }#sn1 {&nbsp;&nbsp; background-image: url(../pfad/zum/bild_1.jpg);}#sn2 {&nbsp; &nbsp; background-image: url(../pfad/zum/bild_2.jpg);}#sn3 {&nbsp; &nbsp; background-image: url(../pfad/zum/bild_3.jpg);}[/CODE]Wenn Du das Ganze so aufbaust, bekommst du es hin und hast gleichzeitig den Vorteil, dass Screenreader ebenfalls damit arbeiten können, zumindest besser als mit dem alt=&quot;&quot;-Attribut von &lt;img&gt;-Elementen. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" />Kann das Ganze aber auch gern als Tutorial posten <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /></blockquote>

[QUOTE="mindraper, post: 1787847, member: 115163"] [b]AW: Sidebar - wie bekomme ich das hin[/b] Hi mikemike, ich gehe mal davon aus, Du meinst den auf der linken Seite bei der von Dir angegebenen HP :) das ist kein Hexenwerk: In einem <div>-Container, der (zumindest würde ich das so machen) links angeordnet wird, setzt du 3 oder 4 (je nach Anzahl der SocialNetworks auf die Du verweisen willst) <a>-Elemente. Gib denen ne Klasse via class=""-Attribut, Beispiel: [CODE] <body> <div id="sidebar"> <a href="einSocialNetwork.com" class="sn-link" id="sn1">Social Network 1</a> <a href="neuesSocialNetwork.com" class="sn-link" id="sn2">Social Network 2</a> <a href="dasSocialNetwork.com" class="sn-link" id="sn3">Social Network 3</a> </div> . . . </body> [/CODE] Die <a>-Elemente, die im Standart inline-Elemente sind, gibst Du die Eigenschaft display:block; und jeweils über die ID das zuzuordnende Hintergrundbild. Mach das Bild gleich als EIN Bild im normalen und im :hover-Zustand, dann muss es dabei nicht nachgeladen werden. Bei dem Bild ist der Standartzustand oben, das hovern unten. Wenn ein Besucher die Links mit der Maus überfährt, wird der :hover ausgelöst und das Hintergrundbild nach oben verschoben. Dann baust du ein CSS, das ungefähr so aussieht: [CODE] #sidebar { position: absolute; /* position: fixed; wenn es mit "scrollen" soll */ top: 100px; /* kommt halt drauf an, wie weit von oben weg */ left: 0px; z-index: 9999; /* legt das div über alle anderen Elemente */ } .sn-link:link, .sn-link:visited { display: block; width: 50px; /* größe hängt von der hintergrundgrafik ab, auch bei height */ height: 100px; margin-bottom: 15px; background-repeat: no-repeat; background-position: top left; font-size: 0px; /* macht den text im link 0px groß */ text-indent: -999999em; /* "schiebt" den text um 999999em aus dem viewport */ } .sn-link:hover, .sn-link:focus, .sn-link:active { width: 100px; height: 100px; background-position: bottom left; } #sn1 { background-image: url(../pfad/zum/bild_1.jpg); } #sn2 { background-image: url(../pfad/zum/bild_2.jpg); } #sn3 { background-image: url(../pfad/zum/bild_3.jpg); } [/CODE] Wenn Du das Ganze so aufbaust, bekommst du es hin und hast gleichzeitig den Vorteil, dass Screenreader ebenfalls damit arbeiten können, zumindest besser als mit dem alt=""-Attribut von <img>-Elementen. :) Kann das Ganze aber auch gern als Tutorial posten :) [/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?