Grid Boxen bei niedriger Breite nebeneinander

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

    • Grid Boxen bei niedriger Breite nebeneinander

      Hallo erst mal...


      wie bekomme ich das hin das bei einer kleineren breite zb. 780px zwei boxen nebeneinander sind und nicht nur eine.


      Quellcode

      1. <div class="gridLayout row">
      2. <div class="gridBox col-xs-6 col-md-3">
      3. <h2 class="gridBoxTitle"> <span class="icon icon32 fa-gamepad"> </span> Konsolen</h2>
      4. <div class="gridBoxContent">
      5. <nav>
      6. <ol class="gridBoxMenu">
      7. <li class="">
      8. <a href="#" class="gridBoxMenuLink">
      9. <span class="gridBoxMenuLinkTitle">Link 1</span>
      10. </a>
      11. </li>
      12. <li class="">
      13. <a href="#" class="gridBoxMenuLink">
      14. <span class="gridBoxMenuLinkTitle">Link 2</span>
      15. </a>
      16. </li>
      17. <li class="">
      18. <a href="#" class="gridBoxMenuLink">
      19. <span class="gridBoxMenuLinkTitle">Link 3</span>
      20. </a>
      21. </li>
      22. <li class="">
      23. <a href="#" class="gridBoxMenuLink">
      24. <span class="gridBoxMenuLinkTitle">Link 4</span>
      25. </a>
      26. </li>
      27. <li class="">
      28. <a href="#" class="gridBoxMenuLink">
      29. <span class="gridBoxMenuLinkTitle">Link 5</span>
      30. </a>
      31. </li>
      32. </ol>
      33. </nav>
      34. </div>
      35. </div>
      36. <div class="gridBox col-xs-6 col-md-3">
      37. <h2 class="gridBoxTitle"> <span class="icon icon32 fa-desktop"> </span> Computer</h2>
      38. <div class="gridBoxContent">
      39. <nav>
      40. <ol class="gridBoxMenu">
      41. <li class="">
      42. <a href="#" class="gridBoxMenuLink">
      43. <span class="gridBoxMenuLinkTitle">Link 1</span>
      44. </a>
      45. </li>
      46. <li class="">
      47. <a href="#" class="gridBoxMenuLink">
      48. <span class="gridBoxMenuLinkTitle">Link 2</span>
      49. </a>
      50. </li>
      51. <li class="">
      52. <a href="#" class="gridBoxMenuLink">
      53. <span class="gridBoxMenuLinkTitle">Link 3</span>
      54. </a>
      55. </li>
      56. <li class="">
      57. <a href="#" class="gridBoxMenuLink">
      58. <span class="gridBoxMenuLinkTitle">Link 4</span>
      59. </a>
      60. </li>
      61. <li class="">
      62. <a href="#" class="gridBoxMenuLink">
      63. <span class="gridBoxMenuLinkTitle">Link 5</span>
      64. </a>
      65. </li>
      66. </ol>
      67. </nav>
      68. </div>
      69. </div>
      70. <div class="gridBox col-xs-6 col-md-3">
      71. <h2 class="gridBoxTitle"> <span class="icon icon32 fa-mobile"> </span> Smartphone</h2>
      72. <div class="gridBoxContent">
      73. <nav>
      74. <ol class="gridBoxMenu">
      75. <li class="">
      76. <a href="#" class="gridBoxMenuLink">
      77. <span class="gridBoxMenuLinkTitle">Link 1</span>
      78. </a>
      79. </li>
      80. <li class="">
      81. <a href="#" class="gridBoxMenuLink">
      82. <span class="gridBoxMenuLinkTitle">Link 2</span>
      83. </a>
      84. </li>
      85. <li class="">
      86. <a href="#" class="gridBoxMenuLink">
      87. <span class="gridBoxMenuLinkTitle">Link 3</span>
      88. </a>
      89. </li>
      90. <li class="">
      91. <a href="#" class="gridBoxMenuLink">
      92. <span class="gridBoxMenuLinkTitle">Link 4</span>
      93. </a>
      94. </li>
      95. <li class="">
      96. <a href="#" class="gridBoxMenuLink">
      97. <span class="gridBoxMenuLinkTitle">Link 5</span>
      98. </a>
      99. </li>
      100. </ol>
      101. </nav>
      102. </div>
      103. </div>
      104. <div class="gridBox col-xs-6 col-md-3">
      105. <h2 class="gridBoxTitle"> <span class="icon icon32 fa-newspaper-o"> </span> Sonstiges</h2>
      106. <div class="gridBoxContent">
      107. <nav>
      108. <ol class="gridBoxMenu">
      109. <li class="">
      110. <a href="#" class="gridBoxMenuLink">
      111. <span class="gridBoxMenuLinkTitle">Link 1</span>
      112. </a>
      113. </li>
      114. <li class="">
      115. <a href="#" class="gridBoxMenuLink">
      116. <span class="gridBoxMenuLinkTitle">Link 2</span>
      117. </a>
      118. </li>
      119. <li class="">
      120. <a href="#" class="gridBoxMenuLink">
      121. <span class="gridBoxMenuLinkTitle">Link 3</span>
      122. </a>
      123. </li>
      124. <li class="">
      125. <a href="#" class="gridBoxMenuLink">
      126. <span class="gridBoxMenuLinkTitle">Link 4</span>
      127. </a>
      128. </li>
      129. <li class="">
      130. <a href="#" class="gridBoxMenuLink">
      131. <span class="gridBoxMenuLinkTitle">Link 5</span>
      132. </a>
      133. </li>
      134. </ol>
      135. </nav>
      136. </div>
      137. </div>
      138. </div>
      Alles anzeigen
      MfG HTMH
    • HTMH schrieb:

      sehe auch kein Problem darin fragen in ver. Foren zu Posten.
      Dann solltest du die anderen Themen aber verlinken. Oder findest du es geil, wenn du dir die Mühe machst jemandem etwas ausführlich zu erklären oder dir etwas herzuleiten und hinterher zu hören ja "egal, hat schon vor 3 Tagen einer auf xxx geschrieben"?
    • Hallo,

      ich würde das Thema gerne nochmal aufgreifen;

      in meinem aktuellen Projekt habe ich vor eine Art Collection zu präsentieren;
      Mit Screenshot und darunter einen Text, so ganz klassich halt

      Nur um möglichst viel Kontrolle zu bekommen, hatte ich vor, für jedes einzelen Bild und Text-Dings eine eigene Box anzulegen.

      Nun, wenn man das Layoutkit installiert und verwendet und mit den Codebeispielen arbeitet, kommt man schon sehr gut voran, ja :)

      Nur hänge ich aktuell an der Sache fest, das, wenn ich 2 Boxen auf der Startseite anzeigen lassen, diese auch in die richtige Reihenfolge bringe, diese stets untereinander angezeigt werden, aber ich es nicht hinbekomme, das die nebeneinader stehen.
      Schwer zu erklären, das gebe ich zu;

      Aus diesem Grund habe ich 3 Bilder angehängt, die es hoffentlich verständlich machen :D

      PS: Ich habe es schon mit <ul> versucht und mit der klassichen WYSIWYG-Tabelle.
      Bei <ul> war das Problem das es so unsauber aussah
      Bei der Tabelle sah es wunderschön aus, keine Frage, aber da ist die mobile Ansicht das Problem.
      Bilder
      • 1.png

        126,36 kB, 1.920×917, 59 mal angesehen
      • 2.png

        101,6 kB, 1.920×914, 54 mal angesehen
      • sosollessein.png

        193,15 kB, 1.920×911, 51 mal angesehen
      =)
    • Hallo @s. Oliver ,

      auch hier wäre es schön wenn du uns ein Link zur Liveansicht zu verfügung stellen würdest.

      Nur so können wir dir schnell und effektiv auch helfen, um dein Problem nachzustellen und eine Lösung dafür zu finden.

      Andersherum wird das hier sonst ein Ratespiel mit der CSS.

      Vielen Dank ;)
      Mit freundlichen Grüßen

      Pacco
    • woltlabcollection.de/
      Er hat es aber momentan als Tabelle drin.

      Codename: Edge was weißt du, das ich nicht weiß?
      Es heißt übrigens Suite und da du zwischen Forum und WCF normal unterscheidest, solltest du auch konsistent WoltLab Suite Core und WoltLab Suite Forum anführen - sie komplette Suite beinhaltet ja noch mehr. ;)
    • Ou klar, entschuldiung .. Den Link wollte ich natürlich nicht verbergen ;)
      Hab dafür eine zweite Seite angelegt: woltlabcollection.de/index.php?newindex/



      MysteryCode schrieb:

      Codename: Edge was weißt du, das ich nicht weiß?
      Gar nichts.. :)
      Ist halt nur ein Lorem Ipsum Name, damit ich da irgendwas stehen habe :D

      softcreatr.de - Konversationen schrieb:

      "Bleeding Edge" heißt einfach nur, dass es sich um den aktuellsten Entwicklungsstand handelt. Also 3.1.0 Alpha 1, allerdings mit sämtlichen Änderungen die maximal 15 Minuten vor deinem Download durchgeführt wurden.

      MysteryCode schrieb:

      Es heißt übrigens Suite und da du zwischen Forum und WCF normal unterscheidest, solltest du auch konsistent WoltLab Suite Core und WoltLab Suite Forum anführen - sie komplette Suite beinhaltet ja noch mehr. ;)
      Ou vielen Dank für den Tipp :)
      =)

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von s. Oliver ()

    • Hallo @s. Oliver

      ich denke du wirst mit deiner Vorlage nicht viel machen (CSS) können, da dein HTML-Code so nicht aufgeht ;)
      Du kannst hier nur mit einer Box arbeiten da sonst deine Grid-Boxen über CSS nicht greifen.
      Einzelne Boxen lassen keinen .row über CSS zu!
      Ausserdem müsstest du jede Box mit display: flex deklarieren, damit die Boxen überhaupt nebeneinander stehen.
      Du müsstest in deinem Fall also die Bilder in dem HTML-Code manuell einbinden und verlinken.
      Bilder über FTP hochladen und in den (Beispiel) images/boxpic hochladen.

      Das sieht dann so aus:

      HTML-Quellcode

      1. <div class="gridLayout row">
      2. <div class="gridBox col-md-6">
      3. <div class="boxImage">
      4. <img src="http://woltlabcollection.de/index.php?media/3-burningbook-png/" alt="">
      5. </div>
      6. <div class="boxContent">
      7. <div class="gridBoxContent">
      8. <div>
      9. <p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
      10. <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
      11. <p>ed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.</p>
      12. </div>
      13. </div>
      14. </div>
      15. </div>
      16. <div class="gridBox col-md-6">
      17. <div class="boxImage">
      18. <img src="http://woltlabcollection.de/index.php?media/4-bbl102-png/" alt="">
      19. </div>
      20. <div class="boxContent">
      21. <div class="gridBoxContent">
      22. <div>
      23. <p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
      24. <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
      25. <p>ed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.</p>
      26. </div>
      27. </div>
      28. </div>
      29. </div>
      30. </div>
      Alles anzeigen

      <div class="gridBox col-md-6">
      gibt dann automatisch folgende CSS-Deklaration raus:

      CSS-Quellcode

      1. .col-md-6 {
      2. flex: 0 0 50%;
      3. max-width: 50%;
      4. }
      und das md bedeutet @media (min-width: 769px

      (also gültig bis zu einer Bildschirmgrösse grösser als 769px)

      und damit die Bilder nicht gefloatet werden und ein Grösse von 100% haben kommt dies noch dazu


      CSS-Quellcode

      1. .boxWithImage.boxesContentTop .boxImage,
      2. .boxWithImage.boxesContentBottom .boxImage {
      3. float: none;
      4. width: 100%;
      5. }
      Ergebnis:


      ;)
      Mit freundlichen Grüßen

      Pacco