1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Darstellungs problem mit div bei verschidenen fenster grössen

Dieses Thema im Forum "Stellenangebote/Projekte (unentgeltlich)" wurde erstellt von Andrin Spitzer, 10. Januar 2017.

  1. Andrin Spitzer

    Andrin Spitzer Mitglied

    Guten Abend zusammen.

    Ich hab mal wider ein CSS Problem, ich bin zur zeit an einer Seite dran wo ich einen div=id=content habe mit mehreren div's=class=box drinnen.

    Jetzt ist es so das ich will das sich wen das Fenster den ganzen Bildschirm füllt sollen zb 4 von den div=class=box neben einander sein alle gleich breit und die gleichen zwischen Abständen und so zentriert, wen das Fenster jetzt zb halbiert wird sollen es nur noch 2 sein und dafür in der nächsten reihe wider 2.



    Ich wusste nicht wo nach ich suchen sollte darum hab ich direkt mal ein Thema erstellt ich Hofe ihr versteht mein Problem und könnt mir helfen.


    Liebe grüsse


    A.Spitzer
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ich würde die divs mit display:inline-block versehen und ihnen eine Breite von 25% geben. Dann passen genau vier in den umgebenden Container. Dann mit einer Mediaquery die Breite auf 50% ändern, wenn eine bestimmte Fensterbreite unterschritten wird. Dann passen nur noch zwei hinein.
    https://jsfiddle.net/pnpotchk/
    Du musst darauf achten, dass zwischen dem schließenden und dem öffnenden div-Tag kein Zeilenumbruch ist:
    Code (Text):
    1. </div><div>
     
    Zuletzt bearbeitet: 10. Januar 2017
  3. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hay danke für die schnelle antwort. das aklappt bereits sehr gut aller dings will ich mit margin einen abstand zwischen den boxen schaffen dieser ist aber leider nicht regel mässig wen das fenster kleiner/grösser wirt.

    hab das geändert:
    Code (CSS):
    1. .box {
    2.     display: inline-block;
    3.     width: 24%;
    4.     margin:0.25%;
    5.     height: 50vh;
    6.     background-color: lightgrey;
    7. }
    und was passirt wen ich immer wider eine box mit der selben class hinzufüge passt sich das dan automatisch an?

    liebe grüsse..
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Meinst Du es so?
    https://jsfiddle.net/Sempervivum/pnpotchk/3/
    Wenn man das margin in % angibt, verändert es sich je nach Fenstergröße.
    Probiere es aus. Wenn man die Größenangaben nicht verändert, passen weiterhin vier divs in eine Zeile und die nächsten werden in einer neuen Zeile angezeigt:
    https://jsfiddle.net/Sempervivum/pnpotchk/4/
     
  5. Andrin Spitzer

    Andrin Spitzer Mitglied

    hat das klappt bereits super gut danke schön. muss nur noch den Fehler finden warum bei mir die Abstände nicht überein stimmen (vom div links div bis zur linken Seite mit dem rechten div zur rechten Seite)

    aber das liegt glaube ich an dem div wo sich das ganze befindet.


    ich melde mich mich wen es funktioniert.
     
  6. Andrin Spitzer

    Andrin Spitzer Mitglied

    hmmm bring es irgend wie nicht hin....

    vlt siehst du das Problem.

    HTML:
    1. <div class="content">
    2.     <div class="shop-box">
    3.     </div><div class="shop-box">
    4.     </div><div class="shop-box">
    5.     </div><div class="shop-box">
    6.     </div><div class="shop-box">
    7.     </div>
    8. </div>
    Code (CSS):
    1. .shop-box {
    2.     display: inline-block;
    3.     margin: 0.25%;
    4.     width: 24.5%;
    5.     padding:                20px;
    6.     border:                 1px solid  rgba(84, 44, 44, 0.2);
    7.     -webkit-box-shadow:     0px 0px 3px -1px rgba(0, 0, 0, 0.5);
    8.     -moz-box-shadow:        0px 0px 3px -1px rgba(0, 0, 0, 0.5);
    9.     box-shadow:             0px 0px 3px -1px rgba(0, 0, 0, 0.5);
    10. }
    11.  
    12. @media only screen and (max-width: 500px) {
    13.     .shop-box {
    14.         width: 49.5%;
    15.     }
    16.  
    17.  
    18.  
    19. .content {
    20.     position:               absolute;
    21.     left:                   28.3%;
    22.     right:                  28.3%;
    23.     top:                    57px;
    24.     height:                 auto;
    25.     min-height:             10em;
    26.     font-size:              1em;
    27. }
    28. }
     
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Wenn Du ein padding und ein border anbringst, musst Du diese in die Berechnung einbeziehen:
    https://jsfiddle.net/Sempervivum/b0pjrst2/
    Möglicher Weise geht dies einfacher mit flex-Layout, ohne Berechnungen, aber damit habe ich mich bisher noch nicht beschäftigt.
     
  8. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hay klappt super danköööö viel mal.
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Freut mich, dass es funktioniert. Würde mich aber interessieren, ob es mit flex-Layout einfacher, ohne die Berechnungen, geht. Vielleicht kann jemand etwas dazu sagen, der das Wissen hat.
     
  10. Andrin Spitzer

    Andrin Spitzer Mitglied

    Hey hab ne frage frage bezüglich meines Inhaltes der 4 boxen, er lässt sich nicht richtig positionieren und passt sich nicht richtig an.

    Hier könnt ihr das ganze anschauen unter "Shop":

    User: Gast

    pw: r*9CdK@c!m&N

    http://www.bys.spitzinet.ch/
     
  11. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Die vertikale Ausrichtung kannst Du mit vertical-align:top bei .shop-box korrigieren.
    Dass die Bilder neben den Boxen liegen, liegt daran, dass diesee ein Padding von 20px haben, daher passen die Bilder in den restlichen Raum nicht hinein. Warum verschenkst Du soviel Platz durch den Leerraum links und rechts?
     
    Andrin Spitzer gefällt das.
  12. Andrin Spitzer

    Andrin Spitzer Mitglied

    Kann ich das ausgleichen wen ich die img breite auf 95% setzte und padding auf 2.5%?

    ich hab mir gedacht das der Inhalt auch bei einem großen Monitor kompakt in der Mitte zu finden ist und ich keine bessere Idee hatte.
    findest das Desing nicht gut?
     
  13. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Die Frage ist weniger, ob ich es gut finde, sondern ob es praktikabel ist im Hinblick auf die Frage, ob die Bilder hinein passen. Möglicher Weise könntest Du den seitlichen Rand auf große Monitore beschränken, indem Du max-width für den umgebenden Container verwendest und ihn mit margin:auto zentrierst. Den Bildern eine relative Größe zu geben, ist wahrscheinlich eine gute Idee.
     
  14. Andrin Spitzer

    Andrin Spitzer Mitglied

    ich verstehe nicht ganz wie du das meinst.
    denkst du du kanst mir das als code darstellen?

    musste die sub ändern ist jetzt hier verfügbar:
    http://www.desktoper.spitzinet.ch/
     
  15. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Dieses CSS funktioniert bei mir ganz gut:
    Code (CSS):
    1. .content {
    2.     position: relative;
    3.     max-width: 800px;
    4.     width: 100%;
    5.     margin: auto;
    6. }
    7. .shop-box {
    8.     display:                inline-block;
    9.     margin:                 1%;
    10.     width:                  calc(23% - 42px);
    11.     height:                 14em;
    12.     padding:                20px;
    13.     text-align:             center;
    14.     cursor:                 pointer;
    15.     border:                 1px solid  rgba(84, 44, 44, 0.2);
    16.     box-shadow:             0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    17.     transition:             all 0.8s cubic-bezier(.25,.8,.25,1);
    18.     vertical-align:         top;
    19. }
    20.  
    21. .shop-box:hover {
    22.     box-shadow:             0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    23. }
    24. @media only screen and (max-width: 800px) {
    25. .shop-box {
    26.                             width: calc(47.9% - 42px);
    27.     }
    28. .shop-box img {
    29.     max-width: calc(100% - 20px);
    30. }
    31. }
     
  16. Andrin Spitzer

    Andrin Spitzer Mitglied