Den vertikalen Abstand zwischen Boxen verkleinern

  • Affected Version
    WoltLab Suite 5.2

    Hallo Woltlab-Fans,

    ich versuche schon den ganzen Tag den Abstand zwischen Boxen vertikal zu verkleinern. Weil ich 10 Boxen auf einer seite untereinander setzen möchte, ist der Abstand mir einfach zu groß.

    Code
    .box.boxred-green {
    height: auto;
    width: auto;
    padding-top:5px;
    margin-top: 5px;
    margin-bottom: 5px;
    }

    oben das war jetzt der letzte Versuch. Über Element untersuchen und die Forumssuche bin ich auch nicht schlauer geworden, bzw. nichts hat funktioniert.

    Wäre jemand so nett und hilft?

    mfG. hgx

  • Hallo,

    die obere rote Linie ist die Border linie der Unterkante der oberen Box.

    die untere rote Linie ist die Borderlinie der Oberkante der unteren Box.

    Die weiße Fläche dazwischen, also der Abstand der Boxen zueinander ist mir zu groß, weil ca. 10 Boxen untereinander sollen.

    Mit margin und oder padding habe ich das noch nicht hinbekommen. Die Box hat die Klasse boxred-green.

    Über "Element untersuchen" wird mir der Container und die Box natürlich angezeigt, leider erschließt es mir nicht wie ich den Abstand der Boxen zueinander im Container verkleinern kann. Geht das überhaupt oder bin ich nur zu blöd dafür?

    mfG. hgx


  • Hallo,

    Code
    .box.boxred-green. boxesContentTop .box:not(:first-child) {
    background-color:rgb(190, 244, 164);
    padding:5px 2%;
    border: 3px solid red;
    margin-top: 40px;
    }

    jetzt ist der Box Hintergrund und die Borderlinie nicht mehr zu sehen, was mache ich falsch?

    mfG.hgx

  • Hallo,

    so ich habs jetzt:

    CSS
    .box.boxred-green {
    background-color:rgb(190, 244, 164);
    padding:5px 2%;
    border: 3px solid red;
    margin-top: 10px!important;
    }

    ja, das wars, funktioniert. Manchmal ist weniger mehr. Danke für die Unterstützung.

    mfG. hgx

    PS. wundere mich etwas, dass ich nichts im Forum gefunden habe, mein Wunsch kann doch nicht neu sein.

  • 1. Fehler in deinem CSS Versuch

    Code
    .box.boxred-green. boxesContentTop .box:not(:first-child) {

    Davon abgesehen, dass du da bei green. boxesContentTop scheinbar einen Punkt und ein Leerzeichen vertauscht hast, wodurch es eh nicht klappen könnte, macht die Reihenfolge keinen Sinn, weil der Quelltext dann so aufgebaut sein müsste:

    • .box.boxred-green
      • .boxesContentTop
        • .box

    Also ein Element .box.boxred-green, in welchem sich ein Element .boxesContentTop befindet, in welchem sich ein Element .box befindet. Aber .boxesContentTop befindet sich nicht innerhalb von einer .box. .boxesContentTop ist ja das übergeordnete Element, in welchem sich die Boxen befinden. Also kann das so nicht funktionieren.

    Als absurdes spontanes Beispiel: Das ist wie wenn du alle Autos in einem Parkhaus abschleppen lassen willst und dem Abschleppdienst dann sagst, dass er alle Autos abschleppen soll, die in dem Parkhaus stehen, welches sich in dem roten Auto befindet. Das macht halt keinen Sinn. Ein Parkhaus ist nicht in einem roten Auto. Die Autos sind in dem Parkhaus.

    Ich kann da wirklich nur empfehlen, sich in die Grundlagen von CSS einzulesen und den HTML Quelltext genauer anzuschauen, wenn du etwas mit CSS versuchst. Das CSS muss halt zum HTML Quelltext passen. Sonst klappt das nicht.


    2. Der richtige Code

    muig.5 hatte dir ja schon einen passenden Code gegeben:

    Code
    .boxesContentTop .box:not(:first-child) {
        margin-top: 40px;
    }

    So würde das CSS bei allen Boxen greifen. Wenn du den Abstand nur bei den Boxen mit deiner .boxred-green Klasse ändern willst, könntest du die Klasse einfach noch mit einbauen, indem du die Klasse an .box dran hängst, da die Klasse ja zur Box gehört:

    CSS
    .boxesContentTop .box.boxred-green:not(:first-child) {
        margin-top: 10px;
    }

    So würdest du den Abstand gezielt für die Boxen mit der .boxred-green Klasse festlegen.


    3. Zu dem !important

    so ich habs jetzt:

    CSS
    margin-top: 10px!important;

    Das wäre allerdings die Holzhammer Methode. Es geht halt auch ohne !important.


    4. Anleitung für die Zukunft

    Hier übrigens mal eine simple Beschreibung, wie du das CSS, welches den Abstand verursacht, selbst hättest finden können:

    Du hast deine Boxen:

    Rechtsklick auf eine der Boxen -> Untersuchen, um u.a. den Quelltext zu sehen. Dann ggf erstmal möglichst viele der Elemente aufklappen, damit man den kompletten Quelltext der Boxen sieht:

    Dann lässt man die Maus einfach mal hoch und runter über den Quelltext wandern. Während man die Maus über den Quelltext wandern lässt, werden die Bereiche der Website, welche zu der jeweiligen Zeile des Quelltexts gehören, farblich (blau) hervorgehoben. Zusätzlich werden auch padding und margin farblich markiert. padding = gelb / margin = orange.

    Nachdem man herausgefunden hat, bei welcher Zeile des Quelltexts das margin steckt, klickt man die Zeile im Quelltext an:

    Jetzt kann man sehen, welches CSS in dieser Zeile greift. Da findet man dann u.a. folgendes margin:

    Und schon hat man das CSS gefunden, welches den Abstand verursacht und kann mit diesem CSS arbeiten, um den Abstand anzupassen. Das ist übrigens genau der Code, den muig.5 dir gegeben hatte.

    Edited once, last by ReeN (March 2, 2020 at 12:52 PM).

  • Hallo ReeN,

    erst mal lieben Dank für Deine ausführlichen Hilfe Bemühungen. Natürlich hatte ich das von muig5 angewendet.

    Hab das Ganze noch mal neu angewendet und komme zum gleichen Ergebnis, nur der Content wird angezeigt, auch wenn ich Farbe und Border dazu gebe.

    Als Content ist da erst mal nur ein Bild drin, wenn es so aussehen soll wie die untere Box funktioniert nur mein "Holzhammer-Code".

    Keine Ahnung warum, mal alles zusammen, der obere ist auskommentiert:

    // antik box, boxen Abstand über margin

    /*.box.boxred-green {

    background-color:rgb(190, 244, 164);

    padding:5px 2%;

    border: 3px solid red;

    margin-top: 10px !important;

    }*/

    .boxesContentTop .box.boxred-green:not(:first-child) {

    margin-top: 10px;

    background-color:rgb(190, 244, 164);

    padding:5px 2%;

    border: 3px solid red;

    }

    Ich werde aber noch mal beide Boxen löschen, es kann ja nicht sein, dass die jetzt unterschiedlich angezeigt werden.

    Also ich komme noch mal wieder.

    mfG. hgx

  • wenn es so aussehen soll wie die untere Box funktioniert nur mein "Holzhammer-Code".

    Keine Ahnung warum

    Vermutlich ist die Box mit dem Bild die erste Box. Und mit :not(:first-child) spricht man halt alle Boxen an, außer die erste Box. Das ist für den Abstand relevant, da sonst auch die erste Box einen Abstand nach oben hätte, was man ja vermutlich eher nicht will.

    Du könntest es z.B. einfach trennen. Hier mal als Beispiel:

    CSS
    .box.boxred-green {
        background-color: rgb(190, 244, 164);
        padding: 5px 2%;
        border: 3px solid red;
    }
    
    .boxesContentTop .box.boxred-green:not(:first-child) {
        margin-top: 10px;
    }

    So hättest du das margin bei allen Boxen außer bei der ersten Box und den Rest hättest du bei allen Boxen.

  • Hallo ReeN,

    ja danke, dies hat ohne !important; funktioniert. Allerdings wenn ich das Bild nicht über "Media" ins Textfeld einfüge, sondern über "Box Bild" dann habe ich zur Borderkannte einen "riesen" Abstand (Innenabstand). Aber ich muss das ja so nicht unbedingt machen. Warum das so ist keine Ahnung, vermute man müßte wohl noch Code zum Innenabstand hinzu geben.

    mfG. hgx

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!