Element in Div

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Element in Div

      schon wieder eine neue frage und google spuckt nichts aus...

      ich habe 2 elemente:

      Quellcode

      1. <div align="center" style="width: 200; height: 100; background-color: #dedede;">
      2. <div id="element" style="position: relative; top: 10px; left: 50px; width: 160px; height: 80px; background-color: #AAA;"></div></div>

      nun steht das div(id element) allerdings am rand über aber ich möchte, dass es die gleichen grenzen wie das übergeordnete element hat

      wie ist das zu realisieren?

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Ich weiß es grade nicht genau, aber kann es am position:relative liegen?
      Normalerweise würde ein Kindeelement seinem Elternelement immer folgen, aber es gibt da glaube ich auch Ausnahmen, wann dies mal nicht so ist.
      Versuchs einfach mal testweise ohne position:relative, evtl liegts daran, anonsten kann ich dir so grad auch nicht helfen und müsste mich erst schlau machen, denn das ist grade was, das ich nicht so aus dem Kopf nachvollziehen kann und testen kann ich atm auch nicht wirklich.[/SIZE][/COLOR][/FONT]

    • Ich versuche einmal zu interpretieren, was du möchtest:

      Dein Elterncontainer, welcher zentriert angeordnet ist, beinhaltet deinen Kind-Container, welcher sich am Eltern-Container ausrichten soll.
      Dies ist recht simple zu bewerkstelligen.
      Der Kind-Container erhällt ein position: absolute, der Eltern-Container ein position:relative =>
      Der absolut-positionierte Container orientiert sich nicht mehr am Browserfenster, sondern am relativ positionierten Eltern-Container.

      "Absolute Positionen beziehen sich immer auf das nächst höhere relative Element."

      Ich hoffe, dies beantwortet deine gestellte Frage.

      PS: Heutzutage nimmt man das CSS aus dem HTML-Code heraus:

      #elternContainer {
      margin: 0 auto;
      width: 658px;
      height: 500px;
      position: relative;
      }

      #element {
      width: 100px;
      height: 100px;
      position: absolute;
      }
      //Virtual

    • Wenn ichs jetzt richtig verstehe, ist der Platz, den der Kindcontainer brauch, größer als der Platz, den der Elterncontainer brauch.
      Somit ist das Kindelement größer als sein Elternelement und steigt über die Grenzen des Elternelements.
      Dies könntest du vermeiden, indem du einfach die Breiten- und Höhenangabe des Elternelements weglässt, da dies aber denke ich notwendig ist, hast du zwei Möglichkeiten:
      1. Du definierst auch für das Kindelement entsprechende Angaben, somit belibt dess Größe passend.
      2. Du gibst dem Elternelement das Attribut overflow:hidden;
      Damit wird jeder Inhalt, der das Elternelement übersteigt bzw dessen Größe, abgeschnitten.
      Alternativ wäre auch overflow:auto zu gebrauchen, da entscheidet der Browser, was er tut (bei FF ist das zB Scrollbar anzeigen, kann aber auch wie overflow:hidden; wirken)

      Hoffe, dein Problem gelöst zu haben