Bilder positionieren – komme nicht mehr weiter

[Pit]

Ich habe zu Testzwecken ein Layout eingerichtet. Hier die Seite: http://mitglied.multimania.de/fmtest/struktur.html.
Das Inserat am Kopf und die Google-Anzeige gehören nicht zu meinem HTML-File, das wird vom Server auf dem die Testeite liegt platziert. Bei folgenden zwei Punkten komme ich nicht mehr weiter :

1. Bild 3 und Bild 4 müssen in #content_gots unten so ausgerichtet werden, damit die beiden Bilder unten bündig mit Bild 2 zu stehen kommen.
So: http://mitglied.multimania.de/fmtest/layout.png

Ich habe das über Klassen mit bottom: 0px und position: relative versucht, aber das funktioniert nicht. Weiss jemand Rat? Wie kann ich das lösen?

2. die Position von Bild 5 wird auf Safari und Firefox unter Mac richtig dargestellt. Etwa so: http://mitglied.multimania.de/fmtest/mac.png
Unter Windows IE und Firefox wird das Bild weiter unten angezeigt: In etwa so: http://mitglied.multimania.de/fmtest/windows.png

Ich hab absolut keinen Schimmer woran das liegt – jemand eine Idee?

Hier noch mein CSS: http://mitglied.multimania.de/fmtest/standard.css

Besten Dank Pit

[Malcolm Beck´s]

hi,

1. Bild 3 und Bild 4 müssen in #content_gots unten so ausgerichtet werden, damit die beiden Bilder unten bündig mit Bild 2 zu stehen kommen.
   So: http://mitglied.multimania.de/fmtest/layout.png
   Ich habe das über Klassen mit bottom: 0px und position: relative versucht, aber das funktioniert nicht. Weiss jemand Rat? Wie kann ich das lösen?

Versuch's doch mal mit absolute.

2. die Position von Bild 5 wird auf Safari und Firefox unter Mac richtig dargestellt. Etwa so: http://mitglied.multimania.de/fmtest/mac.png
   Unter Windows IE und Firefox wird das Bild weiter unten angezeigt: In etwa so: http://mitglied.multimania.de/fmtest/windows.png

Ich hab absolut keinen Schimmer woran das liegt – jemand eine Idee?

Da du dieses Bild floatest, versetzt du es in den Block-Kontext, daher wird es richtigerweise unter die 2 Links auf der Linken Seite (DE | EN) gesetzt, da float nach oben hin alles cleart.
Sprich, alles, was im HTML über dem gefloateten Element liegt, wird in das floating  nicht miteinbezogen.

Hier noch mein CSS: http://mitglied.multimania.de/fmtest/standard.css

Tipps am Rande:
0px == 0.
padding: 0px 0px 0px 0px; == padding: 0;
border-top: 1px; border-top-style: solid; == border-top: 1px solid; /* ohne Color */

mfg

[Pit]

Hallo Malcolm

Da du dieses Bild floatest, versetzt du es in den Block-Kontext, daher wird es richtigerweise unter die 2 Links auf der Linken Seite (DE | EN) gesetzt, da float nach oben hin alles cleart.
Sprich, alles, was im HTML über dem gefloateten Element liegt, wird in das floating  nicht miteinbezogen.

Ok, das kann ich nachvollziehen, aber wie kann ich das nun lösen?

Tipps am Rande:
0px == 0.
border-top: 1px; border-top-style: solid; == border-top: 1px solid; /* ohne Color */

Werde ich beherzigen, danke.

MfG

[Malcolm Beck´s]

hi Pit,

Ok, das kann ich nachvollziehen, aber wie kann ich das nun lösen?

Floate die anderen Elemente auch. Die Auswahl ist eine Liste von Optionen, daher kannst du diese in eine Liste packen und das Bild in ein <p>, Liste links floaten und den Absatz rechts.

Oder du nimmst das Bild und notierst es im HTML vor die Sprachauswahl (dann brauchst du nichts weiter machen), je nach dem, wie wichtig dieses Bild ist; ist es denn Inhaltlich Relevant?

Jedenfalls wäre die Sprachauswahl in einer Liste gut untergebracht, egal, wie du dich entscheidest.

mfg

[Pit]

Ich nochmal

1. Bild 3 und Bild 4 müssen in #content_gots unten so ausgerichtet werden, damit die beiden Bilder unten bündig mit Bild 2 zu stehen kommen.
   So: http://mitglied.multimania.de/fmtest/layout.png
   Ich habe das über Klassen mit bottom: 0px und position: relative versucht, aber das funktioniert nicht. Weiss jemand Rat? Wie kann ich das lösen?

Versuch's doch mal mit absolute.

Mit postiion: absolute und bottom: 0 funktioniert das nicht wie gewünscht.
Die beiden Bilder kleben dann am unteren Browserrand. Ich möchte aber nur, dass die Bilder im #content_gots an den unteren Rand versetzt werden. Zudem kann es sein, dass weniger Text oberhalb der beiden Bilder steht. Wie bring ich die Bilder an den unteren Rand von #content_gots? Oder versteh ich Dich falsch?

Da du dieses Bild floatest, versetzt du es in den Block-Kontext, daher wird es richtigerweise unter die 2 Links auf der Linken Seite (DE | EN) gesetzt, da float nach oben hin alles cleart.
Sprich, alles, was im HTML über dem gefloateten Element liegt, wird in das floating  nicht miteinbezogen.

Das hat schon mal geklappt, danke.

[Malcolm Beck´s]

hi,

Versuch's doch mal mit absolute.
Die beiden Bilder kleben dann am unteren Browserrand. ... Oder versteh ich Dich falsch?

Nicht mich verstehst du falsch, sondern die absolute positionierung.
Das Element #content_gots ist derzeit auf [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position:static;][*] und liefert den Bildern somit keinen brauchbaren bezugspunkt.

Wenn du es so löst, dann teste das #content_gots auch mit reichlich Inhalt; nicht das der Inhalt unter die Bilder rutscht.

Sprich, alles, was im HTML über dem gefloateten Element liegt, wird in das floating  nicht miteinbezogen.
Das hat schon mal geklappt, danke.

Lass uns bzw. das Archiv[2] an deiner Lösung teilhaben.

mfg
[1] http://www.css4you.de/position.html
[2] Für suchende ist das sehr Ärgerlich, wenn man unter den treffern einer Suchmaschine sein Problem wiedererkennt, auf der verlinkten Seite aber der Lösungsansatz fehlt.