HELP: Überschriften verändern / Social Media Icons verschieben

Farinana

Hallo Zusammen!

Nachdem ich nun das halbe Internet abgegrast habe und noch immer nicht klar komme, brauch ich mal eure Hilfe.
Es handelt sich um diese Website:
http://life-unsettled.com/
Theme: Corpobox-lite

Ich möchte auf meinem Blog die Social Icons in der Menü-Navigation gerne nach rechts verschieben. Mit "Float" klappt es aber leider nicht und alles andere klappt auch nicht. Ich verzweifle.

In der Sidebar würde ich gerne die Überschriften mit einem im Hintergrund liegenden Strich versehen.:(
Hier wurde ich tatsächlich fündig und habe folgenden Code in der Style-CSS an der passenden Stelle platziert:

background-image: url('http://life-unsettled.com/wp-content/upl…015/10/line.jpg');
background-repeat: x-repeat;
background-position: 0px -10px;
background-color: #F9F8F7;
padding-right: 5px;
padding-left: 5px;

Jetzt die jeweilige Überschrift natürlich durchgestrichen.
Habt ihr eine gute Alternative parat?

Vielen Dank im Voraus!

Werbepost

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

SirEctor

Zum ersten Problem habe ich eine schnelle Lösung, die aber sicherlich nicht wirklich die Beste ist. Es ist auch nicht wirklich dynamisch, aber du sieht schon mal, wie man Objekte positionieren kann:

Code

ul#menu-life-unsettled-com {
    position: relative;
    width: 100%;
}
li#menu-item-112 {
    position: absolute;
    top: 0;
    right: 140px;
}
li#menu-item-116 {
    position: absolute;
    top: 0;
    right: 70px;
}
li#menu-item-117 {
    position: absolute;
    top: 0;
    right: 0;
}

Alles anzeigen

Björn von hostly.de

Hi! Probier's doch bei den Überschriften mal mit "opacity", was den Strich angeht: http://www.w3schools.com/css/css_image_transparency.asp .

SirEctor

opacity auf ein Background-Image funktioniert nicht. Und die opacity auf den ganzen Div anwenden, macht auch den Text darin transparent. Ich denke die TE will links und rechts vom Titel den Strich, aber nicht dahinter. Dazu fällt mir per reines CSS nichts ein. Man müsste dem Titel komplett ändern.

Björn von hostly.de

Yep, SirEctor liegt richtig. Opacity also eine falsche Fährte ... sorry.

Farinana

Vielen Dank! Es sieht schon einmal wesentlich besser aus als vorher.
Aber leider sitze die Icons jetzt sehr seltsam.

Mit Margin und Padding komme ich hier wieder nicht weiter. Hast du noch eine Idee?

SirEctor

Versuch mal das:

Code

.main-navigation li.social-icons a {
    padding-top: 19px;
}

und um die Icons responsive auszublenden, würde ich das noch versuchen

Code

@media all and (max-width: 959px){
.main-navigation li.social-icons {
    display:none;
}
}

Farinana

Super! Hat geklappt! Dankeschön!

Bleibt nur noch die Frage mit den Sidebar Überschriften.

SirEctor

Mach aus padding-top lieber nur padding. Ich sehe das sonst der hover nicht passt. Zur Sidebar habe ich keine einfach Lösung zur Hand. Du könntest höchstens die Linie im Bild selber etwas heller machen. Und mach den Hintergrund transparent anstatt weiß.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

HELP: Überschriften verändern / Social Media Icons verschieben

Jetzt mitmachen!