Ergebnis 1 bis 7 von 7

Thema: CSS-Aufgabe: Element mit festem Abstand von unten platzieren

  1. #1
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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...ns/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
    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 !!!!!
    "Carpe Diem" powered by positiv Feelings

  2. #2
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  3. #3
    [VoD]Weyoun
    Gast

    Standard

    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

  4. #4
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    [VoD]Weyoun
    Gast

    Standard

    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

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

    Standard

    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.

  7. #7
    [VoD]Weyoun
    Gast

    Standard

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

Ähnliche Themen

  1. bild platzieren
    Von killruki im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.06.2007, 09:15
  2. Bug: abstand wo kein abstand sein sollte
    Von lynox im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.10.2006, 00:44
  3. Element ganz unten positionieren
    Von DrGonzo im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 06.01.2006, 17:53
  4. objekte platzieren mit javascript
    Von FR0SCH im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 29.03.2005, 21:48
  5. Fenster platzieren
    Von Johannes im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 21.06.2004, 22:41

Stichworte

Berechtigungen

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