[ballibum]

Liebes Forum,
erst einmal wünsche ich euch allen einen schönen dritten Advent und eine tolle Weihnachtszeit. Hier kann der Spaß in Realität angeschaut werden, es geht um die Funktionsbutton für die Karte.

Nun aber zu meiner Aufgabe, ich habe ein HTML Gerüst:

<div class="ol-viewport" data-view="68" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">
    <canvas class="ol-unselectable" style="width: 100%; height: 100%; display: block;" width="150" height="350"></canvas>
    <div class="ol-overlaycontainer"></div>
    <div class="ol-overlaycontainer-stopevent">
        <div class="ol-unselectable ol-control">
            <button>+</button>
        </div>
        <div class="ol-unselectable ol-control">
            <button>-</button>
        </div>
        <div class="ol-unselectable ol-control">
            <button>N</button>
        </div>
        <div class="ol-full-screen ol-unselectable ol-control ">
            <button class="ol-full-screen-false" type="button" title="Toggle full-screen">⤢</button>
        </div>
        <div class="ol-unselectable ol-control">
            <button>+</button>
        </div>
        <div class="ol-unselectable ol-control">
            <button>-</button>
        </div>
        <div class="ol-zoom-extent ol-unselectable ol-control">
            <button type="button" title="Fit to extent">E</button>
        </div>
        <div class="ol-full-screen ol-unselectable ol-control ">
            <button class="ol-full-screen-false" type="button" title="Toggle full-screen">⤢</button>
        </div>
        <div class="ol-unselectable ol-control">
            <button>N</button>
        </div>
        <div class="ol-full-screen ol-unselectable ol-control ">
            <button class="ol-full-screen-false" type="button" title="Toggle full-screen">⤢</button>
        </div>
        <div class="ol-unselectable ol-control">
            <button>N</button>
        </div>
        <div class="ol-zoom-extent ol-unselectable ol-control">
            <button type="button" title="Fit to extent">E</button>
        </div>
    </div>
</div>

Meine CSS Befehle lauten dabei:

.ol-viewport {
    position:relative;
}
.ol-unselectable,
.ol-overlaycontainer-stopevent{
    position:absolute;
    
}

.ol-overlaycontainer-stopevent {
    height: 100%;
    /*width: 35px !important;*/
}

.ol-control {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, .4);
    position:relative !important;
}

.ol-control button:hover {
    background-color: rgba(255, 255, 255, .2)
}


.ol-control button {
    display: inline;
    color: #fff;
    font-size: 1.14em;
    font-weight: 700;
    text-align: center;
    height:100%;
    width: 100%;
    line-height: .4em;
    background-color: rgba(0, 60, 136, .5);
    border-radius: 0;
    border: none;
}
.ol-unselectable,
.ol-viewport {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

Damit habe ich es erreicht, dass die Buttons und die dazugehörigen DIVs untereinander angezeigt werden. Die Höhe des Elternelements variiert. Nun möchte ich gerne, dass wenn die Höhe aufgebraucht ist eine dritte und Notfalls eine vierte bis Xte Spalte erzeugt wird. Leider habe ich keinen Ansatzpunkt wie ich da hinkommen soll.

vielen Dank für eure Hilfe.

[MrMurphy]

Hallo

Mit deinem Quellcode erhalte ich leider nur eine weiße (= leere) Seite.

Grundsätzlich musst du dem Elternelement eine feste Höhe (height) mit auf den Weg geben. Außerdem wird dem Elternelement mittels Flexbox vorgegeben, wie die Kindelemente sich verteilen sollen.

Die Kindelemente benötigen eine feste Breite (width), die ausreicht mehrere nebeneinander anzuordnen.

Also zu diesem HTML-Quelltext

      <article class="uebersicht">
         <section>
            <h2>01 Babisnauer Pappel</h2>
            <p>Die Babisnauer Pappel ist eine Schwarz-Pappel (Populus nigra) bei Babisnau, einem Ortsteil der Gemeinde Kreischa in Sachsen.</p>
         </section>
         <section>
            <h2>02 Drei Zinnen</h2>
            <p>Die Drei Zinnen (italienisch Tre Cime di Lavaredo) sind ein markanter Gebirgsstock in den Sextner Dolomiten an der Grenze zwischen den italienischen Provinzen Belluno im Süden und Südtirol im Norden.</p>
         </section>
         <section>
            <h2>03 Ur- und frühgeschichtliche Sammlung der Universität Jena</h2>
            <p>Die Ur- und Frühgeschichtliche Sammlung der Universität Jena bildet eine der ältesten und größten ihrer Art im Besitz einer deutschen Universität. Sie dient in erster Linie als Lehr- und Studiensammlung für Studenten und Fachleute.</p>
         </section>
         <section>
            <h2>04 North York Moors</h2>
            <p>Die North York Moors sind eine Hochebene in North Yorkshire im Nordosten Englands.</p>
         </section>
         <section>
            <h2>05 Tiefwerder Wiesen</h2>
            <p>Die Tiefwerder-Wiesen sind ein Rest der ehemaligen Auenlandschaft in der Havel-/Spreetalniederung auf dem Berliner Tiefwerder und im Niederungsbereich der Flusshalbinsel Pichelswerder im Ortsteil Wilhelmstadt des Bezirks Spandau.</p>
         </section>
         <section>
            <h2>06 Kittelsthaler Tropfsteinhöhle</h2>
            <p>Die Kittelsthaler Tropfsteinhöhle ist eine Höhle im Thüringer Wald.</p>
         </section>
      </article>

zum Beispiel dieses CSS

      .uebersicht {
         background-color: gold;
         height: 1150px;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         align-content: flex-start;
      }
      .uebersicht section {
         background-color: white;
         width: 20rem;
         margin: 0.5rem;
      }

Gruss

MrMurphy