nicht angemeldet
Henry
Felix Riesterer
Matthias Apsel
Henry
Matthias Apsel
Henry
Matthias Apsel
Henry
Matthias Apsel
Henry
Hallo,
das wollte ich eigentlich hier gefragt haben, fand aber dann doch noch die Lösung im Netz. Schreibs trotzdem mal hierein, falls jemand ähnliches Problem hat.
Der Martin
Gunnar Bittersmann
Rolf B
#toprow{
width:100%;
background-color:#333;
border-bottom:3px dotted #ccc;
padding:4%;
}
Mit padding erschien ein horizontaler Scrollbalken, auch overflow-auto brachte keine Abhilfe. Letzendlich fand ich dann: box-sizing:border-box;
#toprow{
width:100%;
background-color:#333;
border-bottom:3px dotted #ccc;
padding:4%;
box-sizing:border-box;
}
Ich verstehe zwar immer noch nicht genau, warum die Browser ansonsten ein Berechnungsproblem haben, doch damit funktionierts zumindest.
Gruss
Henry
Lieber Henry,
üblicherweise bezieht sich width auf das, was ohne padding und margin übrig bleibt. Diese Berechnungsweise ist der default, wenn man box-sizing bei content-box belässt.
width:100%; padding:4%;
Du nimmst für den Inhalt die vollen 100% und gibst zuzüglich rechts und links (und oben und unten) noch jeweils 4% dazu, was eine Gesamtbreite von 108% bedeutet. Wenn da noch vererbte margin-Werte dazu kommen, ist es noch mehr.
Letzendlich fand ich dann: box-sizing:border-box;
In meinen Augen ist das eher ein Hack, als eine Lösung, denn hier wird der Quirksmode des Internet-Explorers emuliert. Man kann das wohl mittlerweile "einfach" benutzen. "Früher" hat man dann eben die Breite berechnet: width: calc(100% - 4% - 4%); - auch wenn das hier eher doof aussieht, aber wenn padding mit einer anderen Einheit angegeben würde, sähe das schon anders aus: width: calc(100% - 4em - 4px);
Ich verstehe zwar immer noch nicht genau, warum die Browser ansonsten ein Berechnungsproblem haben, doch damit funktionierts zumindest.
Dafür verstehe ich noch immer nicht genau, warum Du Dich in diese Dinge nicht genauer einliest. Es ist ja nicht so, als erklärte das Wiki das Box-Modell nicht in aller Ausführlichkeit...
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer, hallo @Henry,
Letzendlich fand ich dann: box-sizing:border-box;
In meinen Augen ist das eher ein Hack, als eine Lösung, denn hier wird der Quirksmode des Internet-Explorers emuliert.
Das sehe ich nicht so. Ich fand das ursprüngliche CSS-Boxmodell, was sich heute in box-sizing: content-box manifestiert, ziemlich unintuitiv.(1) Der alte IE hat sich zwar nicht spezifikationsgetreu verhalten (iirc nicht nur im Quirksmode) hat aber die intuitiven Vorstellungen von Abmessungen eines Objekts abgebildet. Gut auch, dass es der Wert padding-box nicht in die endgültige Spec geschafft hat.
Ich verstehe zwar immer noch nicht genau, warum die Browser ansonsten ein Berechnungsproblem haben, doch damit funktionierts zumindest.
Kein Berechnungsproblem, zweierlei Voraussetzungen. Und das Ergebnis stimmt nicht mit deinem Wunsch überein (siehe 1).
Dafür verstehe ich noch immer nicht genau, warum Du Dich in diese Dinge nicht genauer einliest. Es ist ja nicht so, als erklärte das Wiki das Box-Modell nicht in aller Ausführlichkeit...
Dito.
Bis demnächst
Matthias
Hallo @Matthias Apsel,@Felix Riesterer
Dafür verstehe ich noch immer nicht genau, warum Du Dich in diese Dinge nicht genauer einliest. Es ist ja nicht so, als erklärte das Wiki das Box-Modell nicht in aller Ausführlichkeit...
Dito.
und ihr solltet mal lesen was ich geschrieben habe:
…warum die Browser ansonsten ein Berechnungsproblem haben…
hat nicht mit dem Box-Modell zu tun.
Gruss
Henry
Hallo Henry,
…warum die Browser ansonsten ein Berechnungsproblem haben…
Welches Berechnungsproblem meinst du?
Bis demnächst
Matthias
Hallo Matthias,
…warum die Browser ansonsten ein Berechnungsproblem haben…
Welches Berechnungsproblem meinst du?
Wie auch hier im Wiki beschrieben, bedeutet padding der Innanabstand. Gewöhnlich klappt das auch wie gewünscht, ohne Einfluss auf den Aussenabstand. Diesmal allerdings nicht, deshalb die Alternative mit dem Box-Modell CSS. Versteh also nicht wieso padding sich nicht nach innen richtet und den Content enstsprechend verkleinert, wie ich das sonst normalerweise erlebe.
Gruss
Henry
Hallo Henry,
Wie auch hier im Wiki beschrieben, bedeutet padding der Innanabstand. Gewöhnlich klappt das auch wie gewünscht, ohne Einfluss auf den Aussenabstand. Diesmal allerdings nicht, deshalb die Alternative mit dem Box-Modell CSS. Versteh also nicht wieso padding sich nicht nach innen richtet und den Content enstsprechend verkleinert, wie ich das sonst normalerweise erlebe.
Weil du angegeben hast, dass das Element 100% breit sein soll. Und bei box-content: content-box (oder ohne eine Angabe zu box-content) ist das die Breite des Inhalts.
Kein Berechnungsproblem. Deine Vorgaben an den Browser führen zu einem Ergebnis, das nicht mit deinen Wünschen übereinstimmt. Der Browser macht genau das, was du ihm sagst. Felix hat es genau so beschrieben.
Bis demnächst
Matthias
Hallo Matthias,
Weil du angegeben hast, dass das Element 100% breit sein soll. Und bei
box-content: content-box(oder ohne eine Angabe zubox-content) ist das die Breite des Inhalts.
Ah, wegen den 100%. Ok, das habe ich nicht gewusst, weil dachte bisher Elemente wie H1, Div, usw sind automatisch 100%, sieht ja so aus wenn man Border drum legt.
sogar bei so extremen padding taucht das Problem nicht auf:
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;}
h1{
padding:300px;
border:3px solid red;
}
</style>
</head>
<body>
<h1>testabstand</h1>
</body>
</html>
erst wenn ich dem 100% gebe. Danke.
Gruss
Henry
Hallo Henry,
Ah, wegen den 100%. Ok, das habe ich nicht gewusst, weil dachte bisher Elemente wie H1, Div, usw sind automatisch 100%, sieht ja so aus wenn man Border drum legt.
Der default-wert für width ist auto. Das sagt dem Browser: Kümmere dich selbst darum.
Bis demnächst
Matthias
Hallo Matthias,
Ah, wegen den 100%. Ok, das habe ich nicht gewusst, weil dachte bisher Elemente wie H1, Div, usw sind automatisch 100%, sieht ja so aus wenn man Border drum legt.
Der default-wert für
widthistauto. Das sagt dem Browser: Kümmere dich selbst darum.
das ist, was mich verwirrt. Ich erzeuge eine Überschrift, setze Border darum und wenn ich dann padding hinzu gebe, habe ich innen mehr Abstand zu dem Inhalt. Das, weil, laut deiner Aussage, ich dem Browser überlasse wie er damit unzugehen hat. Ok. Nun gebe ich aber dem Element 100% Breite, der Browser denkt sich, diese Breite betrifft den Inhalt nicht den Container wo der Inhalt drin steht. Und somit kann er nicht auch noch einen Innenabstand ausführen, bleibt nur die Flucht nach aussen, verhält sich in dem Moment also wie Margin.
Also ist die eigentliche Frage, wieso bezieht ein Browser sich auf den Content und nicht auf das umgebene Element, dem habe ich schließlich die 100% gegeben. Weils vererbt wird? Ja, das könnte sein.
Gruss
Henry
Hallo Henry,
Der default-wert für
widthistauto. Das sagt dem Browser: Kümmere dich selbst darum.das ist, was mich verwirrt. Ich erzeuge eine Überschrift, setze Border darum und wenn ich dann padding hinzu gebe, habe ich innen mehr Abstand zu dem Inhalt. Das, weil, laut deiner Aussage, ich dem Browser überlasse wie er damit unzugehen hat. Ok. Nun gebe ich aber dem Element 100% Breite, der Browser denkt sich, diese Breite betrifft den Inhalt nicht den Container wo der Inhalt drin steht. Und somit kann er nicht auch noch einen Innenabstand ausführen, bleibt nur die Flucht nach aussen, verhält sich in dem Moment also wie Margin.
nicht ganz - den Unterschied zwischen padding und margin siehst du, wenn zusätzlich noch ein border oder ein background im Spiel ist.
Gibst du keine Breite an (lässt es also beim Defaultwert auto), macht der Browser das Element so breit wie möglich und berechnet die Breite des Inhalts automatisch aus verfügbarer Breite minus margin minus border minus padding.
Setzt du die Breite (des Inhalts) auf 100%, hält sich der Browser daran und addiert dazu noch padding, border und margin. Das Element wird also insgesamt breiter als 100%.
Also ist die eigentliche Frage, wieso bezieht ein Browser sich auf den Content und nicht auf das umgebene Element, dem habe ich schließlich die 100% gegeben. Weils vererbt wird?
Nee, weil's so definiert ist. Wie schon erwähnt: Bei alten IE-Versionen (IE8 war AFAIR der erste, der's richtig konnte) war es so, dass sich die Breite auf das gesamte Element einschließlich padding (und AFAIK margin) bezog. Damals ein Verstoß gegen die Spezifikation, die box-sizing-Eigenschaft gab's noch nicht.
Daher musste man oft böse tricksen, wenn ein Layout mit definierten Breiten im IE und in standardkonformen Browsern annähernd gleich aussehen sollte.
Live long and pros healthy,
Martin
@@Der Martin
Gibst du keine Breite an (lässt es also beim Defaultwert auto), macht der Browser das Element so breit wie möglich
Wenn die display-Eigenschaft des Elements den Wert block hat. Bei inline macht der Browser das Element so schmal wie möglich.
Daher musste man oft böse tricksen, wenn ein Layout mit definierten Breiten im IE und in standardkonformen Browsern annähernd gleich aussehen sollte.
Der Trick war eine DOCTYPE-Angabe, die den Browser in den Standard-Modus schickt. Deshalb schleppen wir das sonst eigentlich völlig unnütze <!DOCTYPE html> immer noch mit uns rum.
😷 LLAP
Hallo Gunnar,
Gibst du keine Breite an (lässt es also beim Defaultwert auto), macht der Browser das Element so breit wie möglich
Wenn die
display-Eigenschaft des Elements den Wertblockhat.
ja, das hatte ich hier impliziert. Aber gut, wenn du es trotzdem noch ansprichst.
Bei
inlinemacht der Browser das Element so schmal wie möglich.
Genua.[tm]
Daher musste man oft böse tricksen, wenn ein Layout mit definierten Breiten im IE und in standardkonformen Browsern annähernd gleich aussehen sollte.
Der Trick war eine DOCTYPE-Angabe, die den Browser in den Standard-Modus schickt.
Das meine ich nicht; wenn mich nicht alles täuscht, hatte man das korrekte Box Model bei Microsoft erst ab IE8 "auf Wunsch" realisiert.
Ich meinte die Verschachtelung von mehreren scheinbar unnötigen Blockelementen, um möglichst alle "Schrauben" einzeln drehen zu können.
Live long and pros healthy,
Martin
Hallo Martin,
das Boxmodell wurde mit IE 6 gefixt. Ohne <!doctype> schickt den IE in die Prä-XP Zeit zurück, zum IE 5.5, der den Namen Quirks noch aufrichtiger verdient als seine Folge-Inkarnationen.
Rolf
@@Der Martin
wenn mich nicht alles täuscht, hatte man das korrekte Box Model bei Microsoft erst ab IE8 "auf Wunsch" realisiert.
Hm, weiß nicht mehr.
Und die Korrektheit liegt im Auge des Betrachters. Besser wär’s wohl gewesen, man hätte das Verhalten des IE als Standard definiert; d.h. border-box wäre der Defaultwert der box-sizing-Eigenschaft (die es damals freilich noch nicht gab).
😷 LLAP
Hallo,
wenn mich nicht alles täuscht, hatte man das korrekte Box Model bei Microsoft erst ab IE8 "auf Wunsch" realisiert.
Hm, weiß nicht mehr.
ich wohl auch nicht. Aber Rolf wusste es noch: Nicht erst mit IE8, wie ich dachte, sondern IE6.
Und die Korrektheit liegt im Auge des Betrachters. Besser wär’s wohl gewesen, man hätte das Verhalten des IE als Standard definiert
Den Standpunkt habe ich seinerzeit auch immer vertreten, aber wenn ich mich getraut habe, diese Meinung zu äußern, wehte mir immer ein stürmischer Wind der Entrüstung aus der ganzen Forengemeinde entgegen. 😉
Live long and pros healthy,
Martin