Logo und Text vertikal zentriert (Footer)

Hallo zusammen,

ich versuche Logo (32x32px) und Text in einer Zeile im Footer links zu zentrieren. Dazu nutze ich:

 Text

Doch leider wird der Text immer in die nächste Zeile umgebrochen. Im HTML editor wird er außerdem nicht mittig zum Logo platziert. D.h. ich würde gerne die die Mitte des Textes direkt neben der Höhe des Logos haben. Da ich mit CSS/LESS kaum Erfahrungen habe, wollte ich fragen, ob Ihr mir einen Tipp geben könnt wieso der obere Code nicht das macht was er soll :smiley: Eine andere Möglichkeit wäre glaube ich eine Tabelle ohne Rahmen, aber das ist in der heutigen Zeit Unsinn, oder?

Hallo andrew,

gibt es einen Link wo man sich das anschauen kann?

Generell gilt, dass vertikale Zentrierung mit v-align über CSS gemacht werden sollte. Geht aber nur in Verindung mit einer Tabelle.

Ohne Tabelle und CSS only kannst du es auch so probieren: JS Bin - Collaborative JavaScript Debugging

Gruß

Hallo 8mylez,

leider ist die Seite noch im Aufbau, daher hier ein Screenshot:

https://abload.de/img/unbenannttobmx.png

Nun habe ich die Bilder in einer Tabelle platziert, aber das ist auch nicht so der Knaller.

Vielen Dank für den Link! Aber wie kann ich herausfinden, in welcher CSS/LESS Datei ich den Code einfügen muss und wie weiß Shopware später, welche der Spalten im Footer betroffen sind? Ich bin wirklich verzweifelt, weil ich nicht gedacht hätte, dass in Shopware beim template Design 99% über Code läuft und nicht direkt über das Backend eingestellt werden kann. Zwar gibt es Plugins die genau diese Funktionen erweitern, aber die meisten sind leider (viel zu) kostenpflichtig :-( 

Ich würde es einfach mit Flexbox machen.

Allerdings sehe ich jetzt auf den Screen nicht genau was du genau wo anpassen möchtest?

Mit Pfeilen wäre es ganz hilfreich :slight_smile:

Sorry, mein Fehler: habe vergessen die Tabelle zu entfernen :-)

Was ich gern häte ist es Logos (und Text) nebeneinander anordnen zu können.

Einmal (1) im Bereich Zahlungs- und Versandmethoden. Dort stehen die Logos alle untereinander, obwohl ich probiert habe sie mit align=middle nebeneinander zu bekommen. Zumindest jeweils 2 Logos, dann in der Zeile danach wieder 2 usw. Es sieht jedoch so aus:

Und dann (2) eben im Bereich des “normalen” Footers außerhalb vom Checkout, also z.B. auf der Startseite. Da möchte ich einmal ein kleines Whatsapp-Logo und daneben die entsprechende Nummer. Das Gleiche mit einem Telefon-Logo, einem kleinen Briefumschlag für E-Mail usw. 

Dass der HTML Code bei den Textbausteinen hinterlegt wird, verstehe ich. Aber wo genau kommt dann der CSS Code bei den jeweiligen Spalten in den verschiedenen Footern rein?

Hallo Andrew,

wie @kayyy in seinem Beispiel zeigt ist Flexbox sicher interessant für das Problem. Ein guter Anfang um Flexbox zu verstehen: A Complete Guide to Flexbox | CSS-Tricks

Den CSS / LESS Code findest du beim Footer z.B. in der _modules/footer.less

In deinem eigenen Theme kannst du dir dann die entsprechenden Datenen anlegen. Vielleicht hilft dir ein Beitrag mit ähnlichen Anpassungen: http://8mylez.com/blog/social-media-footer/

Viel Erfolg!

Mit viel Schweiß und Tränen habe ich es nun einigermaßen hinbekommen. Dank @kayyy und dank @8mylez und dem Hinweis für das Social Media icon Tutorial. Im Prinzip habe ich die Änderungen in der footer-navigation.tpl und nicht in footer.less angepasst. War das falsch?

Nun habe ich die Icons nach dem selben Schema für den Versand und die Bezahlung bearbeitet. Das war in der /frontend/checkout/table_footer.tpl. Oder habe ich damit mehr Schaden angerichtet?