schon wieder eine neue frage und google spuckt nichts aus...
ich habe 2 elemente:
<div align="center" style="width: 200; height: 100; background-color: #dedede;">
<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?
[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 benötige position relative damit sich das top und left nicht am document sondern an dem parent orientiert
ohne postition geht top und left nicht und bei absolute ists genauso nur dass es sich am fenster nicht am div orientiert
[FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Ah, ok, dann wars doch der falsche Ansatz.
Mit dem position-Atrribut bin ich nich so gut befasst, brauchte es bisher nie.
Dann kann ich dir grade nicht helfen, müsste erst schauen, worans dann liegen könnte usw[/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
meine frage war eigentlich anders gemeint: wie mache ich es dass der filial contailer den parental container nicht am rand überschneidet bzw über den parental container hinausragt sondern sozusagen nur der ausschnitt der auch im parental container liegt zu sehen ist
edit: mit pos relativ funktioniert das was ich machen will nicht
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
Dnke overflow habe icg gesucht, habe allerdunga uber eine css berechnung gelost dennoch dabke
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!