Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind, loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Lexi Help
Schnelle
Hilfe
Klicke Hier
www.forumieren.de

[Tutorial] Bild direkt auf dem Banner einsetzen

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [Tutorial] Bild direkt auf dem Banner einsetzen

Beitrag von ID-Club am 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
avatar
ID-Club
Stammgast
Stammgast

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

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von Günther am 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:


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. 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:


  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://illiweb.com/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 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
avatar
Günther
Admin a.D.
Admin a.D.

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

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


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