Liebes Forum, ich verzweifle gerade an einer scheinbar einfachen Aufgabe. In unserem Footer würde ich gerne auf der rechten Seite drei Social Media Icons nebeneinander einfügen. Leider werden sie mir zu groß und auch mit zu großem Abstand zueinander angezeigt. Wenn ich den Icons eine Größe zuweise, vergrößert sich der Abstand. Was mache ich falsch? HTML: <div class="row space-1"> <div class="col-xs-4 col-sm-4"> <a href="https://www.instagram.com/herzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/insta.png" style="float: left; " /> </a> </div> <div class="col-xs-4 col-sm-4"> <a href="https://www.facebook.com/dasherzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/facebook.png" style="float: left; " /> </a> </div> <div class="col-xs-4 col-sm-4"> <a href="https://www.pinterest.de/herzensprojektmanufaktur/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/pinterest.png" style="float: left; " /> </a> </div> </div> </div>
Du sagst mit Deinem Code 1/3 des Platzes für Bild 1, 1/3 für Bild 2... Schau mal in den Gambio-Testshop 1: (Link nur für registrierte Nutzer sichtbar.) da hast Du in der 4. Footerspalte wie man das besser schreiben kann.
Meinst du diesen Code?: Code: <ul class="social-media-icons"> <li><a class="facebook" href="#"><i class="fa fa-facebook-f"></i></a></li> <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li> <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li> <li><a class="youtube" href="#"><i class="fa fa-youtube"></i></a></li> <li><a class="googleplus" href="#"><i class="fa fa-google-plus"></i></a></li> </ul> Wenn ich das so kopiere, wird mir gar nichts angezeigt. Wir haben den Footer komplett in einem Inhalt, nicht nach Spalten unterteilt wie im Demo Shop. Das wurde von Netdexx mal so für uns angelegt.
Kann es sein, dass in der 3.6 FontAwesome noch nicht integriert ist? Versuche es mal so: Code: <ul class=social-media-icons"> <li> <a href="https://www.instagram.com/herzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/insta.png" style="float: left; " /> </a></li> .... </ul>
Danke für die Hilfe - mir ist es wirklich schon unangenehm, aber es funktioniert noch immer nicht.... Code: <ul class=social-media-icons"> <li> <a href="https://www.instagram.com/herzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/insta.png" style="float: left; " /> </a></li> <li> <a href="https://www.facebook.com/dasherzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/facebook.png" style="float: left; " /> </a></li> <li> <a href="https://www.pinterest.de/herzensprojektmanufaktur/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/pinterest.png" style="float: left; " /> </a></li> </ul> Nach wie vor wird nichts angezeigt und der Footer sieht abgehackt aus.
Erhöhe einmal die footerhöhe von 200px auf 260px und ändere den Code in: Code: <ul class="social-media-icons" style="list-style: none;"> <li> <a href="https://www.instagram.com/herzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/insta.png" style="float: left; "> </a></li> .... </ul> und beim mittleren Icon kannst Du mit "margin-left: 10px; margin-right: 10px;" den Abstand zwischen den Icons einstellen (die Werte musst Du testen)
Danke nochmals, aber es ist weiterhin nichts zu sehen... ich bin echt ratlos.. Code: <ul class="social-media-icons" style="list-style: none;"> <li><a href="https://www.instagram.com/herzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/insta.png" style="float: left; " /> </a></li> <li><a href="https://www.facebook.com/dasherzensprojekt/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/facebook.png" style="float: left; " /> </a></li> <li><a href="https://www.pinterest.de/herzensprojektmanufaktur/" target="_blank"><img class="img-responsive" src="https://www.herzensprojekt.de/templates/Honeygrid/img/pinterest.png" style="float: left; " /> </a></li> </ul> https://www.herzensprojekt.de
Hast Du das hier: Code: #footer .social-media-icons { position: absolute; list-style: none; padding: 0; margin: 0; top: -50px; } ins eigene css gepackt? Das verschiebt Deine Icons über den Header. Nimm das top: -50px; da einmal raus, dann rutschen die Icons nach unten. Und ohne das position: absolute; sind sie unter dem DHL-Icon
Ich wüsste nicht, dass wir diesen Code im eigenen css verwenden. Habe ihn gerade nirgendwo gefunden. Die Icons sind nach wie vor verschwunden, es ist zum verzweifeln :/
Vielleicht hat Netdexx das eingetragen. Dann ist es vermutlich unter templates/Honeygrid/usermod/css/ Nachtrag: alternativ könntest Du auch die classe ändern, <ul class="social-media-icons=.... in <ul class="social-m-icons" z. B.
Genial! Das hat funktioniert! Vielen Dank! Kann ich die drei Icons nun noch nach rechts rücken, also an direkt unter "Newsletter", so dass sie nicht mittig unter den Links stehen? Danke für die Hilfe!
Code: <ul class="social-m-icons" style="list-style: none; padding-left: 0px;"> <li>....</li> </ul> das müsste gehen
Hallo zusammen, ich versuche nun seit Tagen rauszubekommen warum bei mir das Facebook und Instagram Symbol Oval anstatt rund angezeigt wird. Leider komme ich der Lösung nicht einmal nahe und habe auch schon hier im Forum lange gesucht ohne Erfolg. Da es sich in den Postings zuvor um ein ähnliches Problem handelte, dachte ich mal ich versuche hier mein Glück und hoffe ihr könnt mir helfen. Vom aussehen her, wollte ich es so haben wie im Testshop 3 unter Folge uns auf... . Bin für jede Hilfe sehr dankbar Eingefügt im Footer 4 habe ich <ul class="social-media-icons" style="margin-bottom: 15px"> <li><a href="#" class="facebook"><i class="fa fa-facebook-f"></i></a></li> <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li> <li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li> <li><a href="#" class="googleplus"><i class="fa fa-google-plus"></i></a></li> </ul> CSS habe ich nur für meine Mouseoverbilder geschrieben und diesem CSS auch einen Namen gegeben, so dass sie nur für die Mouseoverbilder gelten. mein Shop ist unter www.shareonaut.de erreichbar. Vielen Dank für die Hilfe
@christian_muller_1 Ich glaube vor nicht allzu langer Zeit etwas ähnliches gelesen zu haben. @Wilken (Gambio) hatte da irgendeinen Tipp wegen den eierförmigen Dingern. Irgendwo muss das was mit 1 oder -1 geändert werden. Ich kann mich aber auch irren.
Das war ein Fall von mir, weiß aber nicht, ob die Lösung hier auch passt: (Link nur für registrierte Nutzer sichtbar.)