Frage Fragenkatalog

[Misanthrop]

Hallo liebe Forumer,
ich komme bei bestimmten Punkten einfach nicht weiter , obwohl sie villeicht als einfach erscheinen:

a) Überschrift
Ausgangspunkt ist eine zweiteilige Überschrift , rechts (am Rand) mein Namen , ganz links (am Rand) eine Beschreibung worum es auf der Seite geht.

Mein html:

<header class="header-banner">
    <h1>Meine Seite<span class="nur-vorlesen">,</span></h1><h1>Raum&shy;installa&shy;tionen</h1>
</header>

@media all {
    .header-banner {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: baseline;
                margin: 0 0 0.3rem 0; padding: 0;
                white-space: nowrap;
    }
}

@media all and (max-width: 50em) {
    .header-banner {
            flex-direction: column;
            align-items: flex-start;
            margin: 0 0 0.7rem 0; padding: 0;
     }
}
@media all and (max-width: 25.625em) {
     .header-banner {
            white-space: normal;
     }
}

Bei max-width: 50em soll also die Websitebeschreibung unter meinen Namen stehen. Wird bei jedem Browser so gemacht.

Bei ganz schmalen Bildschirmfenster soll bei max-width: 25.625em Mein Name und die Bildschirmbeschreibung (die Wörter) umbrechen (in die nächste Zeile) also getrennt werden, je nachdem
die Bildschirmbreite halt ist, aber momentan stehen sowohl Mein Name und die Bildschirmbeschreibung über dem <header> nach rechts seitlich heraus, es überrragt header.



Wie bekomme ich es hin das eben, sowohl Mein Name und die Bildschirmbeschreibung eben alle Wörter umbrechen und somit getrennt werden und sich dem header anpassen?
Ich war der Meinung indem ich white-space: normal; setze funktioniert es so.
Aber dem ist nicht so. Was ist da falsch?


b) Sprungmenü
Unter der Überschrift habe ich eine Art Sprungmenü zu den Punkten



Mein html:

<aside id="sitemap_top" aria-labelledby="top-sitenav-label">
                    <h6 id="top-sitenav-label" class="visually-hidden">Site-Navigation</h6>
                    <div>
                        <ul>
                            <li><p>Aktuell</p></li>
                        </ul>
                        <ul class="sitemap">
                            <li><a href="#aktuelles01">26-08-2020 <span>18:00 Uhr</span></a></li>
                            <li><a href="#aktuelles02">26-08-2020 <span>16:30 Uhr</span></a></li>
                            <li><a href="#aktuelles03">26-08-2020 <span>11:20 Uhr</span></a></li>
                            <li><a href="#aktuelles04">25-08-2020 <span>13:45 Uhr</span></a></li>
                            <li><a href="#aktuelles05">25-08-2020 <span>10:10 Uhr</span></a></li>
                            <li><a href="#aktuelles06">24-08-2020 <span>15:45 Uhr</span></a></li>
                            <li><a href="#aktuelles07">23-08-2020 <span>18:25 Uhr</span></a></li>
                            <li><a href="#aktuelles08">22-08-2020 <span>10:30 Uhr</span></a></li>
                            <li><a href="#aktuelles09">20-08-2020 <span>16:45 Uhr</span></a></li>
                            <li><a href="#aktuelles10">19-08-2020 <span>09:30 Uhr</span></a></li>
                            <li><a href="#aktuelles11">15-08-2020 <span>08:45 Uhr</span></a></li>
                        </ul>
                    </div>
                </aside>

aside {                  
            margin: 0 auto;
            padding: 0.4rem 0;
        }
        #sitemap_top {
            max-width: 40rem;
        }
        #sitemap_top > div {
            margin: 0;
            padding: 0.35rem;
            border: 2px solid LightGray;
            border-radius: 1rem;                              
        }
   
        #sitemap_top > div ul:first-child {
            margin: 0;
            padding: 0.15rem 0 0.3rem 0;
            text-align: center;                          
         }
        .sitemap {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin: 0;
            padding: 0;
        }
        .sitemap li {
            flex-basis: 33.333%;
            margin: 0;
            padding: 0;
        }
        .sitemap li:nth-child(4n) {
            justify-content: flex-start;
        }
        .sitemap li > a {
            margin: 0;
            padding: 0 0.15rem;
        }
   
@media all and (max-width: 59.375em) {
        #sitemap_top {
            max-width: 26.5rem;
        }
        .sitemap li {
            flex-basis: 50%;
            margin: 0;
            padding: 0;
        }
        .sitemap li:nth-child(3n) {
            justify-content: flex-start;
        }
    }
    @media all and (max-width: 40.625em) {
        #sitemap_top {
            max-width: 14rem;
        }
        .sitemap li {
            flex-basis: 100%;
            margin: 0;
            padding: 0;
        }
        .sitemap li:nth-child(2n) {
            justify-content: flex-start;
        }
    }
    @media all and (max-width: 21.875em) {
        #sitemap_top {
            max-width: 100%;
        }
        .sitemap li {
            flex-basis: 100%;
            margin: 0;
            padding: 0.25rem 0;
        }
        .sitemap li > a span::before{
            content: "\A";
            white-space: pre;
        }
    }
    }

