margin-bottom funktioniert nicht

[jim]

Hallo,
ich habe meinen maincontent mit margin positioniert, alle 3 richtungen funktionieren auch, nur margin-bottom nicht. meine seite ist folgendermaßen aufgebaut:

  
body { height: 100%; width: 100%; position: absolute; }  
  
#container { margin: 0; }  
  
#main { margin: 180px 231px 0px 419px; padding: 0px }  
  

das ist zugleich auch die reihenfolge von meinem html, egal wie ich den margin-bottom verstelle es passiert nichts. Ich habe dem container auch schon height und width auf 100% zugewiesen, soll was bringen habe ich gelesen, ändert aber nichts.
Jemand ne Idee?

[Beat]

ich habe meinen maincontent mit margin positioniert, alle 3 richtungen funktionieren auch, nur margin-bottom nicht. meine seite ist folgendermaßen aufgebaut:

body { height: 100%; width: 100%; position: absolute; }

#container { margin: 0; }

#main { margin: 180px 231px 0px 419px; padding: 0px }

> das ist zugleich auch die reihenfolge von meinem html, egal wie ich den margin-bottom verstelle es passiert nichts. Ich habe dem container auch schon height und width auf 100% zugewiesen, soll was bringen habe ich gelesen, ändert aber nichts.  
> Jemand ne Idee?  
  
Ich denke, du erwartest ein feature zur positionierung, das für position:static nicht vorgesehen ist.  
Verwende also eine andere positionierung.  
  
Achte auch auf die höhe von body, denn dessen höhe ist ev. nicht anwendbar oder ist die höhe 100% von 0;  
Kommt auf den nicht dokumentierten Kontext darauf an.  
Also ev. auch das html-Element dimensionieren.  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[jim]

Ich denke, du erwartest ein feature zur positionierung, das für position:static nicht vorgesehen ist.
Verwende also eine andere positionierung.

Achte auch auf die höhe von body, denn dessen höhe ist ev. nicht anwendbar oder ist die höhe 100% von 0;
Kommt auf den nicht dokumentierten Kontext darauf an.
Also ev. auch das html-Element dimensionieren.

html hat auch eine absolute positionierung + height und width auf 100%.
vor dem container ist noch ein #page element, ich habe testweise allen mal 100% height und width zugewiesen, ändert aber nichts..
Bei Firebug sieht man doch die größe des Elementes in Blau und Gelb, wenn ich margin-bottom veränder dann verändert sich die Gelbe anzeige, was bedeutet die? Hoffe ihr versteht was ich meine :D
Habe versucht den Elementen die positionierung wegzunehmen und auch auf relativ gestellt, irgendwie ist das aber nur wildes rumspielen bei mir :/

