Beiträge von Sempervivum

Willkommen zurück!

Das Problem lässt sich bestimmt lösen aber Du musst dazu das CSS posten, das Du bisher hast.

PS:

Zitat

Von Hand das Datum in das Iso-Format YYYY-DD-MM umwandeln

Alternativ kann man auch die numerischen Werte ermitteln und damit das Date-Objekt sectionDate erzeugen.

Tag und Monat ziehst Du ja schon korrekt heraus:

02. Dezember

Nur ist das kein Format, das für das Date-Objekt verständlich ist.

Es gibt zwei Wege, das Problem zu lösen:

Von Hand das Datum in das Iso-Format YYYY-DD-MM umwandeln

oder

moment.js verwenden, um das Datum zu parsen:

Moment.js | Docs

Es gibt evtl. noch eine bessere Möglichkeit, die Du prüfen kannst:

Das Datum im ISO-Format als Data-Attribut in den Sections ablegen. Wenn die maschinell erzeugt werden, ist das wahrscheinlich machbar.

Meine Rede, siehe #28

Zitat

Plan wäre die h1 in der section auszurichten oben, rechts oder links egal. Deshalb habe ich ihr display-flex mitgegeben. Ob das richtig war ist fraglich.

Dass sie nicht oben ist, liegt daran, dass der Container #my-new-section von main>section justify-content: center; erbt. Ändere ich es auf start rutscht die Überschrift sofort nach oben.

Zitat

Wie bekomme ich horizontal Abstand zwischen die boxen? mit row-gab hatte ich kein erfolg.

row-gap musst Du beim Container notieren, tue ich das, funktioniert es.

#my-new-section {
    /* flex: 1; */
    flex-direction: column;
    background-color: lightsalmon;
    border: 20px solid blue;
    row-gap: 5px;
    justify-content: start;
}

flex: 1; macht hier keinen Sinn, da wir den Container ja nicht flexibel wollen sondern er soll eine feste Höhe haben entspr. der des Browserfensters.

Außerdem beobachte ich jetzt, wenn ich rechts die Entwicklerwerkzeuge offen habe, dass einige der Boxen horizontal über den Container hinaus ragen. Das liegt daran, das Du ihnen eine feste Breite gegeben hast. Damit verschenkst Du den eigentlichen Vorteil von Flexlayout, dass sich die Elemente an das Browserfenster anpassen. Deaktiviere ich die Breitenangabe schrumpfen die Boxen in der Breite und orientieren sich am Inhalt.

#my-new-section .box1 {
    display: flex;
    /* width: 250px; */
    height: 80px;
    background-color: pink;
}

Dadurch werden sie dann sehr schmal, weil nichts drin steht als box1, box2, ... aber das liegt daran, dass das eine Testversion ist ohne ausgefüllte Inhalte.

Klar, durch Post #19 ist ja die ganze Verwirrung entstanden, dass Du glaubtest, es geht nur, indem Du das HTML umorganisierst. Spricht nichts dagegen, damit weiter zu machen.

Du willst diese Überschrift im neuen Container links ausrichten, nicht wahr? Dazu brauchst Du align-items: flex-start; beim Flex-Container #my-new-section weil Du die Flex-Items durch flex-direction: row; untereinander anordnest. Da wird auch sofort offensichtlich, warum es flex-start heißt statt left: Je nach Anordnung bewirkt das mal Ausrichtung left oder top, start ist dagegen ein Begriff, der allgemein passt. Alternativ kannst Du auch align-self bei der Überschrift bzw. dem Flex-Item verwenden, das wirkt dann, wie der Name sagt, nur auf diese Überschrift:

#my-new-section>h1 {
    color: red;
    align-self: start;
}

Guten Morgen Emess ,

dein letztes Posting #20 verstehe ich so, dass Du Probleme siehst, bestimmte Elemente anzusprechen bei der momentanen Struktur deiner Seite. Diese Probleme sehe ich nicht. Gib doch mal ein oder zwei Beispiele wo Du meinst, dass es nicht geht.

I. allg. sollten die Elemente so angeordnet werden wie es von der Semantik her geboten ist. Es gibt einige Ausnahmen durch die Beschränkungen von CSS aber die sehe ich bei deinem Layout ebenfalls nicht.

Zitat

Mein Idee wäre die  main komplett zu entfernen und dem Header eine id zb. #kopf. Also <header id="kopf">

Die Notwendigkeit sehe ich nicht. Das ist ja ein Vorteil, dass man bei semantischen Tag in gewissem Umfang auf Klassen und IDs verzichten kann. So weit ich das überblicke, hast Du im Moment nur einen Header und dann ist ein Selektor nur mit dem Tagnamen ausreichend:

header {
    /* Mach was mit dem Header */
}

Anders kann es aussehen, wenn Du auch in deinem Modal header und footer verwenden möchtest. Auch dann kann man es wahrscheinlich über Kind- oder Nachfahrenselektoren regeln aber zur Klarheit kann eine Klasse oder ID angebracht sein.

Auf dem Bild sind die Boxen ja einfach nebeneinander angeordnet.

