hochakute margin-Problematik

Questionmark

vielleicht sollte ich für heute einfach mal mit den coden aufhören - irgendwie klappt gar nichts

beim besten Willen weiß ich einfach nicht, was ich hier falsch mache:

Code

#content {
    width:1000px;
    background-color:#ffffff;
    margin-top:15px;
    min-height:200px;
    }


#infocontainer {
    width:910px;
    margin:15px auto;
    border: 5px solid #5c8b3f;
    background-color: #8cb572;
    }

Alles anzeigen

HTML

<div id="content">
                <div id="infocontainer">test
                </div>            
            </div>

Problem: Die Zentrierung funktioniert einwandfrei, nur oben gibt es keinen Abstand. Wenn ich <br> oder einen weiteren div in "content" einfüge klappt das mit margin, aber meiner Meinung nach müsste es auch so klappen...
Danke

sejuma

Was soll da nicht klappen?
#infocontainer hat einen oberen Abstand von 15px zum oberen Contentrand.
Wird m.E. (im IE7) korrekt dargestellt.

Neuroleptika

Das ist mein erster Beitrag hier.
Ich schieß einfach mal los.

Im IE funktioniert das weil #content durch width (und im IE7 auch durch min-height) layout hat.
haslayout gibt es nur im IE5-7.
Ich würde #content ein padding-top:15px; geben und das margin für #infocontainer auf 0 auto setzen:

Code

#content {
    width:1000px;
    background-color:#ffffff;
    margin-top:15px;
    min-height:200px;
[COLOR='DarkRed'][B]padding-top: 15px;[/B][/COLOR]
    }


#infocontainer {
    width:910px;
    margin:[COLOR='DarkRed'][B]0[/B][/COLOR] auto;
    border: 5px solid #5c8b3f;
    background-color: #8cb572;
    }

Alles anzeigen

Für IE5-6 würde ich noch height für #content setzen:

Code

* html #content {
height: 200px;
}

IE5-6 vergrößern die Box trotzdem nach Bedarf.

IE5.x kennt margin-auto nicht. Mit text-align: center; für #infocontainer würden diese Browser auch Blockelemente zentrieren.

Questionmark

bei mir im FF wollte es irgendwie nicht laufen

Hab jetzt einfach noch ein leeres Abstand-Div eingebaut: Nicht schön, aber effektiv

Bandit

Die Lösungvon Neuroleptika funktioniert einwandfrei im IE7 und im FF.

Zitat

Nicht schön, aber effektiv

Du legst doch auch keine Bleiplatten auf's Dach, um ein Auto tiefer zu legen, oder?

Neuroleptika

Das margin-top von #infocontainer kollabiert (fällt zusammen) wenn es nicht durch ein padding, border oder wie du es gemacht hast; mit einem Inhalt getrennt wird.

Mein Beispiel funktioniert ohne margin-top für #infocontainer.
Du könntest #infocontainer auch mit einem padding oder border von der Außenkannte trennen. Mit eingefärbten body wird es deutlicher:

Code

body {
background-color: #5B5B5B;
}


#content {
    width:1000px;
    background-color:#ffffff;
    margin-top:15px;
[COLOR='DarkRed']padding-top: 1px;[/COLOR] /*oder
[COLOR='#8b0000']border-top: 1px;[/COLOR]*/
    min-height:200px;
    }


#infocontainer {
    width:910px;
    margin:15px auto;
    border: 5px solid #5c8b3f;
    background-color: #8cb572;
    }


/*IE6:*/
* html #content {
  height: 200px;
}

Alles anzeigen

Questionmark

Danke für die Erläuterungen!

hochakute margin-Problematik

Tags

Benutzer online in diesem Thema