Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

[Tutorial] Bild direkt auf dem Banner einsetzen

2 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [Tutorial] Bild direkt auf dem Banner einsetzen

Beitrag von ID-Club Mo 19 Nov 2012 - 20:46

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 Very Happy
Ich will es wissen
ID-Club
ID-Club
Meister
Meister

Männlich Beiträge : 290
Anmeldedatum : 08.10.12
keine
phpBB2

Nach oben Nach unten

Erledigt Re: [Tutorial] Bild direkt auf dem Banner einsetzen

Beitrag von Günther Di 20 Nov 2012 - 17:39

Hallo,

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

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:
[Tutorial] Bild direkt auf dem Banner einsetzen Tuto_s12

Dort wurde folgende Grafik mithilfe dieser Methode exakt an einer festen Position auf dem Banner platziert:
[Tutorial] Bild direkt auf dem Banner einsetzen Sabber11

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:
[Tutorial] Bild direkt auf dem Banner einsetzen Tuto_s14
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. Idea


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! cheers
Sieh dir dieses Bild bitte genau an und versuche, den Vorgang nachzuvollziehen:
[Tutorial] Bild direkt auf dem Banner einsetzen Tuto_s16

  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:
[Tutorial] Bild direkt auf dem Banner einsetzen Tuto_s17
Achte außerdem darauf, dass währenddessen der Button HTML-EDIT ü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 plus.

  • 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 plus.


Viel Erfolg bei der Umsetzung! Very Happy

Liebe Grüße
Günther
Günther
Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten