Allgemeine Verständnisfrage: Bei zwei ineinander geschachtelten grid kollabiert/tritt das innerliegende grid herüber wenn das Bildschirmfenster zu schmal ist
einsiedler
Allgemeine Verständnisfrage: Bei zwei ineinander geschachtelten grid kollabiert/tritt das innerliegende grid herüber wenn das Bildschirmfenster zu schmal ist
einsiedler
Rolf B
Matthias Scharwies
Gunnar Bittersmann
Der MartinAllgemeine Verständnisfrage: Bei zwei ineinander geschachtelten grid kollabiert/tritt das innerliegende grid herüber wenn das Bildschirmfenster zu schmal ist
Hallo, ich habe mal eine allgemeine Frage
Ich habe folgendes html - Konstrukt:
<body>
<header >
<h1></h1>
</header>
<nav>
</nav>
<main>
<article>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</article>
</main>
</body>
und gebe einmal dem body und weil ich es dort benötige jeder section ein grid mit.
Nun ist es aber so das bei einem schmalen Bildschirmfenster (sagen wir mal 31.25em) das grid der section über dem grid des body seitlich rechts heraustritt.
Warum ist das so und wie kann man das vorbeugen? Oder ist es immer so?
Bitte erklärt mir das und was ist dann am CSS eventuell falsch.
Ich bitte um Beispiele die ich dann auf meine Sache anwenden könnte.
Gruß der einsiedelnde
-
Hallo einsiedler,
das ist so, weil es einen Grund dafür gibt.
Sorry, aber wie soll man ein CSS Problem lösen, wenn Du nur das HTML zeigst? Ich müsste jetzt aus alten Postings den Link auf deine Seite raussuchen. Könnte ich machen, aber meine Fritzbox ist heute nacht verdampft und ich habe nur das Handy. Das hat keine Entwicklerwerkzeuge.
Es gibt viele Gründe, warum ein Element breiter angezeigt wird, als man es wünscht.
- Ein Wort darin ist zu breit und wird nicht umgebrochen (passiert gern bei Links, die als URL angezeigt werden)
- Ein Bild wird mit seiner intrinsischen Größe angezeigt
- Margins und Paddings addieren sich auf und verlangen Platz
- Irgendwo stecken min-width oder width Angaben, die die Breite erzwingen
Gegenmaßnahmen sind:
- Mit den Entwicklerwerkzeugen den Breitensünder ermitteln, das kann allerdings mühsam werden.
- Links nicht als URL, sondern als Text darstellen
- Lange Worte durch ­ mit Trennstellen versehen, oder automatische Silbentrennung einschalten (hyphens:auto)
- Größe von Bildern vom Elternelement abhängig machen
- Ggf. overflow:hidden oder auto setzen
Rolf
--
sumpsi - posui - obstruxi-
Kann es eventuell sein das es so ist, weil ich innerhalb der section irgendwo ein display-block oder inline verwende? Oooooder fehlt u.U. irgendwo eine definitive Breitenangabe, kann es das sein? Wenn ich pur zwei grid ineinander schachten würde, ohne alles (an zusätzlichen Angaben, würde es schlicht funktionieren?
Gruß der einsiedelnde
-
Servus!
Kann es eventuell sein das es so ist, weil ich innerhalb der section irgendwo ein display-block oder inline verwende?
Nein, ein display: block hat keine Breite per se.
In einer deiner sections hast du etwas, dass eben so breit ist. Siehe Rolfs Liste.
Warum Deine section eine gewisse Breite hat, kannst nur du ermitteln. Probier's doch erst mal mit nur einer section – schau, ob's da geht und finde so den Übeltäter.
Wenn ich pur zwei grid ineinander schachten würde, ohne alles (an zusätzlichen Angaben, würde es schlicht funktionieren?
Soweit die Glaskugel funktioniert, ja!
Nun ist es aber so das bei einem schmalen Bildschirmfenster (sagen wir mal 31.25em) das grid der section über dem grid des body seitlich rechts heraustritt.
Warum lässt du es auf kleinen Bildschirmen nicht alles untereinander darstellen und baust die grids erst auf, wenn es nötig ist?
im SELF-Wiki:
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Stimmt, werde ich alles durchchecken.
Im Grunde ist es so angelegt, von klein an (alles untereinander) bis zum ersten query bei 61,irgendwas em. Es ist nur so das ich probehalber einige queries weggemacht habe und da ist mir dies aufgefallen und frage mich warum das so ist.
Der einsiedelnde
-
@@einsiedler
und frage mich warum das so ist.
Das kannst du natürlich tun. Vielleicht findest du ja irgendwann die Antwort.
Du könntest aber auch uns fragen.
Kwakoni Yiquan
PS: Falls das nicht klargeworden sein sollte: Mit „uns fragen“ ist gemeint, so zu fragen, dass wir auch antworten können.
--
Ad astra per aspera
-
-
Hallo Matthias,
Nein, ein display: block hat keine Breite per se.
doch, das hat eine Breite von 100%. Bezogen auf das Elternelement.
Einen schönen Tag noch
Martin--
Wo wir sind, ist das Chaos. Aber wir können leider nicht überall sein.
-
-
Hallo einsiedler,
Wenn ich pur zwei grid ineinander schachten würde, ohne alles (an zusätzlichen Angaben, würde es schlicht funktionieren?
Keine Ahnung. Hängt von den Spaltentemplates des inneren Grids ab. Ab die habe ich vorhin gar nicht gedacht.
Rolf
--
sumpsi - posui - obstruxi-
Stimmt, werde ich durchchecken.
Der einsiedelnde
-
Hallo Rolf,
Keine Ahnung. Hängt von den Spaltentemplates des inneren Grids ab. Ab die habe ich vorhin gar nicht gedacht.
Genau DAS hat mich zur Lösung geführt.
Erst dachte ich, mach die width="800" height="560" Angaben von den IMG und der Videos weg, hast ja soetwas aufgezählt...
Aber die obere Aussage war entscheident.
Das mit den orangenen senkrechten Seitenstrichen ist dann die Lösung.
Danke Dir.
P.S. Könnt ihr mir bitte noch etwas zum meinem Post vom 13.04.2024 16:25 sagen?
Gruß der einsiedelnde
-
@@einsiedler
Erst dachte ich, mach die width="800" height="560" Angaben von den IMG und der Videos weg
Kein so guter Gedanke. Die Größe, in der Multimedia-Objekte gerendert werden, wird im Stylesheet angegeben, aber die intrinsische Größe sollte angegeben werden, damit der Browser weiß, wieviel Platz er freihalten muss (dabei kommt’s aufs Seitenverhältnis an) – und das schon, bevor das Bild/Video geladen ist.
Kwakoni Yiquan
--
Ad astra per aspera-
Habe ich inzwischen wieder zurückgesetzt und img und video haben nun wieder die Angaben.
Ich bin halt die Liste von Rolf durchgegangen um die Fehlerquelle zu finden. Daran lag es ohnehin nicht (intrinsische Größen).
Danke Dir.
Gruß der einsiedelnde
-
-
-
-
-
Ähm eine Sache noch, wo ich mich frage ob es bei ganz schmalen Bildschirmfenstern, zum Beispiel bei Handys, überhaupt sinnvoll ist.
Der skip-to-top-link ist der nicht bei "wisch-und-weg" :o) Handys obsolet? Wenn ja, bei welcher Breite würdet ihr ein querie ansetzen der ihn verschwinden lässt. Ruppig mit display: none oder auch anders.
Das würde ich gerne nochmal von euch hören.
Gruß der einseidelnde
-
@@einsiedler
Der skip-to-top-link ist der nicht bei "wisch-und-weg" :o) Handys obsolet? Wenn ja, bei welcher Breite würdet ihr ein querie ansetzen der ihn verschwinden lässt.
Was hat die Breite mit „wisch-und-weg“ zu tun?
- Tablets sind „wisch-und-weg“, aber breit.
- Handys im Querformat sind breit.
- Ein Browserfenster muss nicht Vollbild sein. Im Browser können Panels (Lesezeichen, Entwicklertools, …) neben dem Viewport sein, was diesen schmal macht.
- Wenn Nutzer stark zoomen, haben sie auch einen schmalen Viewport.
Wenn du „wisch-und-weg“ abfragen willst, verwende einen dafür geeigneten Media-Query. Die Breite ist dafür nicht geeignet.
Kwakoni Yiquan
--
Ad astra per aspera-
Ich meinte damit auch den query Wert in em. Vielleicht ungünstig von mir beschrieben.
Schade, ich dachte das bei kleinen Geräten der Link nicht sonderlich notwendig wäre. ich "spiele" bei den Entwicklertools durch wie es bei solchen Geräten aussähe. Im Grunde meistens ganz gut bis auf die alten Nokia mit 200px Breite (ist da aber unerheblich).
Aber bei den ganzen IPhones wird doch auch "gewischt".
Egal.
P.S. Ihr werdet es nicht glauben, ich habe ein altes Nokia 206 in Betrieb, mehr als telefonieren brauche ich nicht und wenn ich ins web gehen dann am Laptop.
Der einsiedelnde
-
@@einsiedler
Ich meinte damit auch den query Wert in em.
Liest du eigentlich, was man dir schreibt?
Schade, ich dachte das bei kleinen Geräten der Link nicht sonderlich notwendig wäre.
Nein. Du dachstest, dass bei Touch-Geräten der Link nicht sonderlich notwendig wäre.
Und ich habe mir Mühe gegeben, dir begreiflich zu machen, dass Touch-Gerät und kleines Gerät zwei Paar Schuhe sind. Anscheinend vergebliche Mühe.
Kwakoni Yiquan
--
Ad astra per aspera-
Hey, ja, ich lese alles... alles gut…
Habe nun entschieden das ich grundsätzlich den Link (auch bei Touch-Geräten) so belasse.
Keine vergebliche Mühe. ;o)
Gruß der einsiedelnde
-
-
-