Ich habe mich mal an diesem orientiert:

Zitat

Die Boxen sollen rein ich sag einfach mal

box1 box2

box3

box 4

box 5 - 7

und das wieder im Seiteninspektor eingerichtet.

<section id="my-new-section">

  <h1>Übung</h1>
    <div class="horizontal">
  <div class="box1">Box1</div>
  <div class="box1">Box2</div>
        </div>
  <div class="box1">Box3</div>
  <div class="box1">Box4</div>
        <div class="horizontal">
  <div class="box1">Box5</div>
  <div class="box1">Box6</div>
  <div class="box1">Box7</div>
    </div>
</section>

Damit das Styling der Boxen auch wirkt, wenn diese in einem weiteren Container stecken, musst Du statt des Pfeils ">" jetzt ein Leerzeichen im Selektor verwenden:

#my-new-section .box1 {
    display: column; /* <-- das gibt es nicht, der Browser erkennt es als fehlerhaft. */
    /* align-self: flex-start; */
    margin-left: 30px;
    width: 250px;
    height: 80px;
    row-gap: 5px;
    background-color: pink;
}

Und dann die Boxen in den beiden Wrappern mit der Klasse "horizontal" nebeneinander anordnen:

.horizontal {
    display: flex;
}

Ich hoffe, ich habe nichts vergessen.

Dann sieht es so aus:

pasted-from-clipboard.png

Dass die beiden divs nicht sichtbar sind, liegt daran, dass allgemein bei Section die Regel align-items: center; steht und da sie keinen Inhalt haben ist die Breite 0. Tu einen Inhalt hinein oder verwende align-items: stretch; spezifisch für diese Section.

... auch das CSS in 2. ist richtig.

Zitat

1. Sollte da jetzt nicht eine lachfarbene Fläche mit einen 2px blauen Rahmen zusehen sein? Ist es aber nicht!

Anscheinend hast Du das HTML oben im Screenshot nicht bemerkt:

<section id="my-new-section">
    <div></div>
    <div></div>
</section>

Die beiden divs müssen drin sein, damit das zu sehen ist.

Zu 3.: Das CSS ist vollkommen richtig. Ein Selektor kann sowohl Tagnamen als auch Klassen als auch IDs enthalten (und noch mehr).

Zitat

Zweck der Sache ist: Das ich jede section für sich stylen kann ohne, dass es Auswirkung auf die gesamte Seite (css) hat.

Du hast ja den einzelnen Sections schon jeweils eine ID gegeben und ich habe für die neue "my-new-section" verwendet. Wenn Du die benutzt, kannst Du gezielt die Elemente ansprechen, die in der betr. Section liegen und alle anderen bleiben außen vor:

main>section#my-new-section>h1 {
    margin: 2rem 0;
}

Wobei Du das main>section auch weg lassen kannst, weil es die ID ja nur ein Mal gibt.

Ich habe das mal im Seiteninspektor eingerichtet:

pasted-from-clipboard.png

Und für die Container innerhalb dann dieses CSS:

#my-new-section>div {
    flex: 1;
    background-color: lightsalmon;
    border: 2px solid blue;
}

Versuche es so und beobachte, wie es aussieht.

Ich hoffe, ich verstehe das richtig: Du willst, so wie in der Section "Über mich" einen weiteren Container einbauen und der soll zentriert sein? In dem Fall hättest Du ja statt des body die Section für die Unterseite und müsstest darin einen weiteren Container, z. B. ein div, einbauen und den zentrieren.

Allerdings kannst Du das dann wahrscheinlich auch, ohne diesen Zusatzcontainer, durch ein einfaches Padding für die Section erreichen (wenn ich an dein Bild oben denke).

Das ist eine Standardaufgabe und mit Flex sehr einfach zu machen: Du brauchst nur align-items: center; zusätzlich zum display:flex; für body.

Ich rate mal: Du willst die Section zentrieren, und zwar auch vertikal?

Zitat

Neugier und Altersspieltrieb

Das war auch bei mir eine Antriebsfeder

Es ist ja so, dass man so gut wie alle HTML-Elemente nach Belieben stylen kann, Farben, Ränder, Schatten, und und und. Das Select macht hier eine Ausnahme und häufig kommt die Frage auf, wie man es denn dort macht. Und es ist häufig so, dass man sich ein einheitliches und individuelles Erscheinungsbild wünscht und auch dabei steht einem dann das Select im Wege. Außerdem ist sein Erscheinungsbild vom Browser abhängig, noch etwas, das häufig unerwünscht ist.

Auch die Browserhersteller haben dieses Problem erkannt, wie Du in Posting #3 sehen kannst. Aber wahrscheinlich wird noch Zeit ins Land gehen, bis das etabliert ist.

Auslöser waren dann zwei Fragen in einem anderen Forum.

Update:

• Bei den Radiobuttons fehlten die Namen, fügt man sie hinzu, kann man problemlos mit den Pfeiltasten navigieren. Allerdings funktioniert das nur, wenn sie nicht durch das Attribute "hidden" unsichtbar gemacht werden sondern durch ein Klasse, die die Breite auf 0 setzt.
• Klasse "keep open" hinzu gefügt, diese hält das Select nach Auswahl einer Option sichtbar.
• Eventlistener nicht für window sondern für das aktuelle Select.

<!DOCTYPE html>
<html>

<head>
    <title>Stylable Select With Radiobuttons</title>
    <style>
        /* Begin stylable select */
        stylable-select {
            position: relative;
            display: inline-block;
            font-family: Arial, Helvetica, sans-serif;
        }

        stylable-select stylable-select-options {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: white;
        }

        stylable-select stylable-select-options.hidden {
            height: 0;
            overflow: hidden;
        }

        stylable-select input[type="radio"].hidden {
            width: 0;
            overflow: hidden;
        }

        stylable-select stylable-select-out::after {
            content: '▼';
        }

        stylable-select stylable-select-out {
            min-width: 8em;
            display: flex;
            justify-content: space-between;
            border: 1px solid blue;
            padding-left: 0.2em;
        }

        stylable-select stylable-select-options label {
            border: 1px solid lightblue;

        }

        stylable-select label.selected {
            background-color: lightgray;
        }

        /* End stylable select */

        /* Sample for custom styles: */
        stylable-select stylable-select-options label {
            border: 2px solid darkgreen;
            border-radius: 2px;
            background-color: lightgreen;
        }

        stylable-select stylable-select-options label::before {
            content: '•';
            margin-left: 0.2em;
            margin-right: 0.2em;
        }
    </style>
    <script>
        class StylableSelect extends HTMLElement {
            constructor() {
                super();
            }
            connectedCallback() {
                this.addEventListener('click', event => {
                    // Was the head of the select clicked?
                    if (event.target.tagName.toLowerCase() == 'stylable-select-out') {
                        // Give focus to the checked radiobutton again
                        const
                            rbChecked = this.querySelector('input[type="radio"]:checked')
                        if (rbChecked) rbChecked.focus();

                        /* Toggle visibility of options */
                        this.querySelector('stylable-select-options')
                            .classList.toggle('hidden');
                    }
                    // Check if the clicked element is an option
                    // (only options have a label)
                    const
                        lbl = event.target.closest('label');
                    if (lbl) {
                        // Remove class "selected" at that label,
                        // that had it previously
                        const
                            selectedLabel = this.querySelector('label.selected');
                        if (selectedLabel) selectedLabel.classList.remove('selected');

                        // Add class "selected" at clicked label
                        lbl.classList.add('selected');

                        // Transfer text to output
                        this.querySelector('stylable-select-out span').textContent
                            = this.querySelector('label.selected').textContent;
                        if (!this.classList.contains('keep-open')) {
                            this.querySelector('stylable-select-options').classList.add('hidden');
                        }

                        // Give focus to clicked radio button
                        lbl.querySelector('input').focus();
                    }
                });
            }
            getValueAndText() {
                const
                    out = this.querySelector('stylable-select-out'),
                    text = out.querySelector('span').textContent,
                    value = this.querySelector('input:checked').value;
                return { value: value, text: text };
            }
        }
        customElements.define("stylable-select", StylableSelect);
    </script>
</head>

<body>
    <button id="btn-out-val-1">Output Value 1</button>
    <button id="btn-out-val-2">Output Value 1</button>

    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <stylable-select id="select1">
        <stylable-select-out>
            <span>Select an option</span>
        </stylable-select-out>
        <stylable-select-options class="hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" name="select1-rb" value="opt11" class="hidden">Option 1-1</label>
            <label><input type="radio" name="select1-rb" value="opt12" class="hidden">Option 1-2</label>
            <label><input type="radio" name="select1-rb" value="opt13" class="hidden">Option 1-3</label>
            <label><input type="radio" name="select1-rb" value="opt14" class="hidden">Option 1-4</label>
        </stylable-select-options>
    </stylable-select>
    <!-- End stylable select -->

    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <stylable-select id="select2" class="keep-open">
        <stylable-select-out>
            <span>Select an option</span>
        </stylable-select-out>
        <stylable-select-options class="hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" name="select2-rb" value="opt21" class="hidden">Option 2-1</label>
            <label><input type="radio" name="select2-rb" value="opt22" class="hidden">Option 2-2</label>
            <label><input type="radio" name="select2-rb" value="opt23" class="hidden">Option 2-3</label>
            <label><input type="radio" name="select2-rb" value="opt24" class="hidden">Option 2-4</label>
        </stylable-select-options>
    </stylable-select>
    <!-- End stylable select -->

    <script>
        document.getElementById('btn-out-val-1').addEventListener('click', event => {
            console.log(document.getElementById('select1').getValueAndText());
        });
        document.getElementById('btn-out-val-2').addEventListener('click', event => {
            console.log(document.getElementById('select2').getValueAndText());
        });
    </script>
</body>

</html>

PS: Das mit den Hoch- und Runterpfeilen würde in die Rubrik "Zugänglichkeit" fallen, nicht wahr?