CSS-Aufgabe: Element mit festem Abstand von unten platzieren

    Hallo,
    viele CSS-Angaben (wenn nicht sogar alle) beziehen sich ja auf verherige Elemente. Wenn man nun auf eher allgemeine oder sogar nachfolgende Elemente Bezug nehmen will, so siehts doch schon schwieriger aus.

    Ich möchte ein Beispiel für eine solche Aufgabe zeigen: http://www.dev.druckdesignsievers.de/dsievers/ueber_uns/unternehmen

    Diese (in Entwicklung befindliche) Seite besitz links im Sidemenü ein Element (von mir link2partner genannt) , welches möglicht immer 30px nach oben vom unteren Rand der linken Spalte entfernt sein soll. Mit dem Firefox und dem DOM-Inspector oder dem WebDev lässt sich diese sehr einfache Struktur sehr leicht analysieren.

    Ich habe schon ein paar Versuche unternommen. Jedoch bieten sich mir immer nur Styles an, die sich auf vorherige Elemente beziehen. Ich hab irgendwie keine Möglichkeit gesehen mich am tatsächlichen unteren Rand der linken orangenen Spalte zu orientieren. Natürlich muss die Lösung unabhängig von der Anzahl der Sidemenu-Items funktionieren. Dort können bis max. 5 Punkte erscheinen. Die Platzierung des link2partner soll also korrekt funktionieren, ob ich nun 2,3 oder 5 Sidemenu-Items anzuzeigen habe.

    Seht es als sportliche Herausforderung. Die Lösung wird von mir auf jeden Fall getestet und hier kommentiert, so dass auch andere die ein ähnliches Problem haben, daran teilhaben können.

    Danke schonmal im voraus für eure Tips und/oder Lösungen.
    Torty

    "Carpe Diem" powered by positiv Feelings

    Hmmm...habe ich die Problemstellung denn so erklärt, dass man sie verstehen kann? Hat keiner ne Idee? Mir würde schon ne Anregung genügen ;)

    "Carpe Diem" powered by positiv Feelings

    Hallo

    probiere es mal mit

    Code
    style="position:absolute; bottom:30px;"

    .

    Kann sein daß Du da noch etwas mit "left" rumexperimentieren musst.

    Grüße, [VoD]Weyoun

    Hey - das war der richtige Tip. Es klappte zwar nicht auf Anhieb, aber schlussendlich ging es doch.
    Bei der Umsetzung ist zu beachten, dass

    Code
    position: absolute;
bottom: 30px;


    Sich auf das nächst übergeordnete Element bezieht, welches ebenfalls absolut positioniert wurde. Gibt es kein solches Element, so wird sich auf das <body> bezogen.
    Deshalb wurde mein Element rein mit den 2 CSS-Statements auch 30 Pixel vom Fensterrand nach oben angezeigt. Ich musste nun also das DIV, welches die orange Farbe hat mit position: absolute; beeinflussen. Da sonst keine Angaben (top, left, right oder bottom) gemacht wurden, belibt das Element dort wo es ist.
    Nun bezieht sich also das link2partner-Element auf den orangenen Kasten und sitzt die 30 Pixel über dessen unteren Rand.

    Vielen Dank!
    Torty

    "Carpe Diem" powered by positiv Feelings

    Gerne geschehen! Solltest Du nochmal Probleme mit CSS haben, habe ich hier eine sehr gute Seite für Dich:

    http://www.css4you.de/

    Dort findest Du so gut wie alles zu CSS, sogar teilweise mit Beispielen.

    Grüße,
    [VoD]Weyoun

    Mir hat Euer Problem auch geholfen.

    Durch eine absolute Positionierung kann das Seepferdchen über den roten Bereich in den weissen ragen. Vorher sah es bei Firefox und MS IE immer unterschiedlich aus.

    Hier zu sehen:

    http://www.tradingmonk.com/testlauf.html

    So jetzt muss ich noch die Navigationsleiste hinkriegen. Die sieht im Firefox gut aus aber bei MS IE noch bescheuert aus.

    Na das ist doch mal eine gute Nachricht! Zwei Fliegen mit einer Klappe geschlagen! :)