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:
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 
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.
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.
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:
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:
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.
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).
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:
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?
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:
<!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?
Ich habe das jetzt auf Custom-Elemente und connectedCallback umgestellt.
Funktioniert einwandfrei und das JS ist sogar ein wenig einfacher geworden.
Cool was man so alles machen und lernen kann.
<!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 {
display: none;
}
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 */
/* 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() {
// Always call super first in constructor
super();
}
connectedCallback() {
window.addEventListener('click', event => {
// Prüfen ob das geklickte Element ein Kind dieses Elementes ist */
const
select = event.target.closest('stylable-select');
if (select == this) {
/* Wurde der Kopf des Selects geklickt? */
if (event.target.tagName.toLowerCase() == 'stylable-select-out') {
/* Sichtbarkeit der Optionen umschalten */
this.querySelector('stylable-select-options')
.classList.toggle('hidden');
}
// Prüfen ob das geklickte Element eine Option ist
// (nur die Optionen haben ein Label)
const
lbl = event.target.closest('label');
if (lbl) {
// Klasse "selected" löschen bei dem Label,
// das sie bisher hatte
const
selectedLabel = this.querySelector('label.selected');
if (selectedLabel) selectedLabel.classList.remove('selected');
// Beim geklickten Label die Klasse "selected" hinzu fügen
lbl.classList.add('selected');
// Wert und Text in die Ausgabefelder übertragen
this.querySelector('input[name]').value
= this.querySelector('label.selected input').value;
this.querySelector('stylable-select-out span').textContent
= this.querySelector('label.selected').textContent;
this.querySelector('stylable-select-options').classList.add('hidden');
}
}
});
}
getValueAndText() {
const
out = this.querySelector('stylable-select-out'),
text = out.querySelector('span').textContent,
value = out.querySelector('input').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>
<!-- Modify name of input -->
<input name="select1" value="" hidden>
</stylable-select-out>
<stylable-select-options class="hidden">
<!-- Modify options or labels containing radio buttons -->
<label><input type="radio" value="opt11" hidden>Option 1-1</label>
<label><input type="radio" value="opt12" hidden>Option 1-2</label>
<label><input type="radio" value="opt13" hidden>Option 1-3</label>
<label><input type="radio" value="opt14" hidden>Option 1-4</label>
</stylable-select-options>
</stylable-select>
<!-- End stylable select -->
<!-- Begin stylable select -->
<!-- Modify ID -->
<stylable-select id="select2">
<stylable-select-out>
<span>Select an option</span>
<!-- Modify name of input -->
<input name="select2" value="" hidden>
</stylable-select-out>
<stylable-select-options class="hidden">
<!-- Modify options or labels containing radio buttons -->
<label><input type="radio" value="opt21" hidden>Option 2-1</label>
<label><input type="radio" value="opt22" hidden>Option 2-2</label>
<label><input type="radio" value="opt23" hidden>Option 2-3</label>
<label><input type="radio" value="opt24" 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>Danke für die Hinweise, ein Custom-Element mit den Callbacks scheint eine coole Sache zu sein, das werde ich mal austesten.