WS 3.0 Layout Extension Kit

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Das Extension Kit ist nur für eine Darstellung innerhalb einer Box geeignet, das funktioniert boxübergreifend nicht. Dafür müsste man sich eine eigene Lösung überlegen. Prinzipiell möglich, aber es gibt nichts fertiges in der Richtung.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • Ich hätte eine Frage zu einem speziellen Layout. Ich bin nicht der HTML-Profi, deshalb muss ich nachfragen.

      Ich würde es gerne innerhalb einer Box folgendermaßen darstellen: wireframe.cc/TRoABm

      Ich hätte gerne drei Bilder jeweils nebeneinander. Also nur die Bilder ohne Text. Alle mit verschiedener Verlinkung. Diese sollten sich logischerweise responsive mit anpassen.

      Wer könnte mir hierzu helfen?
    • Du kannst dafür den Code für drei Spalten nehmen. Da müsste dann noch eine Anweisung für die Skalierung mit rein, das müßte:

      .gridLayout img {width: 100%;}

      sein.

      Falls nicht kann dir vielleicht jemand anders die richtige Klasse sagen, ich bin heute und morgen nicht zu Hause.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • @Tom,

      reicht hier nicht einfach der Code für drei Spalten? Es wirkt nämlich dann sehr erdrückend mit width: 100%;
      Die Bilder über CSS einzubinden ist zwar besser zum anpassen, aber so ist es erstmal möglich, wenn ich deinen Post richtig verstanden habe @DominikPinzenoehler

      HTML-Quellcode

      1. <div class="gridLayout row">
      2. <div class="gridBox col-md-4">
      3. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      4. <div class="gridBoxContentHeroIcon gridBoxCenter">
      5. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      6. </div>
      7. </div>
      8. </div>
      9. <div class="gridBox col-md-4">
      10. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      11. <div class="gridBoxContentHeroIcon gridBoxCenter">
      12. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      13. </div>
      14. </div>
      15. </div>
      16. <div class="gridBox col-md-4">
      17. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      18. <div class="gridBoxContentHeroIcon gridBoxCenter">
      19. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      20. </div>
      21. </div>
      22. </div>
      23. </div>
      Alles anzeigen
      Grüße
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • lacritz schrieb:

      @Tom,

      reicht hier nicht einfach der Code für drei Spalten? Es wirkt nämlich dann sehr erdrückend mit width: 100%;
      Die Bilder über CSS einzubinden ist zwar besser zum anpassen, aber so ist es erstmal möglich, wenn ich deinen Post richtig verstanden habe @DominikPinzenoehler

      HTML-Quellcode

      1. <div class="gridLayout row">
      2. <div class="gridBox col-md-4">
      3. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      4. <div class="gridBoxContentHeroIcon gridBoxCenter">
      5. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      6. </div>
      7. </div>
      8. </div>
      9. <div class="gridBox col-md-4">
      10. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      11. <div class="gridBoxContentHeroIcon gridBoxCenter">
      12. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      13. </div>
      14. </div>
      15. </div>
      16. <div class="gridBox col-md-4">
      17. <div class="gridBoxContent gridBoxIcon gridBoxJustify">
      18. <div class="gridBoxContentHeroIcon gridBoxCenter">
      19. <a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
      20. </div>
      21. </div>
      22. </div>
      23. </div>
      Alles anzeigen
      Grüße

      Danke für den Code. Das sieht schon sehr gut aus :)

      Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.


      Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
      Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.
    • DominikPinzenoehler schrieb:

      Danke für den Code. Das sieht schon sehr gut aus

      Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.


      Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
      Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.
      Jetzt ohne es ausprobiert zu haben:


      CSS-Quellcode

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. }
      10. }
      Alles anzeigen
      probier es mal aus und spiel mit dem Wert 50% bisschen rum ;)

      grüße
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • lacritz schrieb:

      DominikPinzenoehler schrieb:

      Danke für den Code. Das sieht schon sehr gut aus

      Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.


      Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
      Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.
      Jetzt ohne es ausprobiert zu haben:

      CSS-Quellcode

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. }
      10. }
      Alles anzeigen
      probier es mal aus und spiel mit dem Wert 50% bisschen rum ;)

      grüße


      Ne funktioniert leider nicht :/
      Das ändert leider nur den Abstand vom Bild zum Seitenrand. Auf dem Smartphone hätten eigentlich auch zwei Bildern nebeneinander noch Platz.
    • Du willst also Mobil die höhe und die breite anpassen? Entweder so oder du machst es mit Zahl px Angaben. Und wie gesagt ungetestet. Ansonsten musst du mir mal nen Link geben :)

      Quellcode

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. height: 50%;
      10. }
      11. }
      Alles anzeigen
      There are only 10 types of people in the world: Those who understand binary, and those who don't.
    • lacritz schrieb:

      Du willst also Mobil die höhe und die breite anpassen? Entweder so oder du machst es mit Zahl px Angaben. Und wie gesagt ungetestet. Ansonsten musst du mir mal nen Link geben :)

      Quellcode

      1. @include screen-lg { /*DESKTOP */
      2. .gridLayout img {
      3. width: 100%;
      4. }
      5. }
      6. @include screen-md-down { /*Smartphone/Tablet */
      7. .gridLayout img {
      8. width: 50%;
      9. height: 50%;
      10. }
      11. }
      Alles anzeigen

      Ich möchte eigentlich nur, dass auch Mobil die Bilder nicht übergroß angezeigt werden. Es geht nur um Symbolbilder für Foren-Kategorien.

      Ich habe es hier nochmal aktualisiert wie ich mir die Darstellung vorstelle. Oben auf größeren Geräten, unten z.B. auf Smartphones. wireframe.cc/TRoABm
    • lacritz schrieb:

      Ok, ich komm grad nicht auf die Lösung mit dem Grid Boxen. Musst du auf @Tom warten.

      PS: Ja es kann manchmal ärgerlich sein, zu warten dennoch bleib bitte bei einem Post
      community.woltlab.com/thread/2…ostID=1644964#post1644964

      Grüße

      Das ist kein Problem. Ich hoffe nur auf weitere Lösungsvorschläge, da ich hier ja speziell mittels des Layout Extension Kits von cls-design gefragt habe.

      Und ein erster Lösungsvorschlag kam ja bereits. Der ist zwar nicht ideal, aber warum eigentlich nicht so machen.
    • Hallo zusammen,

      ich wollte die "Demofooter mit drei Boxen" einbinden, aber das zeigt es nur über die Hälfte der Seite an. Wie kann ich es machen, dass es über die ganze Seite angezeigt wird?

      -> Hab raus gefunden, dass es an der Anzeigeoption liegt.
      Fusszeile geht nicht, im Inhaltsbereich unten geht.

      Gruss

      Wasserlasser
    • Benutzer online 3

      3 Besucher