Gestaltung des Layouts mit display: und prozentangaben
0 0 0 
Matthias Apsel
0 
j4nk3y
0 Matthias Apsel
0
0
Gestaltung des Layouts mit display: und prozentangaben
Gunnar Bittersmann
Der MartinEinen wunderschönen,
Ich versuche seit Tagen mein Layout nach meinen Vorstellung zu erstellen und bin auf ein Problem gestoßen welches ich nicht lösen, geschweige denn verstehen kann. Hier mal ein abgewandeltes Beispiel von w3Schools.com.
<!DOCTYPE html>
<html>
<head>
<style>
.outerfloating-box {
display: inline-block;
border: 3px solid blue;
}
.floating-box {
display: inline-block;
width: 15%; /*funktioniert so nicht*/
height: 10%; /*funktioniert so nicht*/
overflow:auto;
margin: 10px;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>The New Way - using inline-block</h2>
<div class="outerfloating-box">
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>
</body>
</html>
Wie man sieht versuche ich mit
display: inline-block;
einen Aussenbereich festzulegen in welchem sich wieder 2 inline-blöcke befinden. Nun möchte ich eigentlich, bis zu einem gewissen punkt wo ein @media screen (min-width) auslösen könnte, die Größe der inneren Blöcke durch Prozentangaben für breite und höhe festlegen.
Übersehe ich etwas unglaublich grundlegendes was nirgendwo steht? (Zumnidest habe ich noch nichts gefunden) Ich finde dieses Verhalten nämlich äußerst seltsam da die outerfloating-box sich ohne probleme durch Prozentangaben steuern lässt.
Vielen Dank für Rat und Tat
Gruß
Jo
-
Wie man sieht versuche ich mit display: inline-block; einen Aussenbereich festzulegen in welchem sich wieder 2 inline-blöcke befinden. Nun möchte ich eigentlich, bis zu einem gewissen punkt wo ein @media screen (min-width) auslösen könnte, die Größe der inneren Blöcke durch Prozentangaben für breite und höhe festlegen.
Bei inline-Elementen, dazu gehört auch inline-block, kannst du die Höhe nur durch line-height festlegen, siehe https://www.w3.org/TR/CSS21/visuren.html#inline-boxes, https://www.w3.org/TR/CSS21/visudet.html#the-height-property und https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
Das Festlegen der Breite mit width funktioniert hingegen bei allen Elementen in deinem Beispiel, aber …
Ich finde dieses Verhalten nämlich äußerst seltsam da die outerfloating-box sich ohne probleme durch Prozentangaben steuern lässt.
… möglicherweise bist du beim Probieren durcheinandergeraten.
-
Hallo Bobo Boberg,
Bei inline-Elementen, dazu gehört auch inline-block, kannst du die Höhe nur durch line-height festlegen
Und der Missbrauch von line-height ist eine ganz schlechte Idee.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)-
@@Matthias Apsel
Und der Missbrauch von line-height ist eine ganz schlechte Idee.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
@@Bobo Boberg
Bei inline-Elementen, dazu gehört auch inline-block, kannst du die Höhe nur durch line-height festlegen
Da irrst du.
siehe https://www.w3.org/TR/CSS21/visuren.html#inline-boxes, https://www.w3.org/TR/CSS21/visudet.html#the-height-property
Ebenda steht: “'height' … Applies to: all elements but non-replaced inline elements, table columns, and column groups”
Die
height-Eigenschaft wirkt also auf Elemente mitdisplay: inline-block.und https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
Wenn du da ein kleines Stückchen hochscrollst, siehst du, dass 1. inline, non-replaced elements was anderes ist als 9. 'inline-block', non-replaced elements.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
Hallo
Auf height-Angaben sollte so weit wie möglich verzichtet werden. Die Höhe von Elementen wird durch ihren Inhalt bestimmt. height-Angaben torpedieren häufig dieses gewollte Verhalten.
height-Angaben sind deshalb nur in bestimmten Fällen sinnvoll. Auch zum Testen ist es besser Container mit Inhalt zu füllen, zum Beispiel Blindtext.
Gruss
MrMurphy
-
@@MrMurphy1
Auch zum Testen ist es besser Container mit Inhalt zu füllen, zum Beispiel Blindtext.
Besser mit richtigem Text.
U.a. auch um zu sehen, ob er wirklich lesbar ist:
“To test readability of the body text there is only one thing you can do without using additional testers, and that’s to actually read the text.
Throw away your “Lorem ipsum” and populate the text with something real if you haven’t already done so, and when you’ve styled it, try to actually read it.”
—Dmitry Fadeyev in Please Stop "Fixing" Font SmoothingLLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
Hallo Jo,
<h2>The New Way - using inline-block</h2> <div class="outerfloating-box"> <div class="floating-box">Floating box</div> <div class="floating-box">Floating box</div> </div>So wie kleine Kinder groß werden, sind möglicherweise auch Neue Wege irgendwann ausgelatscht. Du möchtest eigentlich weder floating noch inline-block verwenden.
Der neue Weg heißt flexbox.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)-
@@Matthias Apsel
So wie kleine Kinder groß werden, sind möglicherweise auch Neue Wege irgendwann ausgelatscht. Du möchtest eigentlich weder floating noch inline-block verwenden.
Der neue Weg heißt flexbox.
Und der andere neue heißt CSS-Grids …
Bis demnächst
… genau dann.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
Hallo zusammen,
Danke für die schnellen Antworten.
Das Festlegen der Breite mit width funktioniert hingegen bei allen Elementen in deinem Beispiel, aber …
Ich finde dieses Verhalten nämlich äußerst seltsam da die outerfloating-box sich ohne probleme durch >>Prozentangaben steuern lässt.
… möglicherweise bist du beim Probieren durcheinandergeraten.
Ja habe ich gerade gemerkt... habe mehrmals versucht die Prozentangabe eines Block Elements innerhalb des inneren inline-blocks zu gebe.
height-Angaben sind deshalb nur in bestimmten Fällen sinnvoll. Auch zum Testen ist es besser Container mit Inhalt zu füllen, zum Beispiel Blindtext.
Wird standartmäßig immer so gemacht. Danke.
So wie kleine Kinder groß werden, sind möglicherweise auch Neue Wege irgendwann ausgelatscht. Du >möchtest eigentlich weder floating noch inline-block verwenden.
Der neue Weg heißt flexbox.
Danke für den tipp, dann werd ich mich mal einlesen und alles umschreiben.
Aber man vergebe mir wenn ich das sage aber langsam hab ich keine lust mehr... erst ist position: alt, dann arbeite ich mich in display: ein und dann ist das alt und ich soll flexbox nehmen. Klar verändert sich das ständig. Aber ich als Hobby "HTML-schreiberling" kann mich doch nicht ständig in neue Sachen einarbeiten und erwarten das ich irgendwann einmal fertig werde...
Sorry, da kam meine Verzweifelung der letzten Tage durch...
Mit flexbox brauch ich dann ja auch keine media queries mehr weil sich das logischerweise schon der displaygröße anpasst und alles direkt intuitiv richtig verhält...! ?...Brauche glaub ich keine antwort darauf, ich hab mir wohl zuviel vorgenommen :(...
Gruß
Jo
-
Hallo j4nk3y,
Mit flexbox brauch ich dann ja auch keine media queries mehr weil sich das logischerweise schon der displaygröße anpasst und alles direkt intuitiv richtig verhält...! ?...Brauche glaub ich keine antwort darauf, ich hab mir wohl zuviel vorgenommen :(...
Das lässt sich so pauschal nicht sagen. Vielleicht brauchst du nicht mal flexbox. Wenn du die konkrete Seite statt eines allgemeinen Codeschnipsels zeigst, lässt sich dir besser helfen.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein) -
Hallo
In deinem Frust siehst du leider einiges falsch.
Der neue Weg heißt flexbox.
Danke für den tipp, dann werd ich mich mal einlesen und alles umschreiben.
Das stimmt bei deinem Problem leider nicht. Auch im Zusammenhang mit Flexbox funktionieren height-Angaben nicht anders als bei anderen display-Anweisungen.
erst ist position: alt, dann arbeite ich mich in display: ein und dann ist das alt und ich soll flexbox nehmen.
Du musst Flexbox nicht verwenden. Auch bereits länger eingeführte Lösungen funktionieren weiterhin. Du kannst also weiterhin problemlos "display: inline-block" zur Gestaltung verwenden. position und display sind gleichzeitig ins css eingeführt worden und dienen unterschiedlichen Einsatzzwecken. Sie sind also weder untereinander veraltet noch ist eins von beiden besser als das andere.
kann mich doch nicht ständig in neue Sachen einarbeiten und erwarten das ich irgendwann einmal fertig werde...
Fertig wird der gesamte EDV-Bereich nie werden. Im Gegensatz zu anderen Entwicklungen im EDV-Bereich schreiten HTML und CSS sogar äußerst langsam voran.
Mit flexbox brauch ich dann ja auch keine media queries mehr
Doch. Aber nicht so häufig.
Gruss
MrMurphy
-
-
Hallo
An den height-Angaben und dem "Prozent-Problem" hat sich seit der Einführung von CSS2 im Jahr 2000 nichts geändert.
Damit bei Containern wie div height-Angaben wirken, muss mindestens ein umgebendes Element eine height-Angabe in einer anderen Einheit als Prozent enthalten.
Das können auch html oder body sein. Wobei dann deren Flexibilität eingeschränkt wird.
Dir eine konkrete Problemlösung vorzuschlagen ist schwierig, da du zu wenig Informationen gibst.
Um die Flexibilität von html und body zu erhalten habe ich deshalb bei meinem Beispiel ein div.wrapper eingefügt, dem eine Höhe von 100vh und einen grünen Rahmen gegeben. Du kannst natürlich auch anderen Einheiten wie px, em oder rem verwenden. vh ist ähnlich flexibel wie Prozent. Infos zu vh bietet die Suchmaschine deiner Wahl mit dem Suchbegriff "css einheit vh".
Andere Spielereien wie overflow habe ich weggelassen, da die mit dem height-Problem nichts zu tun haben. Die kannst du nach und nach ja wieder einfügen.
Damit greifen auch die %-Werte von .outerfloating-box und .floating-box. Du kannst mit denen ja mal etwas rumspielen und dabei auch die Fenstergröße des Browsers ändern.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { margin: 0; } .wrapper { height: 100vh; border: 3px solid green; margin: 0; } .outerfloating-box { display: inline-block; width: 50%; height: 40%; border: 3px solid blue; } .floating-box { display: inline-block; width: 35%; height: 50%; margin: 10px; border: 3px solid red; } } </style> </head> <body> <div class="wrapper"> <h2>The New Way - using inline-block</h2> <div class="outerfloating-box"> <div class="floating-box"> <p>Floating box</p> </div> <div class="floating-box"> <p>Floating box</p> </div> </div> </div> </body> </html>Gruss
MrMurphy
-
@@MrMurphy1
Damit bei Containern wie div height-Angaben wirken, muss mindestens ein umgebendes Element eine height-Angabe in einer anderen Einheit als Prozent enthalten.
Nein.
Um die Flexibilität von html und body zu erhalten habe ich deshalb bei meinem Beispiel ein div.wrapper eingefügt
Warum sollte man das wollen?
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo
Na, um auf einer Beispielseite zu zeigen unter welchen Voraussetzungen height-Angaben in Prozent funktionieren können.
Gruss
MrMurphy
-
@@MrMurphy1
Na, um auf einer Beispielseite zu zeigen unter welchen Voraussetzungen height-Angaben in Prozent funktionieren können.
?? Worauf war das jetzt die Antwort?
Ein zusätzliches
div-Wrapper-Element braucht man dazu nicht.LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
-
Hi,
Damit bei Containern wie div height-Angaben [in Prozent] wirken, muss mindestens ein umgebendes Element eine height-Angabe in einer anderen Einheit als Prozent enthalten.
diese Aussage ist in mehreren Punkten falsch. Und damit meine ich nicht, dass du nur von prozentualen height-Angaben sprichst; das habe ich im Zitat mal ergänzt.
Natürlich ist der eindeutigste Fall der, dass das Elternelement des Containers eine feste Höhenangabe hat, etwa in px oder in em. Es genügt aber auch, wenn die Kette aller Vorfahrenelemente eine relative Höhenangabe haben, wobei die Ergebnisse dann oft schwierig zu überblicken sind. Ein typischer Fall ist die Hierarchie html>body>div, wo die typische Lösung darin besteht, body und html ebenfalls auf eine Höhe von 100% zu setzen.
Alternativ gibt man die Höhe des div-Elements in vh an, das sind dann unmittelbar Prozent der Höhe des Browserfensters. Dann ist die Kette der Vorfahrenelemente egal.Das können auch html oder body sein. Wobei dann deren Flexibilität eingeschränkt wird.
Inwiefern eingeschränkt?
Um die Flexibilität von html und body zu erhalten habe ich deshalb bei meinem Beispiel ein div.wrapper eingefügt, dem eine Höhe von 100vh und einen grünen Rahmen gegeben.
Das ist überflüssig.
So long,
Martin--
Bei der Umsetzung von guten Ideen hapert es meist viel mehr an der Wolle als an der Könne.
-