Bei breiten Bildschirmfenstern ist die Tabelle 3 - Spaltig , bei max-width: 59.375em wird die Tabelle 2 - Spaltig und bei max-width: 40.625em eben ein-Spaltig.

Bei ganz schmalen Bildschirmfenstern wandert bei max-width: 21.875em die Uhrzeit in die nächste Zeile durch
content: "\A";
white-space: pre;

Anders konnte ich mich da nicht behelfen!

Insgesamt, kann man es so mit den individuellen Spalten 3teilig , 2teilg eine-Spalte, kann man es so machen, ist dies richtig oder gibt es eine bessere , elegantere Lösung?

Es gebt mir da um den Stil!

c) Anordnung der CSS Media Queries

Wie ordnet man die Media Queries an, direkt unter Beispielsweise dem jeweiligen Abschnitt von <header> <aside> <article> oder werden die Queries
alle ganz unten im html gesammelt, geordnet nach den Größen von max-width: xx [...] Wie macht man es richtig?

Danke für eure Antworten.

SeufZ

 

[MrMurphy]

Zu den ersten beiden Fragen: Den IE10 heutzutage noch zu berücksichtigen ist genau so unsinnig wie den IE9, den IE8, den IE7, den IE6, ... Wenn du mit dem originalen IE10 surfen würdest wüsstest du auch warum. Der funktioniert nämlich anders als der virtuelle, in den du bei aktuelleren IE umschalten kannst. Wer den IE10 für irgendwelche speziellen Aufgaben angeblich noch benutzen muss verwendet für das sonstige Surfen mit Sicherheit einen zusätzlichen Browser wie Chrome.

Zur 3. Frage: Das ist vollkommen egal. Entscheidend ist das sich der Webseitenersteller in seinem Quelltext gut zurechtfindet.

 

[Misanthrop]

Danke MrMurphy, aber gerade die Fragen a) & b) sind mir wichtig!
zu a) Ich mag es nicht wenn das einfach so übersteht. Was kann man da machen? Woran liegt es?
zu b) Wollte ich nur wissen ob man es so machen kann? Ganz einfach!
Kannst Du mir das bitte beantworten?

 

[Misanthrop]

Vielen lieben Dank!
zu a) Ich weiß jetzt wo es hakte, und warum "Mein Name" und das lange Wort "Rauminstallationen"
(bei einem schmalen Bildschirmfenster) , beides eben nicht umgebrochen wurde und
(sich) in die nächste Zeile verteilte.
Den Überschriften "h1" fehlte eine Breitenangabe, ich habe da width: 100%; zugefügt und es funktioniert.
Also nochmal komplett:

.header-banner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: baseline;
            margin: 0 0 0.3rem 0; padding: 0;
        }
        .header-banner h1 {
            white-space: nowrap;
        }
    }
  
    @media all and (max-width: 50em) {
        .header-banner {
            flex-direction: column;
            align-items: flex-start;
            margin: 0 0 0.7rem 0; padding: 0;
        }
        .header-banner h1 {         
            width: 100%
        }
    }
    @media all and (max-width: 28.125em) {
        .header-banner h1 {         
            white-space: normal;
        }
    }

So wird jetzt beides genauso umgebrochen wie gewünscht:
<h1>
Mein
Name
</h1>

<h1>
Raum-
installa-
tionen
</h1>

Beide <h1> benötigten einfach nur eine Breite sonst rutschten beide Texte über den Rand
von <header> hinaus.

Also "gelöst"!


zu b) Gut, es funktioniert schon so, wenn man (jetzt am Beispiel bei einem 3 spatigen Layout) wenn man ihm sagt : Das 4te Element wieder mit flex-start; (vorne) anfangen. Alle Browser machen es auch genau so, nur ist dies wohl sehr umständlich, ja,

Da ist die grid Methode sehr elegant dageegen.
Ich habe nun entschieden beides einzusetzen: Mit @supports (display: grid) {} und zusätzlich eine flex-Version.
Wie auch immer. Doch wie geht das vonstatten.
Schreibe ich erst alles für grid und darunter für flex-box, wird dies auch in dieser Reihenfolge eingehalten.
Wenn "grid Möglich" dann... ansonsten mach flex-box.... so in der Art? Läuft das so?

Vielen Dank!

Gruß aus Münster , der einsiedler

 

[Misanthrop]

Guten Abend,

ich habe eine 4te Frage:
Zur Wort/Silbentrennung allgemein:
Viele a-Tags (Links) und p Sätze sind ziemlich lang. Momentan habe ich deshalb folgendes eingebaut:

a, p, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    }

Ist es so richtig? Ist es dann für a & p wirksam und wird dies so angewandt?

Gruß der einsiedelnde