Quov: Positionierungsproblem

Folgendes Problem - ich möchte innerhalb eines Containers mit width: 572px und heigh: 1024px einen weiteren div mit den maßen 562px und 1014px legen.
Das ergibt sich dadurch, dass ich diesen durch margin 5px left und 5px top ausrichten möchte, sodass dieser mittig im übergeordneten Div liegt.
Zu beobachten ist das Problem auf Klick mich

Jemand ne Idee? Schonmal im Vorraus danke.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Unbenanntes Dokument</title>
<style type="text/css">  
div#main {  
  
background-color:red;  
margin: 0 0 0 251px;  
width:572px;  
height:1024px;  
border-left:1px #707070 solid;  
  
z-index:1;  
  
  
}  
  
div#inhalt {  
  
margin:5px 0 0 5px;  
background-color:silver;  
width:562px;  
height:1014px;  
z-index:2;  
  
  
}  
</style>
</head>  
<body>  
  
<div id="main">  
<div id="inhalt">  
</div>  
</div>  
</body>  
</html>  
  
  
  
  
  

  1. Anbei sei noch angemerkt, dass das ganze bei mir _nur_ nicht bei FF3 funktioniert, komischerweise stellt es der IE7 korrekt dar o.O

    1. @@Quov:

      Anbei sei noch angemerkt, dass das ganze bei mir _nur_ nicht bei FF3 funktioniert, komischerweise stellt es der IE7 korrekt dar o.O

      Nein. Du verwechselst „korrekt“ mit „wie gewünscht“.

      Live long and prosper,
      Gunnar

      --
      Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
  2. Hi,

    Folgendes Problem - ich möchte innerhalb eines Containers mit width: 572px und heigh: 1024px einen weiteren div mit den maßen 562px und 1014px legen.
    Das ergibt sich dadurch, dass ich diesen durch margin 5px left und 5px top ausrichten möchte, sodass dieser mittig im übergeordneten Div liegt.
    Zu beobachten ist das Problem auf Klick mich

    Jemand ne Idee?

    http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
    The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Meine Englischkenntnisse beschränken sich zur Zeit auf genau 1 Jahr Vokabular und Grammatik..und so leid es mir tut, ich versteh nichts von dem zitierten Satz.

      Einen Sinnvollen zusammenhang konnte ich auch nicht mit leo.org herstellen..

      1. Hi,

        http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
        The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

        Meine Englischkenntnisse beschränken sich zur Zeit auf genau 1 Jahr Vokabular und Grammatik..und so leid es mir tut, ich versteh nichts von dem zitierten Satz.

        Zum margin-top eines im Fluss befindlichen block-level Elements (dein äusseres Div) wird das margin-top seines ersten im Fluss befindlichen block-level Kindelementes (dein inneres Div) hinzugenommen, wenn das Element weder ein padding-top noch ein border-top hat, und das Kindelement keine "Clearance" besitzt.

        Works as designed - wird vom Firefox genau so umgesetzt, wie es in der Spezifikation beschrieben wird, und vom IE falsch.

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
        1. Das heißt, ich muss dem #main noch border-top:0px;

          hinzufügen, und dem #inhalt die Eigenschaft "Clearance"?

          Allerdings hab ich unter selfhtml nur ienen Treffer gefunden - und der - auch von dir beschrieben - bringt mich leider nicht wirklich weiter, was Clearance genau ist.
          Leo.org spuckt die,meiner Meinung nach passenste, Übersetzung von "Freiraum" aus, aber damit kann ich innerhalb css leider nicht anfangen..

          1. Hi,

            Das heißt, ich muss dem #main noch border-top:0px; hinzufügen,

            Nein, ein Rahmen der Breite 0 ist auch kein Rahmen.

            und dem #inhalt die Eigenschaft "Clearance"?

            *Eine* dieser Forderungen muss erfüllt sein, damit die Margins nicht zusammengenommen werden.

            Allerdings hab ich unter selfhtml nur ienen Treffer gefunden - und der - auch von dir beschrieben - bringt mich leider nicht wirklich weiter, was Clearance genau ist.

            Clearance ist in der Spezifikation ebenfalls verlinkt - zur Beschreibung von clear.

            Aber am einfachsten wäre es wohl, wenn du den Abstand nicht über margin-top des inneren Divs realisierst, sondern über padding-top des äusseren.

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
            1. »»Zum margin-top eines im Fluss befindlichen block-level Elements (dein äusseres Div) wird das margin-top seines ersten im Fluss befindlichen block-level Kindelementes (dein inneres Div) hinzugenommen, wenn das Element weder ein padding-top noch ein border-top hat, und das Kindelement keine "Clearance" besitzt.

              Daraus impliziere ich also, dass es genügen würde, wenn man dem Elterndiv nen border-top von 1px zuweist, da ja dann eines der Bedingungen erfüllt wäre?

              Aber selbst dann funktioniert es nicht.
              Mit Padding top gehts, wenn gleich ich dann die Höhe ein wenig verändern musste. Danke.

              Lg

      2. @@Quov:

        Meine Englischkenntnisse beschränken sich zur Zeit auf genau 1 Jahr Vokabular und Grammatik..und so leid es mir tut, ich versteh nichts von dem zitierten Satz.

        Die CSS-Spec gibt es auch in deutscher Übersetzung (wenn auch 2.0, nicht die akruelle 2.1).

        Die entsprechende Stelle wäre 8.3.1 Zusammenfallende Ränder. Und siehe da, an der Stelle wurde in 2.1 einiges ergänzt.

        Live long and prosper,
        Gunnar

        --
        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)