DIVs werden nicht nebeneinander dargestellt

[Pit]

Hallo,

leider stimmt mein Titel nicht ganz, denn nur in meinem Produktivscript werden die DIVs nicht nebeneinander dargestellt, in meinem Fiddle funktioniert es prächtig.

Habt Ihr trotzdem einen Tip für mich, wie ich dem Fehler im Produktivscript auf die Schliche kommen kann? Wie geht man in soi einem Fall vor?

Pit

[Henry]

Hallo Pit,

Habt Ihr trotzdem einen Tip für mich, wie ich dem Fehler im Produktivscript auf die Schliche kommen kann? Wie geht man in soi einem Fall vor?

Indem du Matthias Hinweis nun mal endlich beherzigst vielleicht? Oder zumindest, mal einen Screenshot, wenn es tatsächlich der gleiche Quelltext wie bei fiddle ist?

Pit

Gruss
Henry

[Pit]

Hallo Henry,

Indem du Matthias Hinweis nun mal endlich beherzigst vielleicht? Oder zumindest, mal einen Screenshot, wenn es tatsächlich der gleiche Quelltext wie bei fiddle ist?

Hatte das Post von Matthias noch gar nicht gelesen. Inzwischen hat sich das Problem aber gelöst, ich hatte (dummerweise) schlicht vergessen, die neue css-datei auch zu speichern. Auch sowas kommt schonmal vor... 😕

Pit

[dedlfix]

Tach!

Habt Ihr trotzdem einen Tip für mich, wie ich dem Fehler im Produktivscript auf die Schliche kommen kann? Wie geht man in soi einem Fall vor?

Im Browser die Entwicklertools öffnen und die Elemente untersuchen, nebst der Anzeige des CSS, welche Regeln da aus welchen Quellen und in welcher Priorität wirken. Wenn man mit der Maus über die Elemente im DOM fährt, sieht man auch, welche Außen- und Innenabstände ein Element hat, was auch hilfreich sein kann, um die Ursachen für den Platzbedarf und daraus folgende Umbrüche zu erkennen.

dedlfix.

[Pit]

Hi dedlfix,

Im Browser die Entwicklertools öffnen und die Elemente untersuchen, nebst der Anzeige des CSS, welche Regeln da aus welchen Quellen und in welcher Priorität wirken.

Mache ich immer wieder, und ich komme auch immer wieder damit zurecht, aber leider nciht immer.

Wenn man mit der Maus über die Elemente im DOM fährt, sieht man auch, welche Außen- und Innenabstände ein Element hat, was auch hilfreich sein kann, um die Ursachen für den Platzbedarf und daraus folgende Umbrüche zu erkennen.

Wo siehst du die? Ich sehe nur die Abmessungen des Elements.

Pit

[dedlfix]

Tach!

Wenn man mit der Maus über die Elemente im DOM fährt, sieht man auch, welche Außen- und Innenabstände ein Element hat, was auch hilfreich sein kann, um die Ursachen für den Platzbedarf und daraus folgende Umbrüche zu erkennen.

Wo siehst du die? Ich sehe nur die Abmessungen des Elements.

Das Element wird auf der Seite hervorgehoben und man sieht andersfarbig Margin und Padding drumherum.

dedlfix.

[Pit]

Hi dedlfix,

Das Element wird auf der Seite hervorgehoben und man sieht andersfarbig Margin und Padding drumherum.

Entweder sehe ich es nicht oder bei mir wird nichts hervorgehoben. Ich schau mal im Netz nach, ob es Bilder davon gibt.

Pit

[marctrix]

Hej Pit,

Hi dedlfix,

Das Element wird auf der Seite hervorgehoben und man sieht andersfarbig Margin und Padding drumherum.

Entweder sehe ich es nicht oder bei mir wird nichts hervorgehoben. Ich schau mal im Netz nach, ob es Bilder davon gibt.

Es gibt sogar Videos davon in YouTube und Co…

Marc

[Meowsalot]

Hallo Pit,

ich glaube dedlfix meint folgendes

Dieses geht wenn du die Entwicklungstools eingeschalten hast.

Bis bald!
Meowsalot (Bernd)

[dedlfix]

Tach!

ich glaube dedlfix meint folgendes

Genau das. Blau ist der Inhalt, orange ist anzunehmenderweise Margin.

dedlfix.

[Pit]

Hallo nochmal,

