Ergebnis 1 bis 7 von 7

Thema: hochakute margin-Problematik

  1. #1
    Meister(in)
    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard hochakute margin-Problematik

    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;
        }
    HTML-Code:
    <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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!


  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hochakute margin-Problematik

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

  3. #3
    Youngster
    Registriert seit
    22.06.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hochakute margin-Problematik

    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;
    padding-top: 15px;
        }
    
    #infocontainer {
        width:910px;
        margin:0 auto;
        border: 5px solid #5c8b3f;
        background-color: #8cb572;
        }
    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.
    Geändert von Neuroleptika (30.12.2008 um 02:41 Uhr) Grund: Raute für IE5-6 vergessen

  4. #4
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hochakute margin-Problematik

    bei mir im FF wollte es irgendwie nicht laufen

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


  5. #5
    Bandit
    Gast

    Standard AW: hochakute margin-Problematik

    Die Lösungvon Neuroleptika funktioniert einwandfrei im IE7 und im FF.
    Nicht schön, aber effektiv
    Du legst doch auch keine Bleiplatten auf's Dach, um ein Auto tiefer zu legen, oder?

  6. #6
    Youngster
    Registriert seit
    22.06.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hochakute margin-Problematik (collapsing margins)

    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;
    padding-top: 1px; /*oder
    border-top: 1px;*/
        min-height:200px;
        }
    
    #infocontainer {
        width:910px;
        margin:15px auto;
        border: 5px solid #5c8b3f;
        background-color: #8cb572;
        }
    
    /*IE6:*/
    * html #content {
      height: 200px;
    }

  7. #7
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hochakute margin-Problematik

    Danke für die Erläuterungen!


Ähnliche Themen

  1. margin: 0 auto
    Von haillo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 22.07.2008, 20:25
  2. Margin-top bei Links
    Von jeseix im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 26.03.2008, 13:35
  3. margin-top
    Von nastron im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.06.2007, 16:46
  4. Problematik 'Knuddels'
    Von Ronald im Forum Forum-Hilfe.de intern
    Antworten: 75
    Letzter Beitrag: 24.03.2007, 10:56
  5. Css Problem mit Margin
    Von Phaeilo im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.05.2005, 21:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •