Guten Abend, ich suche nach einer etwas eleganteren Lösung für meine Stoffübersicht. Bin absoluter Laie und hatte mir den Code einer dreispaltige Tabelle aus dem Netz kopiert. In Desktop- sowie Handyansicht bin ich auch vollkommen zufrieden. Da passt sich die Tabelle gut an. Aber auf dem Tablet sieht es einfach nur furchtbar aus. Kann mir da vielleicht jemand einen Tipp geben, wie ich das eleganter/schöner lösen kann?? Liebe Grüße https://www.graubuntschwarz.de/info/stoffuebersicht.html
WEnn du das so in Spalten machen mcöchtest, solltest Du keine festen Größen verwenden. .... <div class="col-xs-12 col-sm-4" style="padding: 2.5%; text-align: center;"> <span style="font-family:verdana,geneva,sans-serif;"><img alt="" src="images/Bed of Roses_2.JPG" class="img-responsive"><br> .... Und keine Leerzeichen in den Bildnamen Wobei es vielleicht schöner wäre, wenn man das in der kleineren Größe nicht in 3 Spalten, sondern nur 2 Hätte, dazu müsste man aber den Code ändern. P.S. Bei Sunny Smile ist Dir der Text verrutscht
Was meinst du genau mit Leerzeichen in den Bildnamen? Hättest du eventuell auch eine Idee, wie ich es ohne Tabelle lösen kann? Ich bin da für alles offen. Diese Seite treibt mich noch in die Verzweiflung
Ich habe ein ähnliches Problem. Ich füge über die Auswahlleiste eine Tabelle in der Artikelbeschreibung ein, allerdings bekomme ich diese auch nicht responsive hin. Sieht überall etwas anders aus.
Grundsätzlich sind Tabellen in der heuten Zeit zu vermeiden! Es gibt für fast jede Anforderung eine passende Lösung. @Graubuntschwarz ... in deinem Fall würde ich mir mal das anschauen https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_wrap das solltest du sehr einfach auch auf deine Anforderung anpassen können. @Gefässerie ... auch für sowas gibt es Lösungen, jedoch würde das den Rahmen hier jetzt sprengen. Eine quick and dirty Lösung wäre du packst die Tabelle in einen DIV Container und sogst dafür das man die Tabelle auf der Handyansicht hin und her schieben kann. [HTML CODE] HTML: <div class="table-scrollable"> <table> … </table> </div> [CSS Code] Code: .table-scrollable { width: 100%; overflow-y: auto; margin: 0 0 1em; } .table-scrollable::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-scrollable::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); }
Es gibt eine Javascript-Lösung die aus steifen Tabellen flexible Tabellen macht. https://fooplugins.github.io/FooTable/docs/getting-started.html#examples
@Graubuntschwarz Du könntest zB deinen Code, mit dem die Bilder eingebunden werden, so ändern, dass die Bilder nicht abgeschnitten werden. Code: <img class="img-responsive" alt="" src="images/Fairy Moment_1.JPG" style="width: 330px;"> Dann sähe das erstmal so aus:
Wer ein bisschen mehr mit Gridwerten lernen will, da kann das hier helfen: (Link nur für registrierte Nutzer sichtbar.) Damit lassen sich ganz wunderbar Tabellen bauen. Man sollte aber immer darauf achten, wie das auf einem kleinen Handy angezeigt wird. Bei zu viel Text wird das Feld sehr hoch und eventuell auch unschön umgebrochen.
Dein Bild heißt: Bed of Roses_2.JPG da wird dann im html z.B. Bed%20of%20Roses_2.JPG draus, deshalb sollte man bei Bildern keine Leerzeichen verwenden, ebenso wie umlaute oder Sonderzeichen. Zur Tabelle: Versuche es mal damit: HTML: <div class="row "> <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> </div> Du kannst da beliebig viele <div class="col-xs-12 col-sm-6 col-md-4"> <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" /> <p class="stoffe">Hier kommt Dein Text rein</p> </div> vor dem Letzen </div> einfügen. Ich würde da keine Bilder mit 800 x 800px einfügen, sondern nur welche mit 400 x 400px, das spart kb und somit Ladezeit Noch etwas vergessen: durch das <p class="stoffe"> kann man den Text über css stylen, (Größe, Farbe, Position, Abstand....)