gibt es einen Weg, das Bla Bla Bla - Div in seiner Breite immer so anzupassen, dass es sich den Restplatz der Viewportbreite nimmt, also quasi immer den Platz Viewportbreite - xxxxxxxxxxxxxDiv?

Pit

[marctrix]

Hej Pit,

Hallo nochmal,

gibt es einen Weg, das Bla Bla Bla - Div in seiner Breite immer so anzupassen, dass es sich den Restplatz der Viewportbreite nimmt, also quasi immer den Platz Viewportbreite - xxxxxxxxxxxxxDiv?

Sowohl flexbox, als auch grid sind dafür geeignet, außerdem die calc-Funktion. (Breite 100% - bekannte Größe des vorhandenen Elementes).

In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox und nur bei wenigen Ausnahmen die calc-Funktion…

Marc

[Pit]

Hi Marc,

In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox und nur bei wenigen Ausnahmen die calc-Funktion…

Mir gefällt die calc-Idee am besten. Für Grid müßte ich sicher wissen, wieviel Platz ich für das xxxxxxxxxxxxxDiv benötige, oder? Dieses DIV kann sich aber immer wieder mal in der Breite ändern. Flexbox habe ich noch nie benutzt und kenne dementsprechend nicht und calc habe ich auch noch nie benutzt, habe aber eine Vorstellung von der Funktionsweise.

Pit

[marctrix]

Hej Pit,

In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox und nur bei wenigen Ausnahmen die calc-Funktion…

Mir gefällt die calc-Idee am besten. Für Grid müßte ich sicher wissen, wieviel Platz ich für das xxxxxxxxxxxxxDiv benötige, oder? Dieses DIV kann sich aber immer wieder mal in der Breite ändern. Flexbox habe ich noch nie benutzt und kenne dementsprechend nicht und calc habe ich auch noch nie benutzt, habe aber eine Vorstellung von der Funktionsweise.

Der Einwand von @Gunnar Bittersmann lässt mich vermuten, dass es um einen konkreten, mir nicht bekannten Anwendungsfall geht. Scheint, als ob flex hier das Mittel der Wahl ist. Vermutlich habt ihr im anderen Thread bereits darüber geredet?

Marc

[Gunnar Bittersmann]

@@Pit

Flexbox habe ich noch nie benutzt und kenne dementsprechend nicht und calc habe ich auch noch nie benutzt

Tja, dann wird’s wohl jetzt mal Zeit.

A Complete Guide to Flexbox lesen, Flexbox Froggy spielen.

LLAP 🖖

[Henry]

Hallo Gunnar,

Flexbox Froggy spielen.

guter Tip, nette Lernidee +1

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Flexbox Froggy spielen.

guter Tip, nette Lernidee +1

Ich bin auch gerade nochmal durch.

LLAP 🖖

[Henry]

Hallo Gunnar,

Ich bin auch gerade nochmal durch.

ohh… hänge auch am letzten Level durch. Bitte nicht die Lösung posten.

Gruss
Henry

[ottogal]

Flexbox Froggy spielen.

Etwas schade, dass die Schwierigkeit bis zum Level 23 kaum ansteigt, dann Level 24 so knifflig ist. Da sollte es noch einige Zwischenstufen mit wachsendem Anspruch geben.

[marctrix]

Hej ottogal,

Flexbox Froggy spielen.

Etwas schade, dass die Schwierigkeit bis zum Level 23 kaum ansteigt, dann Level 24 so knifflig ist. Da sollte es noch einige Zwischenstufen mit wachsendem Anspruch geben.

Finde auch, dass flexbox schwieriger sein sollte…

Marc

[Gunnar Bittersmann]

@@Gunnar Bittersmann

A Complete Guide to Flexbox lesen, Flexbox Froggy spielen.

Und dann noch:

A Complete Guide to Grid lesen, Grid Garden spielen.

LLAP 🖖

[Pit]

@@Gunnar Bittersmann

A Complete Guide to Flexbox lesen, Flexbox Froggy spielen.

Und dann noch:

A Complete Guide to Grid lesen, Grid Garden spielen.

Danke für die Links!

Ich habe allerdings auf andere Seiten ausweichen müssen, weil ich des eglischen nicht mächtig genug bin, um sowas in englisch zu lernen.

Pit

[marctrix]

Hej Pit,

@@Gunnar Bittersmann

Ich habe allerdings auf andere Seiten ausweichen müssen, weil ich des eglischen nicht mächtig genug bin, um sowas in englisch zu lernen.

