nicht angemeldet
Warum vergrößert sich Element durch padding?
-2 0 0 Korrektur
0 0
0 
Der Martin
0 0
Warum vergrößert sich Element durch padding?
Gunnar BittersmannHallo,
sorry für die vieleicht etwas undeutliche Überschrift, ich werd jetzt mal versuchen mein Problem näher zu erläutern.
Also ich habe mittels einer Variable #Leiste auf meiner Seite eine schmale, horizonzale Leiste dargestellt, die ich in meiner CSS Datei über position:absolute; top; left; width; und height; positioniert habe.
Wenn ich nun in diese Leiste etwas hineinschreibe, z.b.
<div id="Leiste"> blabla </div> (in der HTML Datei), klebt der Text (blabla) natürlich ganz links außen.Ich würde nun aber gerne einen Abstand zwischen dem linken Innenrand und meiner Schrift haben und habe also einen padding-left gesetzt.
Der Innenabstand wird nun auch gesetzt und die Schrift rückt etwas mehr nach rechts, und jetzt tritt das Problem auf: Die gesamte Leiste wird nun einfach nach rechts ausgedehnt, also nach rechts länger obwohl ich eigentlich die Leiste so beibehalten wollte und nur den Text nicht direkt am linken Innenrand kleben haben wollte.
Ich könnte natürlich diesen ungewollten Effekt wieder ausgleichen indem ich einfach die Leiste wieder insgesamt kleiner mache, aber ich verstehe grundsätzlich nicht warum ein Innenabstand auf der linken Seite die Leiste nach rechts "anwachsen" lächst....
Wäre wirklich super wenn mir da jemand mithelfen könnte :)
Gruß Panther
-
Hi Panther!
Wäre wirklich super wenn mir da jemand mithelfen könnte :)
Benutze Margin! Und entschuldige meine knappe Antwort. Mein Zug wartet nicht. =)
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Hi Panther!
Wäre wirklich super wenn mir da jemand mithelfen könnte :)
Benutze Margin! Und entschuldige meine knappe Antwort. Mein Zug wartet nicht. =)MfG H☼psel
Hallo Hopsel,
danke schön ;), werds mal ausprobieren hab gestern auch schon daran gedacht...Hm aber warum meine Version nicht funktioniert ist mir immer noch nicht ganz klar :/?!
Gruß Panther
-
-
Hallo,
das von dir beobachtete Verhalten ist korrekt.
Beschäftige dich mit dem Bos Model um zu verstehen wie es genau funktioniert. Und warum so.
so long
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.-
Korrektur:
-
Hallo Ole,
danke schön für die Antwort!
Jo das werd ich mir mal angucken ;), selberlernen ist immer besser ^^
Danke nochmal!Gruß Panther
-
-
-
hi
wäre da nicht http://www.bossmodels.com/@tile=dieses naheliegender gewesen? :)
so long
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.
-
-
-
-
Hi,
Ich könnte natürlich diesen ungewollten Effekt wieder ausgleichen indem ich einfach die Leiste wieder insgesamt kleiner mache, aber ich verstehe grundsätzlich nicht warum ein Innenabstand auf der linken Seite die Leiste nach rechts "anwachsen" lächst....
das Box Model definiert die Breite eines Elements als Breite seines Inhalts. Margin, border, padding kommen dann noch dazu. Hast du also eine Breite von 100% (für den Inhalt, wohlgemerkt) festgelegt und definierst dann noch ein margin oder padding, dann ist die Gesamtbreite des Elements gleich der festgelegten Breite *plus* margin oder padding, also mehr als 100%.
Darüber gibt es schon unzählige Diskussionen; ich persönlich finde diese Festlegung auch blödsinnig und unlogisch, aber sie ist nun mal Standard.Ciao,
Martin--
Es gibt Tage, da gelingt einem einfach alles.
Aber das ist kein Grund zur Sorge; das geht vorbei. -
Ich könnte natürlich diesen ungewollten Effekt wieder ausgleichen indem ich einfach die Leiste wieder insgesamt kleiner mache, aber ich verstehe grundsätzlich nicht warum ein Innenabstand auf der linken Seite die Leiste nach rechts "anwachsen" lächst....
Sagt dir der Begriff http://de.selfhtml.org/css/formate/box_modell.htm@title=Box-Modell etwas?
" Seit der CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition
der Breite des Elementinhalts (width),
des Innenabstands (padding),
der Rahmenstärke (border-width) und
des Außenabstands (margin)."Dein "Problem" ist also die W3-konforme Anzeige, und die "Problem"-Lösung hast du ja auch schon beschrieben. Allerdings spielt hier der IE wieder mal <http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug@title=nicht mit>, deswegen rate ich dir, für das Padding einen zweiten DIV-Container innerhalb des ersten zu platzieren und dessen padding auf den gewünschten Wert zu setzen.
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>-
Hello out there!
Dein "Problem" ist also die W3-konforme Anzeige, und die "Problem"-Lösung hast du ja auch schon beschrieben. Allerdings spielt hier der IE wieder mal <http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug@title=nicht mit>,
Du sprichst von IE < 6.
Der 6er setzt das Box-Modell richtig um, wenn man ihn nicht im Quirks-Modus vor sich hin dümpeln lässt. Du hattest auch den auf den von dir verlinkten folgenden Abschnitt gelesen?
deswegen rate ich dir, für das Padding einen zweiten DIV-Container innerhalb des ersten zu platzieren und dessen padding auf den gewünschten Wert zu setzen.
Davon rate ich ab. Wozu unnötige Elemente ins Markup einfügen?
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Du sprichst von IE < 6.
Der 6er setzt das Box-Modell richtig um, wenn man ihn nicht im Quirks-Modus vor sich hin dümpeln lässt. Du hattest auch den auf den von dir verlinkten folgenden Abschnitt gelesen?
Freilich, und nicht zu selten. Dieses Detail fand ich aber für die Diskussion eher nebensächlich, und eben weil es in SELFHTML detailliert beschrieben wird, wollte ich nur allgemein auf das Problem hinweisen ;).
Davon rate ich ab. Wozu unnötige Elemente ins Markup einfügen?
Ist wohl vom persönlichen Programmier-Stil abhängig. Meiner Meinung nach hat die Unterscheidung durch CSS-Hacks den Nachteil, dass man eine Größenänderung an mehreren Stellen durchführen muss. Wenn man dann spät nachts irgendwelche Änderungen durchführt, vergisst man am Ende irgendwas ;).
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>-
Hello out there!
Der 6er setzt das Box-Modell richtig um, wenn man ihn nicht im Quirks-Modus vor sich hin dümpeln lässt. Du hattest auch den auf den von dir verlinkten folgenden Abschnitt gelesen?
Freilich, und nicht zu selten.
Und auch verstanden? >;->
Davon rate ich ab. Wozu unnötige Elemente ins Markup einfügen?
Ist wohl vom persönlichen Programmier-Stil abhängig. Meiner Meinung nach hat die Unterscheidung durch CSS-Hacks den Nachteil, […]Wenn man den IE in den Standard-compliant-Modus versetzt, bedarf es für dieses „Problem“ gar keiner Hacks.
Und weder HTML noch CSS wird „programmiert“.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Der 6er setzt das Box-Modell richtig um, wenn man ihn nicht im Quirks-Modus vor sich hin dümpeln lässt. Du hattest auch den auf den von dir verlinkten folgenden Abschnitt gelesen?
Freilich, und nicht zu selten.
Und auch verstanden? >;->
Anscheinend nicht:
Wenn man den IE in den Standard-compliant-Modus versetzt, bedarf es für dieses „Problem“ gar keiner Hacks.
Ich dachte, bei IE < 5.5 hilft das nichts? :-o
Und weder HTML noch CSS wird „programmiert“.
Omg, hier muss ja wirklich jedes Wort stimmen ;-p. Na gut, dann eben der persönliche "Code-Stil", oder was auch immer - welcher Fachbegriff genügt an dieser Stelle den hohen Ansprüchen der werten Forums-Benutzer?
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>-
Hello out there!
Wenn man den IE in den Standard-compliant-Modus versetzt, bedarf es für dieses „Problem“ gar keiner Hacks.
Ich dachte, bei IE < 5.5 hilft das nichts? :-oStimmt.
Aber Nutzer von Schwarz/weiß-Fernsehern können nicht erwarten, Sendungen in Farbe zu sehen. Aber sehen können sie diese.
Nutzer von alten IEs – hm, alt sind sie ja alle (die IEs, nicht die Nutzer; die sehen nur alt aus) – also von uralten IEs können halt auch nicht erwarten, Webseiten optimal zu sehen. Aber sehen können sie diese.
Und einen Anreiz, den Browser zu wechseln, kann man ja IE5-Nutzern schon bieten. ;-)
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Wenn man den IE in den Standard-compliant-Modus versetzt, bedarf es für dieses „Problem“ gar keiner Hacks.
Ich dachte, bei IE < 5.5 hilft das nichts? :-oStimmt.
Aber Nutzer von Schwarz/weiß-Fernsehern können nicht erwarten, Sendungen in Farbe zu sehen. Aber sehen können sie diese.[...]
Ok, hast mich überzeugt ;). Werd das gleich mal bei meiner Site ausbessern :)
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
-
-
-
Hallo Gunnar,
[...] gelesen?
Freilich, und nicht zu selten.
Und auch verstanden? >;->*scnr*
Martin--
Wissen erwirbt man, indem man immer das Kleingedruckte sorgfältig liest.
Erfahrung bekommt man, indem man das nicht tut.
-
-
-
-
-
Hallo Leute,
danke für die vielen wirklich hilfreichen Antworten :)
Ich fasse mal kurz zusammen, also wenn ich das jetzt richtig verstanden habe kann ich mein Problem durch einen weiteren div-container umgehen (ist ja in Self HTML beschrieben) oder eben einfach die Inhaltsgröße reduzieren, also die Übergröße sozusagen wieder ausgleichen (wobei hier Benutzer älterer Browser keine korrekte Darstellung hätten)
Sehe ich das richtig ^^?
Dürfte ich fragen wie ihr mit diesem Problem umgeht, also lieber weitere div-container oder auf korrekte Darstellung bei älteren Browsern verzichten?Vielen Dank! Gruß Panther
-
Hi,
Ich fasse mal kurz zusammen, also wenn ich das jetzt richtig verstanden habe kann ich mein Problem durch einen weiteren div-container umgehen (ist ja in Self HTML beschrieben) oder eben einfach die Inhaltsgröße reduzieren, also die Übergröße sozusagen wieder ausgleichen (wobei hier Benutzer älterer Browser keine korrekte Darstellung hätten)
Sehe ich das richtig ^^?Ja. Wobei ich nicht von "Übergröße" sprechen würde. Der IE bis 5.5 und der IE sowie Opera im quirks mode sind AFAIK die einzigen Browser, die eine "Untergröße" Darstellen.
Dürfte ich fragen wie ihr mit diesem Problem umgeht, also lieber weitere div-container oder auf korrekte Darstellung bei älteren Browsern verzichten?
Überflüssige Container im HTML sind unschön. Da bei einem DOCTYPE für den standardkompatiblemn Modus ausschließlich ältere IEs eine Fehldarstellung haben, beseitige ich diese ggfls. über enen CSS-Hack - ein CSS-Problem sollte möglichst auch über CSS gelöst werden.
freundliche Grüße
Ingo
-