Logo im Header positionieren

    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

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    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

    Zitat von maksimilian

    Hallo Ihr,
    Mein Versuch mit einer Property background-position scheitert. Wie muss ich es richtig anstellen ?
    maksimilian

    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.

    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

    Zitat von maksimilian


    @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

    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.

    [size=14]https://jsfiddle.net/rantanplan2000/xgfcrq1d/2/[/SIZE]

    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.

    Einmal editiert, zuletzt von rantanplan2000 (8. Februar 2017 um 00:12)

    Zitat von rantanplan2000

    [COLOR=#333333]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.[/COLOR]


    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.

    Zitat von maksimilian


    ich(Anfänger) baue mir auf Basis des Themes Vantage eine einfache Homepage.

    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
    #masthead .hgroup .logo {
   float: right;
}

    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.

    Zitat von maksimilian


    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.

    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:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden