Anordnung von Elementen im <footer>

einsiedler · 28. April 2019

Hallo liebe Forumer,

ich habe folgendes Problem, und zwar mit dem footer.

Bei mir sieht er so aus:

Code

<footer>
     <p>Alle Inhalte Copyright 2019 Mein Name</p>
     <a href="#top">zum Seitenanfang</a>
</footer>

Code

/* Footer */
        footer {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                background-color: #d3d3d3;
                margin: 1.1rem 0;
                padding: 0.2rem 1.6rem 0.2rem 1.6rem;
                }
        footer p {
                flex-wrap: nowrap;
                flex-grow: 0;
                flex-shrink: 1;
                flex-basis: 21rem;
                text-align: center;
                margin: 0; padding: 0;
                }
        footer a {
                flex-wrap: nowrap;
                flex-grow: 0;
                flex-shrink: 1;
                flex-basis: 10rem;
                text-align: center;
                margin: 0; padding: 0;
                }
    }
    
    @media all and (max-width: 59.375em) {
        footer {
            flex-direction: column;
            flex-wrap: wrap;
            padding: 0;
        }
        footer p {
            margin: 0.1rem 0 0.1rem 0;
            flex-wrap: nowrap;
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 100%;
            text-align: justify;
            /*  
            justify-content: flex-start;
            */
        }
        footer a {
            margin: 0.1rem 0 0.1rem 0;
            flex-wrap: nowrap;
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 100%;
            text-align: justify;
            /*
            justify-content: flex-start;
            */
        }
    }

Alles anzeigen

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

Code

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

voneinander rechts und links angeordnet.

Nun möchte ich bei einem schmaleren Bildschirmfenster

Code

@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

 @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

MrMurphy · 28. April 2019

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:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Zeilenumbruch 01</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*.zeilenumbruch*/
   @media all {
      .zeilenumbruch p,
      .zeilenumbruch a {
         font-size: 2rem;
      }
      .zeilenumbruch {
         background-color: #d3d3d3;
         padding: 0.2rem 1.6rem 0.2rem 1.6rem;
         margin: 1.1rem 0rem;
         display: flex;
         flex-wrap: wrap;
      }
      .zeilenumbruch p {
         margin: 0.25rem 0rem 0.25rem 0rem;
      }
      .zeilenumbruch p:first-child {
         padding-right: 2rem;
         margin-right: auto;
      }
      .zeilenumbruch p span {
         white-space: nowrap;
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Zeilenumbruch</h1>
   </header>
   <main>
      <section class="zeilenumbruch">
         <p>Alle Inhalte Copyright <span>2019 -</span> <span>Betsy Bell</span></p>
         <p><a href="#top">Zum Seitenanfang</a></p>
      </section>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/8201-anordnung-von-elementen-im-footer/">https://www.html-seminar.de/</a></p>
   </footer>
</body>
</html>

Alles anzeigen

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

einsiedler · 28. April 2019

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

Sempervivum · 28. April 2019

Zitat

NUR bleibt eben mein Text (vom <p> und das <a>) NICHT innerhalb des <footer> sondern ragt darüber hinaus,

Kann ich bei deiner Beispielseite nicht bestätigen, bei mir ragt nichts heraus. Sieht gut aus. Hast Du das Problem inzwischen gelöst?

MrMurphy · 28. April 2019

Ich kann das auch nicht bestätigen. Kann es sein dass du den Cache nicht geleert hast? Da zicken Chrome und Opera häufig rum.

einsiedler · 28. April 2019

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

einsiedler · 28. April 2019

Anmerkungen:

mein code für:

Code

@media all and (max-width: 59.375em) {
        footer {
            flex-direction: column;
            flex-wrap: wrap;
            padding: 0;
        }
        footer p {
            margin: 0.1rem 0 0.1rem 0;
            flex-wrap: nowrap;
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 100%;
            text-align: justify;
            /*  
            justify-content: flex-start;
            */
        }
        footer a {
            margin: 0.1rem 0 0.1rem 0;
            flex-wrap: nowrap;
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 100%;
            text-align: justify;
            /*
            justify-content: flex-start;
            */
        }
    }

Alles anzeigen

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

Code

flex-direction: column;

gesetzt das die Elemente übereinander angeordnet werden.

Ich weiß ohne das müßte trotzalledem durch

Code

flex-wrap: wrap;

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

MrMurphy · 28. April 2019

Kann es sein dass du veraltete Versionen von Chrome und Opera verwendest, die das aktuelle Flexbox nicht kennen?

Bei mir funktioniert deine Seite, das Problem liegt an deinem Betriebssystem, deinen Treibern oder deiner Software. Das können wir dann nicht nachvollziehen.

einsiedler · 28. April 2019

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

basti1012 · 28. April 2019

bei einer Bildschirmbreite unter 113 Pixel habe ich das problem auch. Doch so klein ist nicht mal ein Handy.

Deswegen ist ab 114 Pixel alles bestens und sieht nicht so aus wie bei dir

einsiedler · 29. April 2019

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

@media all and (max-width: 59.375em) {
        header {
            display: block;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        header span {
            white-space: pre-line;
        }

dabei sieht mein html-Konstrukt so aus:

Code

<header>
        <h1><span>Mein Name</span><span class="nur-vorlesen">,</span></h1><h2><span>Raum&shy;instal&shy;lati&shy;onen</span></h2>
</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:

Code

@media all {
    /* Header */
        header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        header span {
            white-space: nowrap;
        }
        header span:nth-child(1) {
            margin-right: 0;
        }
    }

Alles anzeigen

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

Code

white-space: nowrap;

Und das versuchte ich durch

Code

header span {
            white-space: pre-line;
        }

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

basti1012 · 29. April 2019

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

@media (max-width: 59.375em)
header h2 span {
    word-break: break-all;   // oder break-word
    white-space: pre-line;
}

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.

einsiedler · 29. April 2019

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

.container {  display: flex;
}
.box {  flex: 1;  display: flex;  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {  align-items: center;  border: 1px solid #ccc;  background-color: lightgreen;  height: 40px;
}

Code

<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>
</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

einsiedler · 29. April 2019

Was denkt ihr:

Code

header {
            display: flex;
        } 
h1, h2, h3 {  
            flex: 1;  display: flex;  justify-content: center;
        }
.box_links > span { margin-right: auto; }
.box_rechts > span { margin-left: auto;  }        
        
@media all and (max-width: 59.375em) {        
    header {
            flex-flow: column wrap;
        }
        h1, h2, h3 {  
            justify-content: flex-start;
        }
        .box_links > span, .box_rechts > span { margin-left: auto; }
}


<header>  
    <h1 class="box_links"><span>Meine Überschrift</span></h1>
    <h2 class="box_center"><span>centered</span></h2>
    <h3 class="box_rechts"><span>Rauminstallationen</span></h3>
</header>

Alles anzeigen

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

basti1012 · 29. April 2019

Zitat von einsiedler

(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

.nur-vorlesen {
    position: absolute;
    left: -1000rem;
    top: auto;
    overflow: hidden;
    width: 1px;
    height: 1px;
}

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

Anordnung von Elementen im <footer>

Google Chrome

Jetzt mitmachen!

Teilen

Tags