Bilder im Content Manager *Index* nebeneinander platzieren aber Wie?

Thema wurde von andrea_oezlue, 18. Januar 2017 erstellt.

  1. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Hallo,

    Ich will sehr gerne die Bilder im CM im Bereich Index Nebeneinander platzieren.
    Allerdings gelingt es leider wieder mal nicht, wie man es gerne hätte.
    Mein Ziel ist es ungefähr wie folgt aussehen zu lassen.

    Unbenannt-123.jpg .

    Obwohl im CM Index z.Zt. so ausschaut, werden die Bilder untereinander angezeigt.

    upload_2017-1-18_1-40-49.png

    Danke wieder mal für die Unterstützung.







    B-A-R-B-A-R-A vielleicht?
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das liegt am rel-responsive, das möchte gerne die ganze breite für sich :)
    Du müsstest eine Art Verschachtelung bauen.
    ich kann mir das später (wnn ihc dieder wach bin) mal genauer ansehen
     
  3. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Ich wäre dir sehr sehr Dankbar.
    Lieben Dank und schlaf schön.
    Träum etwas :)
     
  4. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Hat jemand vielleicht eine Idee, wie man die Bilder nebeneinander Platzieren kann?
     
  5. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    möchtest Du die Bilder verlinken, oder nur anzeigen?
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Hier mal der Quelltext ohne Link:

    HTML:
    /*erste Zeile*/
    <div class="row">
    <div class="col-xs-12 col-sm-4"><img alt="" class="rel-responsive" src="Pfad zum Bild" /><br />
    <img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    
    <div class="col-xs-12 col-sm-4"><img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    
    <div class="col-xs-12 col-sm-4"><img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    </div>
    /*zweite Zeile*/
    <div class="row">
    <div class="col-xs-12 col-sm-3"><img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    
    <div class="col-xs-12 col-sm-3"><img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    
    <div class="col-xs-12 col-sm-3"><img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    
    <div class="col-xs-12 col-sm-3"><img alt="" class="rel-responsive" src="Pfad zum Bild" /></div>
    </div>
    
    Ich gehe davon aus, dass Die Bilder gleich breit sind. Gegebenenfalls müssen die col-Werte angepasst werden.
     
  7. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    verlinken
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    dann ändere das
    <img alt="" class="rel-responsive" src="Pfad zum Bild" />
    in
    HTML:
    <a href="/Link-Pfad/"><img class="img-responsive" src="Pfad zum bild.jpg" /></a>
     
  9. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Okay Chefin....;o)
     
  10. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Lieben Dank.

    -------->
    Bzgl. Col-Werte:
    Wenn ich hier an den beiden Col-Werten etwas verändere....bsp. den 12 auf 120
    Dann wird das Bild nicht Breiter o.ä.
    Unbenannt1111.png .

    -------->
    Bzgl. Bild (Bilder) nach links verschieben.
    Ich habe einfach mal mit dem Befehl


    <p style="
    margin-left: -15px;
    "><img alt="" class="img-responsive" src="images/Farbe1.jpg" style="float: left;"></p>

    Herumgepspielt.
    Leider kein Erfolg zu sehen....bzw. nicht das, was man gerne sehen will.
     
  11. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.094
    Danke erhalten:
    1.616
    Danke vergeben:
    1.214
    es gibt bei Bootstrap nur max. 12 Col's
     
  12. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    auch wenn ich den Wert nur auf 1 oder 2 ändere.....keine Veränderungen zu sehen
     
  13. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.094
    Danke erhalten:
    1.616
    Danke vergeben:
    1.214
    schau mal hier:
    (Link nur für registrierte Nutzer sichtbar.)

    etwas weiter unten werden die Cols etc. erklärt.
     
  14. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Danke marmoles.
    Ich werde es mal ausprobieren.
     
  15. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Ich komme leider nicht weiter bzgl. Grid (Fluit) System
    Wer kann mir vielleicht hier wieder mal helfen.
    98.png .
    Ich habe soeben einige Tutorial über Bootstrap und die Seite http://holdirbootstrap.de/css/#grid angeschaut.
    Hab auch einiges ausprobiert.
    Allerdings ohne Erfolg.
    Ich bekomme die Dinge einfach nicht zusammen und das eine oder andere Feld höher.
    Ich wäre sogar bereit, hier für was zu zahlen.

    Ich wäre wieder mal sehr dankbar.
     
  16. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.094
    Danke erhalten:
    1.616
    Danke vergeben:
    1.214
    im Gambio-Testshop 2 sind doch auch 3 Bilder nebeneinander: 1 großes und 2 kleinere daneben.

    Der Code sieht dort so aus:
    Code:
    <div class="row home-teaser-row space-0">
        <div class="col-xs-12 col-md-8 row-xs-2 row-md-2">
            <a class="home-teaser" href="kinder-babys/"><img alt="" class="img-responsive" src="images/content/index/teaser.jpg" /></a>
        </div>
    
        <div class="col-xs-12 col-md-4 row-xs-2 row-md-1">
            <a class="home-teaser" href="specials.php"><img alt="" class="img-responsive" src="images/content/index/sale-top.jpg" /></a>
        </div>
    
        <div class="col-xs-12 col-md-4 row-xs-2 row-md-1">
            <a class="home-teaser" href="info/versand-zahlungsbedingungen.html"><img alt="" class="img-responsive" src="images/content/index/service-top.jpg" /></a>
        </div>
    </div>
    Link zum Shop: (Link nur für registrierte Nutzer sichtbar.)

    Vielleicht hilft das etwas; aber evtl. hat ja auch jemand die Zeit das für Dich zu machen?!
     
  17. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Ich werde es mal morgen probieren.
    Ich sitze locker schon seit Stunden vor dem Rechner bzgl. des Problems. (Keine Nerven mehr)

    Ich habe soeben dein Problem mit PP gelesen.
    Ich drücke dir meine beiden Daumen marmoles.

    Und nochwas: Ich danke wirklich an euch alle die hier im Forum unheimlich viel helfen.
    Das gilt an ALLE!!
    Lieben dank nochmals.

     
  18. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Versuche es mal damit:
    HTML:
    <div class="row">
    <div class="col-xs-12 col-sm-4" style="padding-right: 0px;  padding-left: 0px; ">
    <a href="/Link-Pfad/"><img class="img-responsive" src="Pfad zum bild.jpg" /></a>
    </div>
    
    <div class="col-xs-12 col-sm-4 "style="padding-right: 0px;  padding-left: 0px; ">
    <a href="/Link-Pfad/"><img class="img-responsive" src="Pfad zum bild.jpg" /></a>
    </div>
    
    <div class="col-xs-12 col-sm-4" style="padding-right: 0px;  padding-left: 0px; ">
    <a href="/Link-Pfad/"><img class="img-responsive" src="Pfad zum bild.jpg" /></a>
    </div>
    </div>
    Dann rutschen die Bilder aneinander. Wenn Du einen kleinen Rand haben möchtest, kannst Du statt 0px auch 1px oder 2px eintragen
     
  19. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Barbara........ich glaube, dass ist die Lösung gewesen.
     
  20. andrea_oezlue
    andrea_oezlue Erfahrener Benutzer
    Registriert seit:
    7. November 2016
    Beiträge:
    340
    Danke erhalten:
    8
    Danke vergeben:
    29
    Wie kann ich bsp. auf der ersten Zeile die Bilder (Die Farben) Unterschiedlich Breit (nicht hoch) einstellen.