Frage Fragenkatalog

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Misanthrop

Neues Mitglied
21 September 2016
27
0
1
50
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:

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

CSS:
@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.

screen2.png

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

screen1.jpg

Mein html:

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>

CSS:
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
 
Zuletzt bearbeitet:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.564
232
63
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

Neues Mitglied
21 September 2016
27
0
1
50
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?
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Das bei a) habe ich getestet und bei mir funktioniert es einwandfrei. Oder möchtest du, dass alle Umbrüche gleichzeitig erfolgen? Dann müsstest Du wohl die einzelnen Teile in getrennte Container packen und mit Flex und Mediaquery auf vertikal umschalten.
 
  • Like
Reaktionen: Misanthrop

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Zu b)
Ob deine Lösung richtig oder falsch ist, darüber möchte ich nicht urteilen, aber es geht auf jeden Fall mit Gridlayout einfacher: Mit repeat und passenden minmax-Werten werden die Elemente auch ohne Mediaqueries optimal in Spalten aufgeteilt.:
CSS:
        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>h6 {
            padding: 0.15rem 0 0.3rem 0;
            text-align: center;
        }

        ul.sitemap {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: grid;
            /* Mit repeat und autofit regelt Gridlayout die
            Anordnung der Items so dass es optimal ist */
            grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        }

        ul.sitemap li {
            text-align: center;
        }

        ul.sitemap li span {
            /* Zeilenumbruch in dem span mit der Uhrzeit unterbinden */
            white-space: nowrap;
        }

        /* Bei ganz schmalem Bildschirm setzen wir die Spaltenbreite
        auf 1fr, so dass der Platz genau ausgefüllt wird */
        @media all and (max-width: 21.875em) {
            ul.sitemap {
                grid-template-columns: 1fr;
            }
        }
HTML:
    <aside id="sitemap_top" aria-labelledby="top-sitenav-label">
        <h6 id="top-sitenav-label" class="visually-hidden">Site-Navigation</h6>
        <div>
            <h6>Aktuell</h6>
            <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>
 
  • Like
Reaktionen: Misanthrop

Misanthrop

Neues Mitglied
21 September 2016
27
0
1
50
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:

CSS:
.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

Neues Mitglied
21 September 2016
27
0
1
50
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:

CSS:
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
 
Werbung:

Neueste Beiträge