zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container am unteren Rand positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.06.2006, 14:36
Benutzerbild von Safran
Freak
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2005
Beiträge: 81
Safran befindet sich auf einem aufstrebenden Ast
Standard Container am unteren Rand positionieren

Hallo Community,

ich habe folgendes Problem;

http://www.ieh.de/test/

Und zwar wird der Container "rechts" und "inhhalt" dynamich mit Inhalt gefüllt und weist daher immer eine andere Größe auf.
Der Container "rechts2" (beinhaltet die Grafik mit dem Schriftzug) soll aber immer am unteren Rand der rechten Leiste zu sehen sein.

Leider weiß ich nicht wie ich ihn in diesem Fall positionieren muss. Ich stehe völlig auf dem Schlauch.

Zitat:
position: absolute;
bottom: 0px;
left: 705px;
Auf #rechts2 bezogen brint mich zumindest im FF weiter. Wo steckt der Fehler?

Danke für eure Hilfe!

Edit: Ich war nicht ganz bei der Sache. Das eigentliche Problem ist jetzt gelößt, aber der IE produziert einen Fehler. Offenbar im zusammenhang mit faux colums. Kann mir wer helfen?

Geändert von Safran (16.06.2006 um 16:11 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.06.2006, 16:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Was ich momentan vor allem als Fehler sehe, ist der große Abstand unter #box. Das ist eine Folge Deiner relativen Positionierung von #rechts2 (denn alle übrigen Elemente verhalten sich so, als sei #rechts nicht verschoben). Nimm diese raus, lasse #rechts2 rechts floaten und gib ihm margin-top: -266px; (Höhe von #footer plus Höhe von #rechts2). Dann stimmt's auch im IE.

Das eigentliche position: relative; kannst Du sicherheitshalber stehenlassen (aber ohne die Positionsangaben left und bottom), dann bleibt #rechts2 ganz sicher in jedem Browser im Vordergrund. Außerdem wirf <br clear="all" /> raus und gib stattdessen #footer ein clear: both;.

Geändert von heiko_rs (16.06.2006 um 16:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.06.2006, 16:38
Benutzerbild von Safran
Freak
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2005
Beiträge: 81
Safran befindet sich auf einem aufstrebenden Ast
Standard

Hallo Heiko,

vielen Dank für deine schnelle Hilfe! Es klappt jetzt wunderbar, aber ich verstehe nicht aus was sich margin-top: -266px; zusammen setzt. Das Ganze funktioniert ja mit dynamischem Inhalt.

Mit der Textpassage kann ich leider nichts anfangen:

Zitat:
Zitat von heiko_rs
Was ich momentan vor allem als Fehler sehe, ist der große Abstand unter #box. Das ist eine Folge Deiner relativen Positionierung von #rechts2 (denn alle übrigen Elemente verhalten sich so, als sei #rechts nicht verschoben).
Wenn du meinst das zwischen dem Header und #rechts2 zu viel Abstand ist muss ich sagen, dass es noch #rechts gibt, welche im endgültigen Zusatnd mit Inhalt befüllt wird.
Aber ich glaube das hast du nicht gemeint.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.06.2006, 16:55
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Safran

aber ich verstehe nicht aus was sich margin-top: -266px; zusammen setzt. Das Ganze funktioniert ja mit dynamischem Inhalt.
Momentan steht #rechts2 ganz unten im Quelltext, noch unter dem Footer. Wenn Du #rechts2 rechts floaten läßt, ist der horizontale Ausrichtung bereits korrekt, es muß nur noch nach oben verschoben werden. #rechts2 ist 206px hoch, #footer 60px, also schiebst Du #rechts2 um die Summe aus beiden nach oben. Per margin geht dies hier besser, da sich dann (im Gegensatz zu position: relative; ) alle übrigen Elemente der Verschiebung anpassen. Wieviel Inhalt vorhanden ist, ist völlig egal, denn Du richtest #rechts2 ja von unten aus.

Zitat:
Zitat von Safran
Wenn du meinst das zwischen dem Header und #rechts2 zu viel Abstand ist
Ich meinte den Abstand ganz unten, d.h. zwischen #box und dem unteren Ende des Browserfensters, denn zwischen letzterem und dem Footer befand sich ein ca. 200px hoher leerer Raum (eben wegen Deiner relativen Verschiebung).

Wenn #rechts noch Inhalt bekommt und sich nicht mit #rechts2 überlagern soll (wovon ich ausgehe), braucht #rechts ausreichendes padding-bottom (d.h. mindestens 206px, entsprechend der Höhe von #rechts2).

Geändert von heiko_rs (16.06.2006 um 17:02 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.06.2006, 17:01
Benutzerbild von Safran
Freak
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2005
Beiträge: 81
Safran befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs
Momentan steht #rechts2 ganz unten im Quelltext, noch unter dem Footer. Wenn Du #rechts2 rechts floaten läßt, ist der horizontale Ausrichtung bereits korrekt, es muß nur noch nach oben verschoben werden. #rechts2 ist 206px hoch, #footer 60px, also schiebst Du #rechts2 um die Summe aus beiden nach oben. Per margin geht dies hier besser, da sich dann (im Gegensatz zu position: relative; ) alle übrigen Elemente der Verschiebung anpassen.
Achso, klar! Genau den selben Gedanken hatte ich auch. Nur habe ich es eben versucht mit Positionsangaben zu realisieren.
Das ich nicht von selbst auf die Idee gekommen bin.

Zitat:
Zitat von heiko_rs
Wenn #rechts noch Inhalt bekommt und sich nicht mit #rechts2 überlagern soll (wovon ich ausgehe), braucht #rechts ausreichendes padding-bottom (d.h. mindestens 206px, die Höhe von #rechts2).
Jetzt weiß ich was du meinst. Der Fehler ist ja nun behoben. Danke für die schnelle Hilfe!

fG Safran
Mit Zitat antworten
  #6 (permalink)  
Alt 16.06.2006, 20:31
Benutzerbild von Safran
Freak
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2005
Beiträge: 81
Safran befindet sich auf einem aufstrebenden Ast
Unglücklich Footerinhalt v-align:bottom

Die Seite ist nun fast fertig aber ich habe noch ein Problem. Im Prinzip ist es genau das Selbe wie oben beschrieben nur:

Es handelt sich um den Footer. Den möchte ich mit Inhalt füllen, der dann rechts, unten angezeigt wird.

Leider weiß ich nicht wie ich den Text am unteren Rand vom Footer positionieren kann. Position: relative fällt ja weg, weil sonst der Lösungsvorschlag oben nutzlos wäre.
Ein negativer margin-top Wert funktioniert leider auch nicht.

Danke im Vorraus!
Mit Zitat antworten
  #7 (permalink)  
Alt 16.06.2006, 20:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Safran
Es handelt sich um den Footer. Den möchte ich mit Inhalt füllen, der dann rechts, unten angezeigt wird.
Dann solltest erstmal das Markup ändern, und zwar #rechts2 vor dem Footer kommen lassen und den margin-top entsprechend auf -206px verringern.

Dann kannst Du dem Footer schonmal text-align: right; geben, und nach unten ausrichten kannst Du den Text z.B., indem Du dem #footer die height-Angabe wegnimmst und die Höhe durch padding-top erzeugst, das auch gleichzeitig den Text nach unten drückt (das ist allerdings ungünstig bei allzu großer Schriftvergrößerung).

Position könnte auch gehen, wenn Du innerhalb von #footer noch ein <p> hast, das Du relativ oder absolut positionieren kannst. Gib doch mal den Text für den Footer an (kann auch ein Mustertext sein, Hauptsache Textlänge und Zeilenzahl stimmen), dann kann man leichter sagen, wie es am Besten umgesetzt wird.

EDIT: Wenn #rechts2 im Markup vor #footer kommt, braucht es natürlich noch ein clear: both;.

Geändert von heiko_rs (16.06.2006 um 21:04 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 16.06.2006, 21:16
Benutzerbild von Safran
Freak
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2005
Beiträge: 81
Safran befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs
Gib doch mal den Text für den Footer an (kann auch ein Mustertext sein, Hauptsache Textlänge und Zeilenzahl stimmen), dann kann man leichter sagen, wie es am Besten umgesetzt wird.
"Copyright 2006 by Safran Quader" soll unten, links stehen und "Impressum | Kontakt | Disclaimer" soll unten, rechts stehen. Beides soll ca. 10px groß sein.
Mit Zitat antworten
  #9 (permalink)  
Alt 16.06.2006, 21:28
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Erstmal vorweg: Da quasi alle Deine DIVs floaten (was gut ist), lasse das Markup doch besser wie gehabt, d.h. #rechts2 nach #footer, denn dieser cleart ja alles und bringt #rechts2 dadurch in eine eindeutige Position. Andernfalls unterscheiden sich die Float/Clear-Interpretationen der einzelnen Browser (vor allem der verschiedenen IE-Versionen) zu sehr. Und da Du kaum Text im Footer hast, wird seine Höhe von 90px ja auch immer ausreichen. Ich gebe Dir gleich mal einen Vorschlag bzgl. der Textplazierung im Footer.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.06.2006, 21:54
Benutzerbild von Safran
Freak
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2005
Beiträge: 81
Safran befindet sich auf einem aufstrebenden Ast
Standard

Okey, da hast du natürlich auch wieder rehct. Ich hatte das Markup schon geändert, aber was du da sagst macht Sinn. Ich werde es wieder abändern.

Wenn ich #footer p per position:relative positionieren will, versteht das der IE anders als alle anderen Browser. Er verschiebt es 2-3 Pixel zu weit, was bei den kleinen Größen auffällt.

fG, Safran
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Container am unteren Rand & Content 100% Höhe KILLHILL CSS 1 23.10.2009 15:46
Positionierung von Container horizontal mayhemtl CSS 9 11.08.2007 15:25
ul im container am unteren ende platzieren SKVler CSS 8 17.09.2006 18:30
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 13:47
Mitwachsende DIV Container Myjestic CSS 9 27.07.2005 17:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:48 Uhr.