Anordnung von Elementen im <footer>

  • Hallo liebe Forumer,

    ich habe folgendes Problem, und zwar mit dem footer.

    Bei mir sieht er so aus:



    Code
    1. <footer>
    2. <p>Alle Inhalte Copyright 2019 Mein Name</p>
    3. <a href="#top">zum Seitenanfang</a>
    4. </footer>



    Bei einem breiten Bildschirmfenster sind <p> und <a> mit

    Code
    1. display: flex; justify-content: space-between;


    voneinander rechts und links angeordnet.


    Nun möchte ich bei einem schmaleren Bildschirmfenster

    Code
    1. @media all and (max-width: 59.375em) {


    das eben halt <p> und <a> untereinander angeordnet werden und auch anständig umgebrochen werden wenn die Textläge zu lang wird.




    Doch mit dem CSS oben im Quellcode den ich für

    Code
    1. @media all and (max-width: 59.375em) {


    habe funktioniert es nicht so ganz, im Firefox sieht es korrekt aus in Chrome und Opera NICHT.


    Ich frage euch, was mache ich hier falsch?


    Nächtliche Grüße der misanthrop

  • Zitat

    Ich frage euch, was mache ich hier falsch?

    Keine Ahnung. Mit Fehlerbeschreibungen wie


    Zitat

    anständig umgebrochen


    und


    Zitat

    funktioniert es nicht so ganz


    kann außer dir nämlich niemand etwas anfangen.


    Firefox, Chrome und Opera zeigen deinen Quelltext gleich an, auch wenn die Fensterbreiten geändert werden. Es ist also wahrscheinlich dass du uns zusätzlich zur unklaren Fragestellung noch entscheidendes CSS vorenthältst.


    Anständig ist im HTML und CSS auch auf Blocksatz zu verzichten. Im professionellen Bereich werden bei Blocksatz alle Abstände angepasst, auch die zwischen jedem einzelnen Buchstaben. Und zwar nach bestimmten Regeln, also nicht einfach der gleiche Abstand zwischen jeden Buchstaben. Dadurch bleibt der Text flüssig lesbar und die Abstände sehen gefällig aus.


    Bei HTML / CSS werden jedoch nur die Leerzeichen für den Blocksatz angepasst. Das sieht grauselig aus und läßt sich nur schwer lesen.


    Du willst auch viel zu viel bestimmen. Dadurch musst du deine eigenen CSS-Angaben unnötigerweise immer wieder überschreiben und anpassen. Du machst dir nur unnötig Arbeit und verschwendet deine Zeit. Lass die Browser machen was sie können, die können viel. Und du kannst deine Zeit sinnvoll nutzen.


    Für mich sollten bei einem Zeilenumbruch wie in diesem Beispiel (gilt nicht für Fließtexte) Namen nicht getrennt werden. Zudem macht ein Bindestrich vor dem Namen selbst diesen kurzen Text besser lesbar. Der Bindestrich wiederum sollte auch bei einem Zeilenumbruch (wie geschrieben für ein Beispiel wie dieses) nicht vom vorherigen Wort getrennt werden. Den Rest macht der Browser mit ein paar wenigen CSS-Angaben.


    Das funktioniert bei mir im Firefox, Chrome, Opera, IE11 + Aufwärts, und ...


    Eine für mich anständige Lösung deines Problemes sieht damit folgendermaßen aus:



    Das ganze dann statt in section in footer umzuwandeln sollte kein Problem sein.

  • Danke, was Du mir über den Zeilenumbruch gezeigt hast ist für mich auch wertvoll und interessant und kann ich auch brauchen, aber ich meine etwas anderes.

    Also: <footer> ist eine flexbox worin ich die Elemente <p> und <a> in der Zeile jeweils am Anfang und am Ende gesetzt habe , halt mit

    display: flex; justify-content: space-between;

    Klar habe ich <footer> auch ein flex-wrap: wrap; mitgegeben und eigentlich müsste so wenn das Bildschirmfenster zu schmal wird , das <a> rechts natürlich umbrechen und in die nächste Zeile gehen. Das macht es auch so NUR bleibt eben mein Text (vom <p> und das <a>) NICHT innerhalb des <footer> sondern ragt darüber hinaus, DAS ist das was ich verhindern möchte.

    Genau das selbe Problem habe ich im Header, dort bleiben <h1> und <h2> NICHT innerhalb von <header> wenn das Bildschirmfenster arg zusammengeschoben wird. Der Inhalt von <h1> <h2> <p> & <a> soll jeweils umbrechen und NICHT über seine Elemente hertausragen. DAS ist MEIN PUNKT.

    Siehe:

    Macht doch mal ein ZOOM und schiebt das Bildschirmfenster zusammen, dann kann man es am Besten sehen, mein Bestreben ist, das alles innerhalb von <header> & <footer> bleibt und nicht übberragt. Beim <header> ist es noch erkennbar, was ich meine. Ich möchte das irgendwie regulieren.


    Lieben Gruß der misanthrop

  • Dann habe ich HALLUS...


    (neuerste) chrome ZOOM 500% eng zusammengezogene Bildschirmfenster



    Opera ZOOM 300% zusammengezogene Bildschirmfenster : der <a> Link zeigt unten aus <foofer> hinaus


    Firefox : scheint zu funktionieren


    IM IE

    ZOOM links 100% ZOOM rechts 400%



    Das gefällt mir so nicht!


    Lieben Gruß der misanthrop

  • Anmerkungen:


    mein code für:


    Sieht so aus: Da habe ich zusätzlich für meine Elemente in <footer> , also <p> und <a> ein

    Code
    1. flex-direction: column;


    gesetzt das die Elemente übereinander angeordnet werden.


    Ich weiß ohne das müßte trotzalledem durch

    Code
    1. flex-wrap: wrap;


    alles "umgebrochen" werden aber dann ragt alles Text von <p> und <a> über den footer hinaus.

  • DAS prüfe ich jetzt mal gründlich alles durch.


    Habe Win7 (ich weiß, ich weiß... nicht lachen... ;o) )


    Bisher:

    Opera

    Ihre Version: 60.0.3255.70

    Opera ist auf dem neuesten Stand

    Zuletzt geprüft am Sonntag, 28. April 2019 19:30


    Google Chrome

    Google Chrome ist auf dem neuesten Stand.

    Version 74.0.3729.108 (Offizieller Build) (64-Bit)


    Aber mal gucken was es sonst noch alles gibt...

  • Hallo liebe Forumer,

    das mit dem <footer> ist, so glaube ich soweit gelöst...

    Hier war es wohl wichtig dem <footer> ein flex-wrap: nowrap; mitzugeben als auch ein display: block;

    Jetzt scheinen alle Browser es richtig darzustellen. Könnt es bitte mal nachprüfen,

    d.h. auch extrem ZOOMEN und das Bildschirmfenster zusammenziehen (auch im IE)


    Nun bearbeite ich den <header> und das ist ein wenig vertrackter.

    Dort habe ich fast das Gleiche:

    Code
    1. @media all and (max-width: 59.375em) {
    2. header {
    3. display: block;
    4. flex-direction: column;
    5. flex-wrap: nowrap;
    6. }
    7. header span {
    8. white-space: pre-line;
    9. }

    dabei sieht mein html-Konstrukt so aus:

    Code
    1. <header>
    2. <h1><span>Mein Name</span><span class="nur-vorlesen">,</span></h1><h2><span>Raum&shy;instal&shy;lati&shy;onen</span></h2>
    3. </header>


    Doch bricht er meinen Namen im <h1> (innerhalb vom <span>) alles ganz gut um, das es in die nächste Zeile rutscht und NIX übersteht,

    doch nur das <span> innerhalb von <h2> darin> reagiert darauf NICHT.

    Und ich frage mich WARUM?

    Seht selbst:


    Das was für <header> ist:

    Also klar, so leicht läßt das was innerhalb von <span> ist nicht umbrechen wegen

    Code
    1. white-space: nowrap;


    Und das versuchte ich durch

    Code
    1. header span {
    2. white-space: pre-line;
    3. }

    wieder umzukehren, das geht aber nur auf das <span> von <h1> NICHT aber auf das <span> von <h2>


    WARUM ist das SO?


    Und wie kann ich es lösen?


    Gute n8 , bis morgen


    der misanthrop

  • geht dir das um das Word Rauminstallationen ?

    Probieres doch mal mit word-break


    Ist zwar nicht das schönnste weil er das dann überall brechen tut , aber immer noch besser als überstehen.

    Code
    1. @media (max-width: 59.375em)
    2. header h2 span {
    3. word-break: break-all; // oder break-word
    4. white-space: pre-line;
    5. }

    Irgendwie gab es da noch ein Trick das er das bei den Silben trennt ( könnte auch Php, oder JS gewesen sein ) , doch da habe ich jetzt keine Zeit zu Goggeln. Mache ich gleich wenn ich vom Arzt wieder komme.

    EDIT

    Deine css ist aber auch etwas voll gepackt da muss man aber erstmal durchsteigen.

    Warum gibst du den <h2> ein display:flex; ?

    Wenn du das da wieder raus nimmst dann bricht er auch wieder um. Konnte da jetzt nix erkennen das <h2> das display:flex brauch. Doch wie gesagt es fehlt auch gerade die Zeit deine ganze Css durch zukucken wozu was da ist. usw.

  • Bisher ist es so das Chrome, Opera und der IE den Inhalt von <h2> nicht umbrechen.

    Ich bin irgendwie gewillt diese Überschrit anders zu gestalten.

    Was wäre wenn so:


    (P.S. Kann mir jemand verraten was das "nur vorlesen" bedeutet, ich habe den Code von jemandem anderen und finde denjenigen in keinem Forum mehr!

    Oder weiß jemand wo boratb abgeblieben ist?)

    Code
    1. .container { display: flex;
    2. }
    3. .box { flex: 1; display: flex; justify-content: center;
    4. }
    5. .box71 > span { margin-right: auto; }
    6. .box73 > span { margin-left: auto; }
    7. /* non-essential */
    8. .box { align-items: center; border: 1px solid #ccc; background-color: lightgreen; height: 40px;
    9. }
    Code
    1. <div class="container"> <div class="box box71"><span>Meine Überschrift</span></div> <div class="box box72"><span>72 centered</span></div> <div class="box box73"><span>Rauminstallationen</span></div>
    2. </div>

    Was wäre wenn ich die Überschrift (und villeicht auch den footer anders baue und zwar so

    (habe das hierher: https://stackoverflow.com/ques…d-justify-self-properties

    /// wein wenig runterscrollen!!!)


    ABER anstatt dem div natürlich wieder eine Überschrift <h1>, <h2> usw verwenden.... (also dahingehend umbauen!!!)


    Wäre DAS effizienter und würde dann auch ein leichterer Umbruch stattfinden, also das dann das "Rauminstallationen in die nächste Zeile rutscht wenn das Bildschirmfenster zu schmal wird?

    Wäre DAS so besser?


    Lieben Gruß der misanthrop

  • Was denkt ihr:


    Wäre DAS eine alternative um eben meine Überschriften "Mein Name" links angeordnet UND "Rauminstallationen" rechts angeordnet, zu positionieren.


    UND würde sich das "Umbrechen" der Inhalte von <h1> und <h2> anders und besser reagieren wenn man das Browserfenster zusammenschiebt UND auch ZOOMT?


    Grüße der misanthrop

  • (P.S. Kann mir jemand verraten was das "nur vorlesen" bedeutet, ich habe den Code von jemandem anderen und finde denjenigen in keinem Forum mehr!

    Dazu sage ich jetzt mal nix.


    Aber ich könnte mir denken das derjenige da ein Sprachausgabe oder so was hatte , und das Komma dann eine kurze Sprech Pause einfügen soll. Da du das wahrscheinlich nicht hast kannst du das auch weg löschen. Wie du in der Css sehen kannst ist das weit aus den sichbaren Bereich geschoben worden

    Code
    1. .nur-vorlesen {
    2. position: absolute;
    3. left: -1000rem;
    4. top: auto;
    5. overflow: hidden;
    6. width: 1px;
    7. height: 1px;
    8. }

    und damit wird es nur von einer möglichen Sprachausgabe oder ähnliches erkannt. Eine anderen sinn sehe ich da jetzt gerade nicht .

    Wenn du das Komma nicht brauchst mach es doch dann ganz Weg.

    Das ist meine vermutung warum das da ist. Könnte aber auch falsch liegen