nicht angemeldet
flexible Positionierung einer Grafik über mehrere <td>'s
Hallo allerseits,
ich habe eine Grafik, die ich folgendermaßen plazieren möchte:
Meine Seite besteht aus einer zentrierten Tabelle, die (vereinfacht) eine linke Spalte hat für die Navigationselemente, und eine rechte Spalte für den Inhalt. Die Höhe der Tabelle ist variabel. In der linken unteren Ecke der Navispalte soll eine Grafik stehen, die jedoch ein bißchen (etwa 30px) in die Inhaltsspalte hineinläuft. Navi und Inhalt sind durch einen 1px-Rahmen optisch getrennt, welcher von der Grafik verdeckt werden soll.
Die Frage ist: wie plaziere ich jetzt diese Grafik am geschicktesten, so daß sie in allen Browsern richtig angezeigt wird? Bisher habe ich unter meine Tabelle noch eine weitere Tabellenzeile mit colspan="2" angefügt und von dort aus das Bild relativ positioniert. Aber erstens ist dann unter meiner Tabelle immer noch ein Leerraum von der Höhe der Grafik, und zweitens verrutscht beim IE einiges: es scheint, als ob alles in der linken Spalte (bis auf die Grafik) 2-3 px nach oben versetzt ist und die Grafik überlappt somit die nächste Zeile (die noch vor meiner Behelfszeile für die Grafik kommt), was nicht sein darf.
Weiß hier jemand eine elegante Methode, um diese Probleme zu umgehen?
Die Grafik soll ja auch bei verschiedenen Fenstergrößen an der richtigen Stelle stehenbleiben, also fällt absolute Positionierung wohl weg?
Ich hoffe, daß ihr euch aus meiner Beschreibung ein Bild machen könnt, falls nicht, muß ich vielleicht doch noch einen Screenshot hochstellen...
Für gute Tips allzeit dankbar,
Birgit
-
Bisher habe ich unter meine Tabelle noch eine weitere Tabellenzeile mit colspan="2" angefügt und von dort aus das Bild relativ positioniert. Aber erstens ist dann unter meiner Tabelle immer noch ein Leerraum von der Höhe der Grafik´
Den Leerraum kannst du übergehen, indem zu "Rowspan=2" einsetzt. Es funktioniert genauso wie colspan nur werden wir hier 2 übereinandergelegene Tabellenzellen zusammengefasst, es wären in deinem Fall die Inhaltszellen
-
Tachchen!
Den Leerraum kannst du übergehen, indem zu "Rowspan=2" einsetzt. Es funktioniert genauso wie colspan nur werden wir hier 2 übereinandergelegene Tabellenzellen zusammengefasst, es wären in deinem Fall die Inhaltszellen
Zur Not könnte man diese Lösung noch ausbauen:
Links die zweite (untere) Zelle lassen,
dieser position:relative zuweisen ohne Werte für top oder left
das Bild hier einfügen und
dann das Bild per position:absolute wie gewünscht positionieren.Wenn ich das Problem richtig verstanden habe,
müsste es so auf jeden Fall funktionieren. ;-)Gruß
Die schwarze Piste
-
-
den zweiten Vorschlag habe ich angewendet, nämlich das <td>-Element relativ positioniert ohne Angaben, und die Grafik darin absolut positioniert. Klappt beim IE, aber Opera (mein Prio-Browser) richtet am Browserfenster aus anstatt am <td>. Positioniere ich auch das <td> absolut, dann ists im Opera richtig, aber im IE ist das Bild nicht mehr zu sehen.
Schön langsam denke ich drüber nach, das Bildchen mit JavaScript für jeden Browser beim Laden zu positionieren :-/
@Chris: rowspan kenne ich natürlich, aber das Problem bleibt ja das gleiche. Wenn ich relativ positioniere, dann ziehts mit das umgebende <td> zur Breite der Grafik auseinander, und bei absoluter Positionierung habe ich die oben beschriebenen Fehler.
-
Tachchen!
nämlich das <td>-Element relativ positioniert ohne Angaben, und die Grafik darin absolut positioniert. Klappt beim IE, aber Opera (mein Prio-Browser) richtet am Browserfenster aus anstatt am <td>.
Ausgerechnet Opera? Welche Version? Kann man das mal irgendwo ansehen?
Gruß
Die schwarze Piste
-
Tach auch,
gestern nacht ist mir dummerweise auch noch mein Rechner mitten bei der Arbeit abgeschmiert (2 ELKOs auf dem Mainboard geplatzt *grmbl*) und daher komme ich gerade vorerst nicht an die Daten und kann leider nichts online stellen.
Der Quelltext war vereinfacht wie folgt:
<td style="position:relative;"><img src="bildle.jpg" style="position:absolute;left:1px;bottom:250px;"></td>...was eben bei Opera 7 (genaue Version weiß ich nicht auswendig) dazu führte, daß das Bild links unten im Fenster anstatt in der Tabelle stand.
In der Not und als Behelfslösung jetzt einmal ein Screenshot vom Design, wie es aussehen sollte:
http://www.ice-horse.de/burrishof/
Hier nur in einer 800x600-Auflösung (Mindestanforderung), daher sieht man nicht, daß die Tabelle bei einer höheren Auflösung horizontal zentriert sein soll.
Hoffe das schafft Klarheit.Gr
Birgit-
Hi,
Der Quelltext war vereinfacht wie folgt:
<td style="position:relative;"><img src="bildle.jpg" style="position:absolute;left:1px;bottom:250px;"></td>Du hast eine Tabelle gewählt - mit Tabelleneigenschaften, die Du auch nicht ändern solltest.
Wenn Du einen relativ posiionierten Bezugsrahmen brauchst, solltest Du ein DIV hierzu verwenden.freundliche Grüße
Ingo
-
-
-