[Erledigt] margin-bottom wirkungslos

drsoong · 27.02.2010, 23:06

Hi

im folgenden Code werden meine zwei inneren Divs nicht wie gewünscht mit 30px am unteren Rand ausgerichtet. Kann mir jemand sagen warum?
Oder, besser: Wie muß ich das richtig schreiben?

Code:

<body>
<div style="margin-left:50px;margin-top:50px;width:700px;height:450px;border-style:solid;border-width:1px;border-color:green">
<div style="margin-bottom:30px;width:50px;height:200px;background-color:blue;float:left;"></div>
<div style="margin-bottom:30px;width:50px;height:220px;background-color:blue;float:left;"></div>
</div>
</body>

php2go · 27.02.2010, 23:22

Hallo

Nach deinen zwei gefloateten Boxen solltest du noch einfügen:

Code:

<div style="clear: both;"></div>

Damit wird das Floaten der Container beendet und es sollte funktionieren!

Gruß, php2go

Hinweis: Wann immer möglich, sollte vermieden werden, CSS Angaben im style-Attribut zu definieren. Besser zentral im Dokument, am besten in einer externen Datei!

drsoong · 27.02.2010, 23:32

Zitat:

Zitat von php2go

Nach deinen zwei gefloateten Boxen solltest du noch einfügen:

Code:

<div style="clear: both;"></div>

Damit wird das Floaten der Container beendet und es sollte funktionieren!

Hast Du das mal getestet. Bei mir bewirkt das leider nichts. IE8, Opera 10

php2go · 27.02.2010, 23:49

Was meinst du mit: werden nicht wie gewünscht mit 30px am unteren Rand ausgerichtet? Ich glaube ich habe dich falsch verstanden, weil du es ein wenig komisch beschrieben hast.

Der umschließende grün-randige Container hat eine Höhe von 450px und die beiden float-Container haben jeweils nur eine Höhe von 220px. Die Float-Container haben also einen Abstand nach unten zum grünen Rand von 450 - 220 = 230 Pixel. Das sind 200px mehr als margin-bottom. Was willst du denn haben? Wenn sich die grüne Box anpassen soll an die Höhe der beiden float-Container plus margin-bottom, dann darfst du ihr keine Höhe zuweisen!

drsoong · 27.02.2010, 23:58

Zitat:

Zitat von php2go

Was willst du denn haben?

Das ganze ist ein erster Versuch ein Bar Chart zu basteln. Den äußeren Container will ich per position:absolute da hinschieben, wo ich ihn haben will.

Innen sollen meine Bars eine Linie entlang stehen, die einen Abstand von 30px zum unteren Rand des äußeren Containers hat.

php2go · 28.02.2010, 00:04

Achsoo.. dann sieht die Sache schon ganz anders aus!

So einfach geht das nicht, aber da gibt es bestimmt mehrere Möglichkeiten. Spontan fällt mir ein:

Erläuterung: Die äußere Box hat bspw. eine Höhe von 430px. Die unteren 30px sollen frei bleiben, also bleiben für die Bars noch die oberen 400px. Zeigt ein Balken 50% dann ist er 200px hoch und hat einen oberen äußeren Abstand von ebenfalls 200px. Zeigt er 75% (immer von diesen 400px) dann hat er eine Höhe von 300px und der Rest ist margin-top = 100px

Code:

<div style="border:1px solid green; width:500px; height:430px;">
    <div style="width:50px; height:200px; margin-top:200px; float:left; background: red;"></div>
    <div style="width:50px; height:300px; margin-top:100px; float:left; background: blue;"></div>
    <div style="clear:both"></div>
</div>

Momentan fällt mir nichts anderes ein, das SO mit HTML umzusetzen. Später könnte man die Höhen dynamisch mit PHP berechnen (wäre relativ einfach).

drsoong · 28.02.2010, 00:17

php2go: Gut, das klappt so. Ich hatte gehofft, ich könnte mir die Rechnerei im inneren sparen. Wenn man eine unteren Abstand (30px) und die länge des Balkens definiert, ist zumindest vom logischen Standpunkt aus alles Nötige gesagt. Warum geht hier nur margin-top?

php2go · 28.02.2010, 00:23

Das ist schwierig zu erklären. Das margin-bottom zieht den div-Container nicht nach unten an die grüne Linie (mit einem Abstand von 30px) sondern er schiebt die grüne Linie, wenn der Platz zwischen ihr und dem div-Container kleiner als 30px wäre weiter nach unten. Komisch ausgedrückt

drsoong · 28.02.2010, 00:29

php2go: Gut, danke. Dann habe ich die Anweisung margin-bottom wohl falsch verstanden. Deine Erklärung ist verständlich. Werd den Thread mal auf Erledigt setzen.

php2go · 28.02.2010, 00:30

Du kannst auch mal nach "CSS charts" oder "CSS bar charts" googeln, und nachsehen, wie die das dort umsetzen.
Wenn du noch Hilfe brauchst wegen der dynamischen Berechnung durch PHP dann melde dich einfach nochmal

