Twenty Eleven: Bild links neben Überschrift

  • Twenty Eleven: Bild links neben Überschrift + Überschrift verschieben

    Moin zusammen,

    wie man - grundsätzlich - ein Bild dort einfügt, ist ja hier schon beschrieben:
    http://forum.wordpress-deutschland.org/design/90184-b…entyeleven.html

    Ich möchte dort exakt am linken Bildrand eine quadratische Grafik einfügen und würde gern wissen, mit welchem "Befehl" die style.css entsprechend verändert werden kann ("linksbündig anordnen"), statt dem untenstehenden Beispiel aus dem vorangehenden Link zu folgen und die Position auf der x-Achse über die entsprechende Veränderung der "200px" anzupassen:

    PHP
    #branding hgroup {
    margin: 0 7.6%;
    /* hintergrundbild laden*/
    background: url("beispielpfad-für-logo/grafik.gif") no-repeat scroll 200px 0 transparent;
    /* header höher machen damit das passt*/
    padding-bottom:40px;
    }



    Weiterhin müssten die Überschrift und die Sub-Überschrift ziemlich sicher "etwas" nach rechts verschoben werden. An welchen Stellen kann die Position der Übershrift/Sub-Überschrift angepasst werden?

    Dank + Gruß

    kipperthedog | testblog derzeit nicht aktiv

    Einmal editiert, zuletzt von kipperthedog (16. August 2011 um 10:46)

    • 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 zusammen,

    ich habe hier noch einmal versucht, mein Problem zu lösen. Die Grafik ist in den Header eingefügt, die style.css sieht an der Stelle jetzt so aus:

    Code
    #branding hgroup {
            margin: 0 7.6%;
            /* hintergrundbild laden*/
             background: url(images/bg_anim.gif) no-repeat scroll 0px 0 transparent;
             /* header höher machen damit das passt*/
             padding-bottom:40px;
            }

    Allerdings lässt sich die Grafik nicht ganz bis an den linken Rand "verschieben" - sie ist bündig mit dem Blog-Titel, aber nach links verbleibt ein Rest von "gefühlten" 50px ...

    Und der Header ist zwischen dem oberen Rand und der Menüzeile noch zu hoch - wo kann man die Höhe verringern?

    Bitte um kurze Hilfe zur Selbsthilfe ...

    Freundliche Grüße

    kipperthedog | testblog derzeit nicht aktiv

  • Moin,

    Wäre es möglich nen Link zum Blog zu posten, damit man sich das mal live ansehen kann?

    ... den/das Blog findest Du hier:

    Die Position des Blog-Titels und des Slogans müsste man doch hier in der style.css verändern können - oder ist dazu noch die Änderung einer weiteren Datei (functions?) nötig? Wird die Höhe dieses Teils des Headers hier auch "irgendwo" eingestellt?

    Code
    #site-description {
            color: #7a7a7a;
            font-size: 14px;
            margin: 0 270px 3.65625em 0;
    }

    Gruß - und danke für's Ansehen

    kipperthedog | testblog derzeit nicht aktiv

    Einmal editiert, zuletzt von kipperthedog (17. August 2011 um 20:00)

  • Wenn Du das margin bei

    Code
    #branding hgroup {
        background: url("http://forum.wordpress-deutschland.org/images/bg_anim.gif") no-repeat scroll 0 0 transparent;
        margin: 0 7.6%;
        padding-bottom: 40px;
    }

    auf 0 setzt, dann rückt das Ganze nach links.

    Dann das margin bei

    Code
    #site-description {
        color: #7A7A7A;
        font-size: 14px;
        margin: 0 0 0 200px;
    }

    auf 200px setzen und das margin-right bei

    Code
    #site-title {
        margin-right: 270px;
        padding: 3.65625em 0 0;
    }

    entfernen. Die Werte kannst Du natürlich nach Deinen Wünschen anpassen.

  • Moin,

    hier ist im nachhinein noch eine gestalterische Frage aufgetaucht:

    Zwischen der im Header eingefügten Grafik und der Menüzeile befindet sich noch ein zeilenartiger, weißer Zwischenraum (geschätzt 4px), der sich doch als störend erweist und den ich gern noch entfernt hätte - nur wo?

    Ist das ein Bereich, der zum Wrapper gehört?

    Oder wo kann man diesen Zwischenraum konfigurieren?

    Hier noch einmal der Link zum Blog:

    Gruß+Dank

    kipperthedog | testblog derzeit nicht aktiv

    Einmal editiert, zuletzt von kipperthedog (22. August 2011 um 10:24)

  • Suche in der style.css nach

    Code
    #branding hgroup {
        background: url("images/bg_anim.gif") no-repeat scroll 0 0 transparent;
        [COLOR="RoyalBlue"]height: 150px;[/COLOR]
        margin: 0;
        [COLOR="Red"]padding-bottom: 40px;[/COLOR]
    }

    entferne die rote Zeile und ergänze die blaue.

  • Suche in der style.css nach

    Code
    #branding hgroup {
        background: url("images/bg_anim.gif") no-repeat scroll 0 0 transparent;
        [COLOR=RoyalBlue]height: 150px;[/COLOR]
        margin: 0;
        [COLOR=Red]padding-bottom: 40px;[/COLOR]
    }

    entferne die rote Zeile und ergänze die blaue.

    ... passt jetzt perfekt - vielen Dank für die schnelle Hilfe ... :grin:

    kipperthedog | testblog derzeit nicht aktiv

Jetzt mitmachen!

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