gelöst Startseite - mehrere Bilder nebeneinander

Thema wurde von Anonymous, 22. Juni 2018 erstellt.

  1. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    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>
     

    Anhänge:

  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  3. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    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.
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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>
     
  5. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    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.
     

    Anhänge:

  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    doch, die sind da, aber in dem hellen Bereich unter dem Footer....
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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)
     
  8. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    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
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
     
  10. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    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 :/


     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  12. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    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!
     

    Anhänge:

  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Code:
    <ul class="social-m-icons" style="list-style: none; padding-left: 0px;">
            <li>....</li>
        </ul>
    das müsste gehen
     
  14. hp1

    hp1 Erfahrener Benutzer

    Registriert seit:
    19. September 2017
    Beiträge:
    69
    Danke erhalten:
    4
    Danke vergeben:
    37
    Vielen Vielen Dank!
     
  15. christian_muller_1

    Registriert seit:
    6. Januar 2019
    Beiträge:
    7
    Danke erhalten:
    0
    Danke vergeben:
    6
    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 :)
     
  16. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    @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.
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Mai 2017
    Beiträge:
    684
    Danke erhalten:
    125
    Danke vergeben:
    176
    Das war ein Fall von mir, weiß aber nicht, ob die Lösung hier auch passt:
    (Link nur für registrierte Nutzer sichtbar.)
     
  18. christian_muller_1

    Registriert seit:
    6. Januar 2019
    Beiträge:
    7
    Danke erhalten:
    0
    Danke vergeben:
    6
    Vielen Dank, dies hat das Problem mit dem Ei gelöst :)