EDIT: Man könnte auch mit der CSS-Anweisung "vertical-align" experimentieren, da diese aber browserübergreifend Probleme bereitet, würde ich hiervon abraten!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Standardeinstellungen padding und margin bei Textformatierung (p, h1, h2,.	9999	HTML, Usability und Barrierefreiheit	2	17.10.2009 16:50
IE 6.0 und CSS-Positionierung mit bottom	rocco	HTML, Usability und Barrierefreiheit	10	03.03.2009 12:24
CSS problem	gandalf	HTML, Usability und Barrierefreiheit	6	03.09.2008 23:46
IE6: Container mit Float dabei wird margin doppelt gewertet	DonTermi	HTML, Usability und Barrierefreiheit	1	11.01.2007 09:02
margin-top margin left in Opera		HTML, Usability und Barrierefreiheit	2	13.09.2006 17:17
[CSS] Body Margin / Div Padding	I-Spy	HTML, Usability und Barrierefreiheit	4	10.05.2006 15:03
Via link auf den bottom der page	GrungeRocker	PHP Tipps 2007	14	25.12.2005 23:59
Wordpress Template		HTML, Usability und Barrierefreiheit	8	22.08.2005 11:21
flush() wirkungslos		PHP Tipps 2005-2	8	15.06.2005 19:57
CSS validator bottom nicht anerkannt		HTML, Usability und Barrierefreiheit	1	10.06.2005 18:08
Komisches Div margin Problem nach float &amp; clear		HTML, Usability und Barrierefreiheit	1	15.05.2005 10:05
Ausrichten am unteren Rand (bottom)	Stümper	HTML, Usability und Barrierefreiheit	5	09.02.2005 10:04
unset wirkungslos...was mach ich falsch		PHP Tipps 2004-2	13	21.12.2004 17:22
Margin: Kein Valides HTML 4.0 / CSS	DutziMan	HTML, Usability und Barrierefreiheit	12	21.06.2004 14:33


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.02.2010, 23:22
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Hallo Nach deinen zwei gefloateten Boxen solltest du noch einfügen: Code: <div style="clear: both;"></div> Damit wird das Floaten der Container beendet und es sollte funktionieren! Gruß, php2go Hinweis: Wann immer möglich, sollte vermieden werden, CSS Angaben im style-Attribut zu definieren. Besser zentral im Dokument, am besten in einer externen Datei!

27.02.2010, 23:49
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Was meinst du mit: werden nicht wie gewünscht mit 30px am unteren Rand ausgerichtet? Ich glaube ich habe dich falsch verstanden, weil du es ein wenig komisch beschrieben hast. Der umschließende grün-randige Container hat eine Höhe von 450px und die beiden float-Container haben jeweils nur eine Höhe von 220px. Die Float-Container haben also einen Abstand nach unten zum grünen Rand von 450 - 220 = 230 Pixel. Das sind 200px mehr als margin-bottom. Was willst du denn haben? Wenn sich die grüne Box anpassen soll an die Höhe der beiden float-Container plus margin-bottom, dann darfst du ihr keine Höhe zuweisen!

28.02.2010, 00:04
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Achsoo.. dann sieht die Sache schon ganz anders aus! So einfach geht das nicht, aber da gibt es bestimmt mehrere Möglichkeiten. Spontan fällt mir ein: Erläuterung: Die äußere Box hat bspw. eine Höhe von 430px. Die unteren 30px sollen frei bleiben, also bleiben für die Bars noch die oberen 400px. Zeigt ein Balken 50% dann ist er 200px hoch und hat einen oberen äußeren Abstand von ebenfalls 200px. Zeigt er 75% (immer von diesen 400px) dann hat er eine Höhe von 300px und der Rest ist margin-top = 100px Code: <div style="border:1px solid green; width:500px; height:430px;"> <div style="width:50px; height:200px; margin-top:200px; float:left; background: red;"></div> <div style="width:50px; height:300px; margin-top:100px; float:left; background: blue;"></div> <div style="clear:both"></div> </div> Momentan fällt mir nichts anderes ein, das SO mit HTML umzusetzen. Später könnte man die Höhen dynamisch mit PHP berechnen (wäre relativ einfach). Geändert von php2go (28.02.2010 um 00:08 Uhr).

28.02.2010, 00:17
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.003	php2go: Gut, das klappt so. Ich hatte gehofft, ich könnte mir die Rechnerei im inneren sparen. Wenn man eine unteren Abstand (30px) und die länge des Balkens definiert, ist zumindest vom logischen Standpunkt aus alles Nötige gesagt. Warum geht hier nur margin-top?

28.02.2010, 00:23
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Das ist schwierig zu erklären. Das margin-bottom zieht den div-Container nicht nach unten an die grüne Linie (mit einem Abstand von 30px) sondern er schiebt die grüne Linie, wenn der Platz zwischen ihr und dem div-Container kleiner als 30px wäre weiter nach unten. Komisch ausgedrückt

28.02.2010, 00:29
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.003	php2go: Gut, danke. Dann habe ich die Anweisung margin-bottom wohl falsch verstanden. Deine Erklärung ist verständlich. Werd den Thread mal auf Erledigt setzen.

28.02.2010, 00:30
php2go Erfahrener Benutzer Registriert seit: 09.01.2010 Beiträge: 185 PHP-Kenntnisse: Fortgeschritten	Du kannst auch mal nach "CSS charts" oder "CSS bar charts" googeln, und nachsehen, wie die das dort umsetzen. Wenn du noch Hilfe brauchst wegen der dynamischen Berechnung durch PHP dann melde dich einfach nochmal EDIT: Man könnte auch mit der CSS-Anweisung "vertical-align" experimentieren, da diese aber browserübergreifend Probleme bereitet, würde ich hiervon abraten! Geändert von php2go (28.02.2010 um 00:51 Uhr).