Hallo, ich habe auf meiner Startseite Kategoriebilder, die zu den jeweiligen Untermenüs führen. Ich würde dies gerne insoferne abändern, dass ich 3 bzw 4 Bilder in einer Reihe habe. Bei 2 Bildern in einer Reihe weiß ich, wie ich sie ausrichten muss. Hier gebe ich einfach beim rechten Bild "float: right;" ein Aber wie zentriere ich bei 3 Bildern das mittlere Bild? "float: center" funktioniert nicht...?? Und was gebe ich bei 4 Bildern in einer Reihe bei den mittleren 2 ein, damit die Abstände gleich sind?? Danke und LG Silke www.sweet-pearls-design.com
Das geht einfach mit bootstrap (ist im Honeygrid enthalten) Beispiel HTML: <!-- Bilder Responsive --> <div class="row" style="margin-left: auto; margin-right: auto; max-width: 600px;"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img class="img-responsive" src="images/test-bild1.jpg" alt="b1"> </a> </div> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img class="img-responsive" src="images/test-bild2.jpg" alt="b2"> </a> </div> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img class="img-responsive" src="images/test-bild3.jpg" alt="b3"> </a> </div> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img class="img-responsive" src="images/test-bild4.jpg" alt="b4"> </a> </div> </div> so sind ab >Tablet Ansicht 4 Bilder nebeneinander und bei mobil-Anzeige 2 Bilder, class="thumbnail" macht einen Rahmen um die Bilder, kannst du auch weglassen. Das ganze noch mit css-angaben gewürzt, dann passt das.
Eine Frage noch - wie mache ich so etwas? Wenn ich die Kategoriebilder so anordnen möchte? Danke nochmals, Silke
Das ist schwierig aber machbar, du solltest erst auch wissen wie das auf Tablet und mobil aussehen soll. Es gibt eine Möglichkeit das als ein Bild darzustellen (https://de.onpage.org/wiki/Image_Map) und über Koordinaten Links für die einzelnen Bilder einfügen, was aber für google-suche schlecht ist. Besser wäre erst mal etwas logische Geometrie in die Sache bringen, dann könnte man das auch mit dem raw-container hinbringen und würde auch mobil funktionieren. Nachtrag: Habe das Beispiel bei einer row-container-Breite von 600 px gemacht!
Hallo, ich glaube, das mit der verschachtelten Ansicht lass ich lieber. Ich habe mich nun mit jeweils 2 Kategoriebilder pro Zeile herumgespielt - ich habe versucht, die Kategoriebilder, die beide die selbe Größe haben, so anzuordnen, dass in der Mitte nur ein kleiner Zwischenraum frei bleibt. Die Bilder habe ich zuerst in der Größe 500 x 250 px hochgeladen, doch da ist ein sehr großer Spalt dazwischen (pinke Kästchen). Der nächste Versuch war mit 525 x 250 px, jedoch war da immer noch ein großer Zwischenraum (beige). Die dritte Größe war mit 550 x 250 px, und diese scheinen nebeneinander keine Platz zu haben (schwarz)??? Verstehe ich nicht ganz. Viell. kann mir jemand einen Tipp geben, welche Größe ich hochladen muss, damit die Seite schön ausgefüllt wird... Danke LG Silke
Du musst bedenken das das ganze ja auch auf diversen Geräten ausgegeben wird. 450x200 ist z.B. eigentlich ganz gute Größe kannst bei uns sehen (Link nur für registrierte Nutzer sichtbar.)
Hallo, ja das schaut schon gut aus bei euch, aber schau mal, der Spalt zwischen den Fotos ist nicht so groß wie bei meinem Versuch. Ich habe ausserdem keine Kategorieleiste auf der linken Seite bei der Startseite. Kann ich die beiden Bilder vom linken und rechten Rand irgendwie wegrücken und sie dadurch in der Mitte enger zusammen zu bekommen? Ich weiß nicht, ob man das hier schreiben darf, aber ein Beispiel dafür, was ich mir vorstelle, ist bei den Gabmio Templates von netdexx für Honeygrid, das template 002 LG
Du kannst per CSS im Grunde ALLES machen. Rechte Taste drauf und "Untersuchen" wählen im Chrome oder im Firefox Firebug nutzen Dann kannst live testen und probieren und wenns passt das CSS in Usermod CSS beim Style editor und fertig. Nur immer dran denken es gibt min. 3 Ansichten Desktop, Tablet Mobile
Habe das mal mit deinen Bildern getestet, so funktioniert das für alle Ansichten. In diesem Beispiel hast du in der Desktop- und Tablet-Ansicht 4 Bilder nebeneinander das 5. mittig darunter, in mobiler-Ansicht 2 Bilder nebeneinander. Wie du sehen wirst, mit 5 Bilder schlecht zu lösen, da es 12 Gridspalten gibt. Teste das mal. (du musst nur die Pfade zu deinen Bildern anpassen, sowie shutterstock_polaris final.jpg auf Breite 300px ändern, Höhe lassen.)
Schau mal Gerd, ich zeige konkret was ich meine; deinen Vorschlag von oben werde ich bei der Pearls Seite umsetzen probieren. Konkret geht es aber auch um meine 2. Homepage, die ich gerade aufbaue. Diese 2 Kategoriebilder sind jeweils 500 x 250 px groß - mir ist der Abstand dazwischen zu groß. Ich würde diese gerne an den Seiten einrücken, und sie so mittig näher zusammenführen. Ich sollte vielleicht dazuschreiben, dass ich bei diesen Dingen in den Babyschuhen stecke - ich kenn mich mit der Materie leider nicht aus... LG Silke
Das ist auch mit bootstrap ( http://holdirbootstrap.de/css/#grid ) möglich. Du kannst mit Hilfe der .col-md-offset-*-Klassen Spalten nach rechts verschieben. Für deine Bilder sehe das so aus: HTML: <!-- Bilder bei Container-Breite 1200px und einer Test-Bild-Größe wie Name in px --> <div class="row" style="margin-left: auto; margin-right: auto; max-width: 1200px;"> <div class="col-xs-12 col-sm-offset-1 col-sm-5" > <a href="#" > <img style="margin-left: auto; margin-right: auto; margin-bottom: 10px" class="img-responsive" src="images/testbild-500x250-1.jpg" alt="b1"> </a> </div> <div class="col-xs-12 col-sm-5" > <a href="#" > <img style="margin-left: auto; margin-right: auto;" class="img-responsive" src="images/testbild-500x250-2.jpg" alt="b2"> </a> </div> </div>
Hallo, das hat in der 1. Reihe funktioniert! Vielen Dank dafür! Wie mache ich es aber in der 2. Reihe? Ich habe versucht, den gleichen Text nochmals einzugeben, nur mit Bildern 3 und 4... mit dem Ergebnis, dass die erste Reihe super aussieht, jedoch die 2 irgendwie... Es wäre super, wenn ihr mir hier auch noch mal helfen könntet. Danke! LG Silke
Ich bins nochmal - ich habe jetzt auch den ersten post von postel (#2) ausprobiert, mit Kästchen 450 x 450 px - nur habe ich 8 Bilder mit hineingenommen; Es werden 4 in jeder Reihe angezeigt, nur leider ohne Abstand zwischen dem Slider und auch die 2 Bilderreihen kleben aneinander Ich schaffe es nicht, zwischen den Bilderreichen und zum Banner einen Abstand hinein zu bekommen. Könntet ihr mir hier nochmals helfen? Danke und LG Silke
Das sollte helfen: Abstand oben: <div class="row" style="margin-left: auto; margin-right: auto; margin-top: 10px">......... Bei den Bilder: <img style="margin-left: auto; margin-right: auto; margin-bottom: 10px" ...........