1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 4.7 Logo im Header positionieren

Dieses Thema im Forum "Design" wurde erstellt von maksimilian, 6. Februar 2017.

  1. maksimilian

    maksimilian Well-Known Member

    Registriert seit:
    3. Februar 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Hallo Ihr,

    ich(Anfänger) baue mir auf Basis des Themes Vantage eine einfache Homepage. Mit folgendem Eintrag in style.css

    #masthead {
    background-image: url('/wordpress/wp-content/uploads/2017/02/<dateiname>.jpg');
    // background-position: right;
    // background-repeat: no-repeat;
    }

    positioniere ich ein Logo neben dem Theme-Titel. Das erscheint mittig, ich möchte es aber rechtsbündig anordnen. Mein Versuch mit einer Property background-position scheitert. Wie muss ich es richtig anstellen ?

    maksimilian
     
  2. flipps

    flipps Well-Known Member

    Registriert seit:
    19. April 2010
    Beiträge:
    1.114
    Zustimmungen:
    0
    Hallo,

    ein Link zu deiner Seite würde sehr viel weiterhelfen!

    Eventuell könnte es mit dem css Befehl float: right; funktionieren.

    Aber wie gesagt, ein Link zu deiner Seite wäre klasse. ;)

    VG
    Philip
     
  3. rantanplan2000

    rantanplan2000 Well-Known Member

    Registriert seit:
    11. September 2016
    Beiträge:
    167
    Zustimmungen:
    0
    Ich gehe davon aus, dass dein Logo kein Hintergrundbild ist, daher wird es auch nicht funktionieren.
    Wie schon gesagt, könnte float helfen. sonst schau dir mal breite und den margin des containers an, in dem das bild steht.
     
  4. maksimilian

    maksimilian Well-Known Member

    Registriert seit:
    3. Februar 2015
    Beiträge:
    114
    Zustimmungen:
    0
    @flipps
    Danke für Deine schnelle Reaktion! Als Neuling zögere ich noch, einen Link zu veröffentlichen, da die Homepage momentan vertrauliche Infos enthält.
    Wenn Du mit float folgende Anwendung meinst
    #masthead {
    background-image: url('/wordpress/wp-content/uploads/2017/02/<dateiname>.jpg');
    float: right;
    }
    dann wirkt das auf den ganzen Header, also nicht nur das Logo rutsch nach rechts.
    Inzwischen habe ich eine Lösung ohne css gefunden. Mit dem Plugin SiteOrigin Image lässt sich ein Image im Header (oder Footer) unterbringen. Aber trotzdem würde mich interessieren, wie eine css Lösung aussehen würde.

    @ratanplan2000
    Mit Logo meine ich einfach eine jpg-Datei. Wodurch erhält sie die Eigenschaft "Hintergrundbild" ? Und: wie schaue ich mir "breite und den margin des containers" an ? Welches containers ? Wie bereits erwähnt, ich bin newbi.

    maksimilian
     
  5. rantanplan2000

    rantanplan2000 Well-Known Member

    Registriert seit:
    11. September 2016
    Beiträge:
    167
    Zustimmungen:
    0
    jpg ist ja nur ein bildformat. du kannst es als hintergrund (tapete an der wand) oder eben direkt (bild auf der wand) einbinden. die eigenschaft hintergrund erhält es durch css.

    Ich habe dir ein Beispiel gemacht. geh mal mit der maus über das bild, dann siehst du es deutlicher.

    https://jsfiddle.net/rantanplan2000/xgfcrq1d/2/

    Der Adler ist ein "normales" Bild und der Rest ist ein Hintergrundbild.

    p.s. bitte lad nicht für jeden "misst" (sorry) ein plugin. wenn du so anfängst, wirst kein freund mit google.
     
    #5 rantanplan2000, 8. Februar 2017
    Zuletzt bearbeitet: 8. Februar 2017
  6. AmFearLiath

    AmFearLiath Well-Known Member

    Registriert seit:
    12. August 2012
    Beiträge:
    731
    Zustimmungen:
    0
    genauer erklärt wäre es wohl so:

    Ein "Bild" ist ein Element im HTML Gerüst welches durch ein <img src="http://forum.wpde.org/bild.jpg" /> eingebunden wird
    Ein "Hintergrundbild" ist durch CSS einem Element wie eine Farbe als Hintergrund zugewiesen.
     
  7. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.732
    Zustimmungen:
    0
    1) Wenn Du Anfänger bist... Warum verwendest Du nicht einfach das Theme Vantage und passt es Deinen Bedürfnissen an?

    2) Was ist für Dich ein rechtsbündiges Logo? Ein Logo auf der rechten Seite?

    Beim Theme Vantage könntest Du das Logo mit folgendem Eintrag im Customizer unter "Zusätzliches CSS" von der linken auf die rechte Seite verschieben:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  8. rantanplan2000

    rantanplan2000 Well-Known Member

    Registriert seit:
    11. September 2016
    Beiträge:
    167
    Zustimmungen:
    0
    das sieht man doch im beispielcode ... wenn er das nicht raussieht, wird ihm html und css auch nichts sagen :D
     
  9. maksimilian

    maksimilian Well-Known Member

    Registriert seit:
    3. Februar 2015
    Beiträge:
    114
    Zustimmungen:
    0
    @rantanplan2000 #5
    Danke für den Aufwand, den Du treibst, um mir den Unterschied zwischen dem Hintergrundbild eines Objekts und einem Bild in diesem Objekt (mit Hover Effekt) zu erklären.
    Zum Plugin-Mist: Ich nehme mal an, dass ein Anfänger erst einmal zu einem Plugin greift (sofern er überhaupt ein passendes findet) als sich auf den (zunächst mühseligeren) Weg zu begeben, mit CSS zu arbeiten. Wobei letzteres für mich auch das Sinnvollere ist.
    Der Eigner des Themes Vantage empfiehlt die Installation des Plugins SiteOrigin Widget Bundle, welches das Widget Image beinhaltet. Nur so bin ich da drauf gekommen.

    @AmFearLiath
    Sehr schön erklärt.
     
  10. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.732
    Zustimmungen:
    0
    Plugin hin oder her... Was ist mit CSS mühselig, wenn drei Zeilen das machen, was Du willst? Könnte es sein, dass Du vor lauter Bäumen den Wald nicht mehr siehst? :twisted:
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden