Flex zeigt alles untereinander statt nebenainander

[hegi108]

Hat jemand einen Vorschlag, warum die Felder nicht nebeneinander angezeigt werden?

CSS:

.flex-container {
  display: flex;
	flex-direction: row;	
  justify-content: space-between; /* gleichmässig verteilen */
}
      
.flex-item {
	height: 24px;
}

HTM:

       <div class="flex-container">  
        <div class="flex-item">   
          A&nbsp;
        </div>
        <div class="flex-item">   
          B&nbsp;
        </div>
        <div class="flex-item">   
          C&nbsp;
        </div>
        <div class="flex-item">   
          D&nbsp;
        </div>
       </div>

Hat jemand einen Tipp? Vielen Dank!

Warum wird das hier nicht so schön dargestellt wie ich es eingegeben habe?

[Gunnar Bittersmann]

@@hegi108

Warum wird das hier nicht so schön dargestellt wie ich es eingegeben habe?

Weil du die Codeblöcke nicht als solche gekennzeichnet hast. Ich hab das mal gefixt.

🖖 Живіть довго і процвітайте

[hegi108]

Vielen Dank Euch allen für die Bemühungen. So sieht der Text besser aus!

[hegi108]

Nun habe ich es geschafft. Die Seite flextest.htm sieht vernünftig aus.

Leider sind die offiziellen Seiten nicht so perfekt. Es geht um die Fusszeile. Alles hat theoretisch auf einer Zeile platz. Beim Verkleinern des Viewports sollten die einzelnen Teile gemäss dem zur Verfügung stehendem Platz <div>-weise schön an den linken Rand rutschen. Das funktioniert überhaupt nicht.

Bsp.: https://shiatsu-bewegung.ch/massagen.htm Musterseite für die Fusszeile

[Gunnar Bittersmann]

@@hegi108

Hat jemand einen Vorschlag, warum die Felder nicht nebeneinander angezeigt werden?

Weil dein div.flex-container gar keine Flexbox ist. (Sonst würde das Entwicklertool (Firefox) da „flex“ anzeigen, so wie bei body).

Der CSS-Code auf deiner Seite weicht wohl von dem ab, was du hier gepostet hast?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

die einzige Flex-Anforderung im Stylesheet betrifft den Body. Und der hat nur ein Kind-Element, welches dazu noch gefloatet ist. Darin steckt dann ein div, darin ein div, darin ein div, welches die Flexbox sein soll, aber - wie Du schon sagtest - nicht ist. Da fehlt die Style-Regel zu.

Die Hypothese, dass Matroschka-Webseiten (Inhalt in div in div in div in body) besser seien, hält sich hartnäckig. Zumeist ist sie falsch.

Wo wir schon dabei sind:

Das webkit-Präfix für Flexbox ist längst nicht mehr nötig. display:flex und flex-flow:row reicht völlig (bzw. flex-flow:row ist Default und hier auch nicht nötig).

Den Inhalt eines Flex-Items zu floaten ist ebenfalls nicht sinnvoll. Ein Flex-Item bildet einen Blockformatierungskontext, der Floats einsperrt. Float ist die Technik aus der Zeit vor Flexbox, um Inhalte nebeneinander zu bekommen.

Das hier:

<!-- JavaScript Weiterleiting HTTP zu HTTPS 
<script type="text/javascript">
if (location.protocol !== "https:") {
  location.protocol = "https:";
}
</script>

ist auch so eine Sache. JavaScript läuft nicht immer. Wenn es im Kommentar steht, erst recht nicht. Diese Steuerung gehört auf den Server. Wenn sie dort gelandet ist, gehört dieses Codefragment entsorgt.

Ansonsten (ich bin zur Shiatsu Homepage gewechselt): nav ist fein, aber die Renovierung darf gerne auch auf <div id="header"> und <div id="footer"> erweitert werden.

Und die li im Menü möchten nicht gefloatet sein. Durch den float entsteht ein Blockformatierungskontext, und Überläufe werden verhindert. Dadurch gehen den Unterlängen ein paar Pixel ab. Float ist ein Spezialgewürz, nicht Salz, was man überall draufstreut.

Mit float:

Ohne float:

Und hatten wir das Thema ":target" Pseudoklasse nicht schon mal? Als Werkzeug für ein Dropdown-Menü taugt das nur bedingt. Mit einem Zeigegerät klappt das Menü schön auf und zu. Mit Tastatur muss man aber erst ein weiteres Mal <tab> drücken, bevor man von #nav-menue-zu nach #nav-menue gelangt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das hier:

<!-- JavaScript Weiterleiting HTTP zu HTTPS 
<script type="text/javascript">
if (location.protocol !== "https:") {
  location.protocol = "https:";
}
</script>

ist auch so eine Sache. JavaScript läuft nicht immer. Wenn es im Kommentar steht, erst recht nicht. Diese Steuerung gehört auf den Server.

Ja.

Und das ohne weiteres Zutun. IIRC hat das alles mein Hoster für mich gemacht.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

klar. Wenn man einen Komforthoster hat, wird dass passieren. Wer das nicht zahlen will oder sich lieber selbst die Finger schmutzig macht, muss halt selbst durch die Jefferies .htaccess-tube kriechen und die passende Redirektion montieren (zur Befestigung empfehlen sich selbstdichtende Schaftbolzen…)

Rolf

[Nico R.]

Wer das nicht zahlen will oder sich lieber selbst die Finger schmutzig macht, muss halt selbst durch die Jefferies .htaccess-tube kriechen

Und wenn man Glück hat, hört man den Kapitän Flöte spielen :-)

[hegi108]

Hallo Rolf B

Du hast gleich verschiedene Probleme genannt.

Das Javascript für die Umleitung ist tatsächlich als Kommentar vorhanden, weil der Webhoster das in der Zwischenzeit automatisiert hat. Ich werde den Code löschen.

Das li im Sandwich-Menu habe ich entfernt. Vielen Dank für den Tipp.

Betreffend ":target": Ich muss am PC nur einmal klicken um es zu öffnen und danach auf die Seite, die ich ansehen will. Ich muss ja das offene Menu nicht schliessen. Oder was meinst Du mit dem 2. Klick?

[hegi108]

Aber im CSS steht doch

.flex-container {
  display: flex;
  flex-direction: row;	
  justify-content: space-between; /* gleichmässig verteilen */
}

Warum zeigt das denn keine Wirkung? Muss die äusserste Box Flex sein, nicht die direkt davor?

[Rolf B]

Hallo hegi108,

weil dieses CSS, so wie es aussieht, nicht geladen wird.

Erforsche die Seite mit den Entwickler-Tools des Browsers.

Im flextest.htm ist kein <style>-Element, nur ein <link> auf shiatsu.css.

In dem shiatsu.css, das bei mir geladen wird, steht das, was Du gezeigt hast, nicht. Das einzige, was dort flex heißt, ist am body notiert. Schießt da ggf. ein Server-Cache quer? Oder greifst Du auf die falsche CSS Datei zu?

Rolf

[hegi108]

Im shiatsu.css steht ziemlich weit unten doch folgendes:

/* Fusszeile */
.boxinbox {
    float: left;
    position: relative;
    max-width: 1080px;
    min-width: 200px;
    margin-bottom: 10px;
	height: 25px;
}
/* für Adress-Zeile */
      
.flex-container {
    display: flex;
	flex-direction: row;	
    justify-content: space-between; /* gleichmässig verteilen */
}
      
.flex-item {
	height: 24px;
}

Das habe ich gerade eben aus dem Seitenquelltext kopiert.

[Rolf B]

Hallo hegi108,

kann ich die nächsten Stunden nicht prüfen, bin unterwegs. Vorhin habe ich nach flex gesucht und nichts gefunden.

Dumme Frage: Du hast es auf der Seite gefunden, die als problematische Seite verlinkt ist?

Rolf

[hegi108]

Hallo Rolf

Ja - auf der problematischen Seite. Im Firefox kann ich das CSS nicht ansehen, in den anderen Browsern (Chrome, Edge und Opera) kann man einfach auf den Link klicken.

Jeder Browser zeigt etwas anderes an. Wie weiss ich, dass ich garantiert die neuste Version anschaue? F5 bringt meist nichts. Und wenn nur der Code ändert, muss ich ja nicht immer die Browserdaten löschen. Oder?

hegi108

[Rolf B]

Hallo hegi108,

Im Firefox kann ich das CSS nicht ansehen

Die F12 Taste funktioniert nicht? Das öffnet die Entwicklerwerkzeuge.

Wenn F5 nichts bringt, kann man Strg+F5 versuchen (hard refresh). In den Entwicklerwerkzeugen gibt's auf dem Netzwerk-Tab auch eine Checkbox, die den Browsercache deaktiviert. Das hilft nur alles nichts, wenn der Server einen Cache hat (one.com macht zum Beispiel sowas), da hilft dann nur, im <link> Element einen Dummyparameter an die URL der css Datei zu hängen.

Rolf

[hegi108]

Hallo Rolf

Nun habe ich es noch wie folgt versucht:

.flex-item {
  height: 24px;
  white-space: nowrap;
}

Nun wird die ganze Zeile nicht umgebrochen. Da verstehe ich die Welt nicht mehr! Ich nimm's wieder raus.

Die Höhenangabe sollte dazu dienen, dass es nicht, wie gegenwärtig der Fall, untereinander anzeigt, was in derselben Box ist.

Gruss hegi108

[Gunnar Bittersmann]

@@hegi108

Nun wird die ganze Zeile nicht umgebrochen. Da verstehe ich die Welt nicht mehr!

Es muss ja nicht die Welt sein. Mir würde schon reichen, dein Problem zu verstehen.

Was willst du erreichen?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo hegi108,

ich musste jetzt Strg+F5 drücken, um die .flex-item Regel zu sehen.

Ein white-space:nowrap habe ich in darin allerdings nicht gesehen. Hast Du das schon wieder herausgenommen?

Für mich sieht es jetzt so aus:

Rolf

[hegi108]

Hallo Rolf, hallo Gunnar

Ja - das white-space:nowrap habe ich wieder entfernt, da danach die ganze Zeile nicht mehr umgebrochen wurde.

Die flextest-Seite funktioniert insofern, dass die Texte nicht mehr untereinander sind.

Eigentlich geht es um die Fusszeilen der Hauptseite: Musterseite für die Fusszeile

Wegen gesetzlichen Bestimmungen muss man seit dem 4. Sept. noch den Datenschutz erwähnen und die doofen Sprüche wegen Cookies machen (ich verwende nie Cookies, deshalb erscheint auch keine solche Meldung). Also habe ich das ganz rechts angefügt. Leider wurde das neue Feld aber immer auf einer neuen Zeile angezeigt, obwohl es noch Platz hätte (wie man jetzt sieht). Also habe ich anstatt mit Float-Boxen, die bisher funktionierten, nach einer neuen Lösung gesucht und dabei bin ich auf die Flex-Variante gestossen.

Auf dem breiten Bildschirm sieht es nun fast gut aus. Ich wollte mit &nbsp die Lücken gleichmässiger machen, das zeigt jedoch gar keine Wirkung.

Die Fusszeile besteht aus 7 Feldern, welche je nach zur Verfügung stehendem Platz linksbündig auf die nächsten Zeilen umgebrochen werden sollten. Am Schluss, also auf dem Handy, sollte es wie im angefügten Bild aussehen.

Freundliche Grüsse hegi108

[Gunnar Bittersmann]

@@hegi108

Ich wollte mit &nbsp die Lücken gleichmässiger machen, das zeigt jedoch gar keine Wirkung.

Wenn du ein NBSP für etwas anderes als Leerzeichen verwendest, bei dem nicht umbrochen werden soll^[1], dann stimmt was nicht.

(Und wenn zwei NBSP hintereinander stehen, dann stimmt ganz sicher was nicht.)

Für Zwischenräume in Flexbox und Grid gibt’s eine CSS-Eigenschaft. Mind the gap.

🖖 Живіть довго і процвітайте

---

1. bspw. zwischen Zahl und nachfolgendem Wort oder Maßeinheit
   12. September ↩︎

[hegi108]

Hallo Gunnar

Man scheint heute offenbar andere Tricks zu kennen als früher. Ich habe bis jetzt immer &nbsp verwendet um Abstände zu verschönern. 🙂 Meine erste Webseite war reines html, da gab's noch gar kein CSS. Offenbar habe ich in der Zwischenzeit nicht alles mitbekommen.

Ich werde mir gap mal ansehen und ausprobieren.

Vielen Dank für den Tipp.

hegi108

[hegi108]

Hallo Rolf - Hallo Gunnar

ich hab's geschafft. Nicht ganz zufriedenstellend, aber brauchbar. Ohne gap, aber mit einigen &nbsp 😃

Vielen Dank für eure Bemühungen.

Freundliche Grüsse

hegi108