Dann empfehle ich Dir, dich nach und nach in die offiziellen Standards einzuarbeiten. Das englisch ist zwar extrem schwierig, aber sehr konsistent!

Bedeutet: der dort verwendete Wortschatz ist auch für Leute mit guten Englischkenntnissen abstoßend schwierig zu verstehe (habe ich seinerzeit jedenfalls so empfunden) und was die einzelnen Worte und Begriffe (z.B. programmatically determinable oder so) meinen, muss auch von denen erst noch erlernt werden, die mit der englischen Sprache aufgewachsen sind.

Dafür tauchen diese Begriffe dann aber immer wieder auf und je mehr und je öfter man die Specifications liest, desto besser versteht man diese dann. Sekundär-Quellen, wo mal diese, mal jene Begriffe für ein und dieselbe Sache benutzt werden, sind da auf Dauer vielleicht eher schwieriger…

Noch anders gesagt: es sind neue Vokabeln zu lernen, diese sind aber überschaubar in der Zahl und werden sehr konsequent und konsistent verwendet.

Marc

[Pit]

Hi Marc,

Danke für den Tipp und Hinweis. Ich werde versuchen.

Pit

[Gunnar Bittersmann]

@@marctrix

Sowohl flexbox, als auch grid sind dafür geeignet, außerdem die calc-Funktion. (Breite 100% - bekannte Größe des vorhandenen Elementes).

calc() wohl weniger, denn da müsstest du die unbekannte Größe des vorhandenen Whitespaces zwischen den inline-block-Elementen in die Rechnung einbeziehen.

In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox

Die Abschätzung kann ich nicht nachvollziehen. Und das wäre wohl ganz klar ein Fall aus den 35%.

Oder wie willst du mit Grid eine Spalte so breit wie möglich und eine Spalte so schmal wie möglich hinbekommen?

LLAP 🖖

[marctrix]

Hej Gunnar,

Oder wie willst du mit Grid eine Spalte so breit wie möglich und eine Spalte so schmal wie möglich hinbekommen?

In meinem Alltag habe ich meist mit einer Spalte zu tun, die eine feste Breite hat und daneben einen Bereich, der den restlichen Platz ausfüllen muss.

Mir schien, bei Pit liegt der Fall ähnlich…

Marc

[Gunnar Bittersmann]

@@marctrix

Oder wie willst du mit Grid eine Spalte so breit wie möglich und eine Spalte so schmal wie möglich hinbekommen?

In meinem Alltag habe ich meist mit einer Spalte zu tun, die eine feste Breite hat und daneben einen Bereich, der den restlichen Platz ausfüllen muss.

Mir schien, bei Pit liegt der Fall ähnlich…

Von fester Breite war hier nirgends die Rede. (Oder habe ich was übersehen?)

LLAP 🖖

[Pit]

Hi,

Von fester Breite war hier nirgends die Rede. (Oder habe ich was übersehen?)

Nein, war nicht.

Pit

[marctrix]

Hej Pit,

Von fester Breite war hier nirgends die Rede. (Oder habe ich was übersehen?)

Nein, war nicht.

Dann kann man die Aufteilung entweder ganz dem Browser überlassen oder die Anforderung gilt, die @Gunnar Bittersmann benannt hat, nämlich dass eine Spalte möglichst schmal, eine möglichst breit sien soll. Die habe ich wiederum nirgends gefunden 😉

Marc

[Gunnar Bittersmann]

@@Pit

gibt es einen Weg, das Bla Bla Bla - Div in seiner Breite immer so anzupassen, dass es sich den Restplatz der Viewportbreite nimmt, also quasi immer den Platz Viewportbreite - xxxxxxxxxxxxxDiv?

Ja. Kinderspiel, wenn der Container (in dem Fall footer) ist eine Flexbox ist: flex-grow.

LLAP 🖖

[Gunnar Bittersmann]

@@Pit

in meinem Fiddle funktioniert es prächtig.

Das div.navcontainer ist ein Grid mit 3 Spalten, in dem sich genau ein Griditem footer befindet, welches sich über alle Spalten erstreckt. Recht sinnfrei.

LLAP 🖖

[Pit]

@@Gunnar Bittersmann

Das div.navcontainer ist ein Grid mit 3 Spalten, in dem sich genau ein Griditem footer befindet, welches sich über alle Spalten erstreckt. Recht sinnfrei.

... würde man denken. Ist es im fiddle auch, aber im Produktivscript ist das 3-spaltige grid mit Logo, Titel und ähnlichem gefüllt.

Pit