Margin-Top funktioniert nicht

Darkxor

Hallo liebe Foren Helfer,

ich versuche ein Status Image mit margin-left und margin-top in einem Rahmen an die richtigen Positionen zu bringen. Mit Margin-left klappt es wie man im Bild sieht, jedoch nicht mit Margin-top. Hier wird aus welchen Gründen auch immer über dem überelement der Statusfüllung der Abstand eingebaut, was ja eigentlich nicht sein kann:

[Blockierte Grafik: http://www.abload.de/img/pic631kr2g.png]

HTML:

HTML

<div class="wrapper">
    <div class="header">
    <img src="img/header.png" alt="..." />
    </div>

    <div class="status">
        <div class="statusbar">
        </div>
    </div>
</div>

Und die CSS:

HTML

.wrapper
{
    border:1px solid #A0A0A0;
    background-color:#F5F5F5;
    margin:auto;
    width:500px;
    margin-top:10px;
}
.status
{
    background-image:url(../img/statusbar.png);
    border-bottom:1px solid #A8A8A8;
    width:500px;
    height:70px;
}
.statusbar
{
    background-image:url(../img/statusbarfuellung.png);
    height:47px;
    width:100px;
    margin-left:11px;
    margin-top:12px;

}

Alles anzeigen

Danke!

Grevas

Innerhalb eines Containers gehört auch ein Padding hin und kein margin. Mit dem Aufbau
<div>
<div>
</div>
</div>
verschiebt margin-top beim 2ten immer noch beide. Fals du ein background-image verwendest und du eigtl kein padding gebrauchen kannst gibt es 2 Lösungswege:

1. ein extra div drumrum für den padding oder
2. die background-position ändern & den repeat entsprechend anpassen. (was wohl sauberer ist)

Darkxor

Zitat von Grevas

Innerhalb eines Containers gehört auch ein Padding hin und kein margin.

Ist das vom W3C mal beschlossen worden bzw. gibt es dafür einen Grund? Die Regelung ist mir neu...

Zitat von Grevas

Mit dem Aufbau
<div>
<div>
</div>
</div>
verschiebt margin-top beim 2ten immer noch beide.

Alles anzeigen

Wenn das umfassende Div kleiner ist, kann ich mir das auch vorstellen, jedoch ist in meinem Fall das Statusfeld, wo die Füllung rein soll doch deutlich größer. Daher sollte doch eigentlich, auch wenn das innere Div verschoben wird noch genug Höhe vorhanden sein...

Zitat von Grevas

Fals du ein background-image verwendest und du eigtl kein padding gebrauchen kannst gibt es 2 Lösungswege:

1. ein extra div drumrum für den padding oder
2. die background-position ändern & den repeat entsprechend anpassen. (was wohl sauberer ist)

Danke ich werde mir [2.] mal ansehen. Wäre jedoch schön, wenn du mir obere Fragen beantwortest, damit ich auch verstehe warum

Grevas

Ehrlichgesagt verstehe ich den Grund auch nicht. Hatte das Problem auch mal und konnts nicht nachvollziehen.

Hab mir dann eine kleine Testseite gemacht, nur eben mit dem Inhalt (um andere Fehlerursachen auszuschließen).
Ich wollte innerhalb eines <div>'s 2 Bilder (per <img>) reinmachen, mit float:left; - das 2te wollte ich weiter unten haben - aber der margin-top hat mir dann den main-container verschoben warum auch immer...

Tobse

Mal nachdenken. Wenn man es nicht von oben drücken kann, zieht man es von unten!

Code

margin-bottom: -10px;

Grevas

Das ist immernoch keine Erklärung.

Funktionieren tuts auch nicht selbst erstmal nachdenken Tobse...

Die Erklärung hab ich jetzt mal rausgefunden - es liegt daran, dass #status keinen Inhalt hat - schreibt man irgendwas rein - wie z.B.   funktioniert es wie man es erwartet , ist echt lange her, dass ich dieses Experiment gemacht hab *g* (sprich: kA was ich da fürn verwurschtelten quark versucht hab)

Tobse

Grevas:
Ohhh, es funktioniert wunderbar, bei mir zumindest....

Darkxor

Irgendwie strange dann hätte zumindest das margin-left auch nicht gehen sollen

Danke!

Grevas

Tobse, ich hab den Code von Darkxor genommen und die images mit nem color ersetzt, es ging nicht. Entweder du hast es selbst in etwa so nachgebaut oder du willst mich veräppeln

Komisch ist es schon, ja. Aber das ist ja nichts neues - imo ist HTML noch nicht fertig entwickelt *g* (allein schon die Tatsache, das dynamische/flüssige Layouts fast nicht ohne Tables auskommen leitet mich zu dieser Aussage - oder kennt jemand eine CSS Methode wie man feste Pixelwerte und Prozentangaben ohne Tables vermischt und dabei immer noch auf 100% Breite kommt? Ich nicht...)

Tobse

Ich hatte das Problem auch. Hier ein beispiel: klick mich! und wird hier eingesetzt. Da ist oft negatives margin/padding drin und es ist mein werk...

Tags