[Tutorial] Bild direkt auf dem Banner einsetzen

Wenn du einfach nur deinen Banner behalten möchtest, und dort nur z.B. Kerzen drauf setzen willst, dann gibt es eine andere Möglichkeit.
Wenn du dir hier mal unseren Banner oben anschaust, dann siehst du bei dem Monster so blaue Tropfen und eine Pfütze.
Diese sind eine Grafik die vor dem Banner liegt.
Solch eine Grafik einer Kerze kannst du auch ganz einfach vor deinem Banner frei platzieren, ohne das die auf der Bannergrafik selber eingesetzt werden muss.
Wenn du daran Interesse hast, dann storniere deine Bestellung hier und eröffne bitte eine Frage danach im Bereich "Das Aussehen des Forums anpassen". Ich kann dir dann erklären, wie man das machen kann.

Oki
Ich will es wissen

Hallo,

da Frank gerade weniger Zeit hat, haben wir besprochen, dass ich dir diese Umsetzung hier erkläre.

Mithilfe dieser Umsetzung lassen sich Elemente derart platzieren, dass sie jedem Besucher des Forums an genau derselben Position auf einem anderen Element angezeigt werden - unabhängig von der jeweiligen Auflösung, der Rahmenbreite oder anderen Faktoren.
Dadurch lässt sich z.B. eine Grafik pixelgenau im Kopfbereich des Forums platzieren, wie es hier gerade bei unserem Banner zu sehen ist:


Dort wurde folgende Grafik mithilfe dieser Methode exakt an einer festen Position auf dem Banner platziert:


Was ist besonders an dieser Methode?
Elemente, die über CSS in einem absoluten Seitenverhältnis platziert werden, werden häufig mit festen Pixelwerten versehen. Dabei ist das Ergebnis aber je nach Auflösung für alle Besucher unterschiedlich:

Hier wurde ein Abstand von 450px zum linken Seitenand gewählt, das Ergebnis wäre für eine genaue Platzierung im Verhältnis zum Banner unmöglich.
Wird ein variabler Pixelwert angegeben, der z.B. einen Abstand von 20% zum linken Seitenrand erzeugt, würde das Ergebnis zu ähnlichen Abweichungen führen. Auch dieser Weg wäre im aktuellen Fall nicht zielführend.

Wir sehen also: Möchten wir ein Element direkt auf einem anderen an einer ganz bestimmten Stelle platzieren, dann müssen wir einen geeigneteren Weg finden, um die Platzierung im richtigen Verhältnis dazu festzulegen.


Die Umsetzung
Diese Umsetzung verbindet beide Wege miteinander. Zuerst wird die Grafik exakt in der Seitenmitte positioniert, indem mit einem Abstand von 50% gearbeitet wird. Das führt bei allen Besuchern zum selben Ergebnis: Die Grafik befindet sich genau in der Seitenmitte über dem Banner.

Möchten wir sie etwas weiter links/rechts davon anzeigen lassen, dann beziehen wir uns dazu mit einem festen Pixelwert auf die Seitenmitte.
Da dabei von der Seitenmitte als Bezugspunkt ausgegangen wird, entsteht bei allen Besuchern erneut die exakt selbe Anzeige!
Sieh dir dieses Bild bitte genau an und versuche, den Vorgang nachzuvollziehen:

1. Die Grafik wird in der Seitenmitte platziert (50% Abstand)
   
2. Von dort aus wird ein negativer Abstand gesetzt, um sie weiter links zu positionieren (-400px Abstand von Seitenmitte)

Der Code

• Platzierung links der Mitte:
  

  <div style="position: absolute; top: 40px; left: 50%; margin-left: -400px; z-index: 100;">
  <img src="BILDADRESSE">
  </div>

  Du passt den Code folgendermaßen an:
  Abstand vom oberen Seitenrand (Pixel)
  Abstand von der Seitenmitte aus nach links (negativer Pixelwert) - am besten durch manuelles Probieren anpassen
  Bildadresse jener Grafik, die du positionieren möchtest
  
  
  
• Platzierung rechts der Mitte:
  

  <div style="position: absolute; top: 40px; right: 50%; margin-right: -400px; z-index: 100;">
  <img src="BILDADRESSE">
  </div>

  Du passt den Code folgendermaßen an:
  Abstand vom oberen Seitenrand (Pixel)
  Abstand von der Seitenmitte aus nach rechts (negativer Pixelwert) - am besten durch manuelles Probieren anpassen
  Bildadresse jener Grafik, die du positionieren möchtest

Ein fertig angepasster Code sieht z.B. so aus:

Code:

<div style="position: absolute; top: 50px; left: 50%; margin-left: -300px; z-index: 100;">
<img src="http://2img.net/i/bl/logo.png">
</div>

Um das beste Ergebnis zu erhalten, muss das Logo in jedem Fall zentriert werden:
AB -> Anzeige -> Startseite -> Kopfteil und Navigation
Position des Logos: Zentriert


Einsetzen des Codes ins Forum
1) Indexmodul
Am einfachsten ist es, diesen Code in ein persönliches Indexmodul einzusetzen. Wie du Indexmodule aktivierst und erstellst, findest du in unserer Lexi Help unter M bei "Module auf der Startseite einfügen" heraus.
Wichtig ist, dass du dabei folgende Einstellung wählst:

Achte außerdem darauf, dass währenddessen der Button über dem Eingabefenster zu sehen ist.
Sollte :nohtml: angezeigt werden, wechsle durch einen Klick darauf in den richtigen Eingabemodus.

Dieses persönliche Indexmodul kannst du nun ganz unten in der Modulspalte platzieren. Mit diesen Einstellungen wird das Modul selbst nicht sichtbar sein.

2) Templates (phpBB2/PunBB)
Unter BB2 und PunBB lässt sich der Code auch über die Templates einsetzen, falls du keine Indexmodule verwenden möchtest.

• phpBB2:
  Dazu gehst du in die Templates zu
  AB -> Anzeige -> Templates -> Allgemeines -> overall_header
  und suchst dort folgende Stelle (unverändertes Template: Zeilen 261-263):
  

  Code:

  <!-- END switch_logo_right -->
</tr>
</table>

  An folgender Stelle fügst du den Code ein:
  

  <!-- END switch_logo_right -->
  Hier Code einsetzen
  </tr>
  </table>

  Danach sendest du das veränderte Template ab und veröffentlichst es über einen Klick auf .
  
  
• punBB:
  Dazu gehst du in die Templates zu
  AB -> Anzeige -> Templates -> Allgemeines -> overall_header
  und suchst dort folgende Stelle (unverändertes Template: Zeilen 243-245):
  

  Code:

  <!-- END switch_desc -->
</div>
<div id="pun-head">

  An folgender Stelle fügst du den Code ein:
  

  <!-- END switch_desc -->
  Hier Code einsetzen
  </div>
  <div id="pun-head">

  Danach sendest du das veränderte Template ab und veröffentlichst es über einen Klick auf .

Viel Erfolg bei der Umsetzung!

Liebe Grüße
Günther