display: block hat leider auch nichts gebracht :(

[ChrisB]

Hi,

html hat auch eine absolute positionierung

*Wa-rum*?

Habe versucht den Elementen die positionierung wegzunehmen und auch auf relativ gestellt, irgendwie ist das aber nur wildes rumspielen bei mir :/

html und body absolute zu Positionieren, ist selten eine gute Idee.
Was willst du damit erreichen?

MfG ChrisB

[jim]

html und body absolute zu Positionieren, ist selten eine gute Idee.
Was willst du damit erreichen?

Gute frage, was ich damit bezwecken wollte ist mir mittlerweile unbekannt, ich glaube damals gab es ein problem mit der Height meiner Sidebars.. aber ist ja auch egal, die absolute posi ist überall raus..
ändert aber nichts daran dass mein Maincontent keinen margin nach unten annehmen möchte :(

[jim]

Gute frage, was ich damit bezwecken wollte ist mir mittlerweile unbekannt, ich glaube damals gab es ein problem mit der Height meiner Sidebars.. aber ist ja auch egal, die absolute posi ist überall raus..
ändert aber nichts daran dass mein Maincontent keinen margin nach unten annehmen möchte :(

Ich habe gerade bei #page mit margin gespielt, margin-top nimmt er an aber bottom nicht, wieso? das einzigste elternelement was der hat ist body, der hat nur 100% height und width.
Verstehe nicht warum margin-bottom nicht angenommen wird.

[Stephan]

»» html und body absolute zu Positionieren, ist selten eine gute Idee.
»» Was willst du damit erreichen?
»»
Gute frage, was ich damit bezwecken wollte ist mir mittlerweile unbekannt, ich glaube damals gab es ein problem mit der Height meiner Sidebars.. aber ist ja auch egal, die absolute posi ist überall raus..
ändert aber nichts daran dass mein Maincontent keinen margin nach unten annehmen möchte :(

Versuch es anstatt mit margin-bottom nur mit bottom.
Ich glaube, das geht aber nur mit position: absolute;.

[Jim]

Versuch es anstatt mit margin-bottom nur mit bottom.
Ich glaube, das geht aber nur mit position: absolute;.

Dann sitzt der Content unten fest und interessiert sich nicht mehr für das margin-top..
Er soll halt immer einen gewissen abstand zu allen seiten haben egal wie das Browserfenster verkleinert oder vergrößert wird.

Habe auch schon versucht ihm das mit javascript einzuprügeln,
aber document.getElementById("main").style.marginBottom="50px";
hat ihn auch nicht interessiert, vielleicht hab ich das auch falsch gesetzt oder so..

[Stephan]

Versuch es mal mit "display: block;" in #container und #main.

[Daniel unreg]

Hallo,

ich habe meinen maincontent mit margin positioniert, alle 3 richtungen funktionieren auch, nur margin-bottom nicht.

Vermutlich fällt margin-bottom von 'maincontent' mit dem margin-bottom des Elternelements zusammen.

Informiere dich über collapsing margins (Zusammenfallende Außenabstände).

Gruß

[Jim]

Vermutlich fällt margin-bottom von 'maincontent' mit dem margin-bottom des Elternelements zusammen.

Informiere dich über collapsing margins (Zusammenfallende Außenabstände).

mhm, das Elternelement hat doch aber keinen margin-bottom, wie können die denn zusammenfallen?

[Daniel unreg]

mhm, das Elternelement hat doch aber keinen margin-bottom, wie können die denn zusammenfallen?

Es wird immer die geößere Angabe verwendet.

[Jim]

Es wird immer die geößere Angabe verwendet.

mhm.. sorry, verstehe nicht ganz genau was du meinst. Soll ich dem Elternelement einen kleinen margin zuweisen damit der margin-bottom angewendet wird oder dem Elternelement einen größeren margin-bottom zuweisen?

[Beat]

mhm.. sorry, verstehe nicht ganz genau was du meinst. Soll ich dem Elternelement einen kleinen margin zuweisen damit der margin-bottom angewendet wird oder dem Elternelement einen größeren margin-bottom zuweisen?

Ich habe mal einen Testcase für dich, der dir zeigt, wie ich ein Element in der Grösse abhängig von den Elternelementen definieren kann.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
 "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Untitled</title>  
<style type="text/css">  
<!--  
head, body  
	{ height:100%; margin:0;padding:0;}  
body  
	{border:1px solid red}  
div{ border:1px solid blue;  
	margin:10% 30%;  
	position:absolute;  
	top:0; bottom:0;left:0;right:0;  
	overflow:auto;}  
-->  
</style>  
  
</head>  
<body>  
<p>normaler absatz</p>  
<div>div<br>  
{ border:1px solid blue;<br>  
	margin:10% 30%;<br>  
	position:absolute;<br>  
	top:0; bottom:0;left:0;right:0;<br>  
	overflow:auto;}<br>  
</div>  
</body>  
</html>  

mfg Beat

[Jim]

Ich habe mal einen Testcase für dich, der dir zeigt, wie ich ein Element in der Grösse abhängig von den Elternelementen definieren kann.

PERFEKT, danke dir, jetzt funktioniert es. <3
Hab es jetzt auch mehr oder weniger verstanden!