nicht angemeldet
Bild fest positionieren
Hallo
Ich habe ein Problem bei der Positionierung mit CSS. Ich habe eine Seite, welche folgendermassen aufgebaut ist.
Eine 100% breite Tabelle um alles herum.
Eine Tabelle mit der Grösse des tatsächlichen Inhalts, die sich in der einzigen Zelle der 100%-Tabelle befindet. Sie wird so in der Mitte der Seite gehalten.
Jetzt habe ich per div-Tag ein Bild auf die Seite positioniert. Wenn ich jetzt aber die Brosergrösse änderä, verschiebt sich das Bild gegenüber der Seite. Die Grafik hat immer den gleichen Abstand zum Broserrand.
Meine Frage ist jetzt, wie ich das Bild so positionieren kann, dass es im verhältnis zur inneren Tabelle (eientlichen Page) immer am gleichen Ort bleibt.
Bsp. (leider noch nicht NS 4.x fähig): http://www.smartwebdesign.ch/new
Gruss Michael
-
Hallo Michael,
Meine Frage ist jetzt, wie ich das Bild so positionieren kann, dass es im verhältnis zur inneren Tabelle (eientlichen Page) immer am gleichen Ort bleibt.
Tabellen und positionierte Bereiche zu mischen in der Hoffnung, dass beide sich gleich verhalten, geht nicht. Beide haben nichts weiter miteinander zu tun. Eine Moeglichkeit waere es, den Rest des Inhalts mit Ausnahme des Bildes - also praktisch die ganze Tabelle - selber in einen zweiten positionierten Bereich zu setzen. Dann kannst du beide positionierten Bereiche so anordnen, dass sie aufeinander abgestimmt sind und auch fest so bleiben.
Oder du willst das Verhalten, das Tabellen bieten (automatisches Anpassen an die Fenstergroesse usw.). Dann solltest du das Bild in die Tabelle integrieren, aber nicht mehr absolut positionieren.
Oder du setzt den onResize-Eventhandler in Verbindung mit dem Screen-Objekt ein, um die absolute Position beim Veraendern der Fenstergroesse mit JavaScript dynamisch neu zu setzen.viele Gruesse
Stefan Muenz-
Hallo Stefan
Tabellen und positionierte Bereiche zu mischen in der Hoffnung, dass beide sich gleich verhalten, geht nicht. Beide haben nichts weiter miteinander zu tun. Eine Moeglichkeit waere es, den Rest des Inhalts mit Ausnahme des Bildes - also praktisch die ganze Tabelle - selber in einen zweiten positionierten Bereich zu setzen. Dann kannst du beide positionierten Bereiche so anordnen, dass sie aufeinander abgestimmt sind und auch fest so bleiben.
Tja.. habe ich noch fast gedacht, dass das nicht geht. Ich dachte nur ich könne irgendwie die Tabelle (die kleine in der Mitte des Bildschirms) als Ursprung der Positionierung verwenden. Scheint aber nicht zu funktionieren.
Oder du willst das Verhalten, das Tabellen bieten (automatisches Anpassen an die Fenstergroesse usw.). Dann solltest du das Bild in die Tabelle integrieren, aber nicht mehr absolut positionieren.
Ja das möchte ich... Das Bild in die Tabelle zu integrieren wäre die logische Folge aber leider lässt sich dieser Farbübergang nicht als GIF speichern und JPEGs sind ja bekanntlich für einfarbige Flächen (wie sie auch vorkommen) nicht geeignet. Werde jetzt versuchen den Ecken als jpg zu speichern und den Rest als GIF und hoffe, dass man es nicht sieht.
Oder du setzt den onResize-Eventhandler in Verbindung mit dem Screen-Objekt ein, um die absolute Position beim Veraendern der Fenstergroesse mit JavaScript dynamisch neu zu setzen.
Auch eine Möglichkeit. Mir aber zu kompliziert...
Gruss Michael
-
hi
Ja das möchte ich... Das Bild in die Tabelle zu integrieren wäre die logische Folge aber leider lässt sich dieser Farbübergang nicht als GIF speichern und JPEGs sind ja bekanntlich für einfarbige Flächen (wie sie auch vorkommen) nicht geeignet. Werde jetzt versuchen den Ecken als jpg zu speichern und den Rest als GIF und hoffe, dass man es nicht sieht.
PNG?
-
Danke für die Idee! Habe png bisher nie genutzt... dachte immer es sei nicht kompatibel zu vielen Browsern...
Aber nachdem ich jetzt ein bisschen herumgelesen habe, denke ich es wäre eine echte Alternative!
Gruss Michael
-
-
-
-
hi
Bsp. (leider noch nicht NS 4.x fähig): http://www.smartwebdesign.ch/new
evtl. hat's damit zu tun:
in Zeile 124 stehen 2 </td> - der zweite ist schlicht über.Ansonsten noch 3 relative Kleinigkeiten:
1. die Angabe height="" an <table>, <tr> und <td> kommt bei dir öfter vor - da das nicht zum Standard gehört verstehen das aber nur ältere IE's (bzw. 6er im müll-compat-mode) und Netscape 4.2. da Fehlen aber relativ viele alt="" an den Bildern (bzw. alle)
3. <td background="%"> (zeile 84) gibt's nicht. Richtig ist: <td style="background-image:url(%);"> (das % steht jeweils für die URL.
-
Hallo
evtl. hat's damit zu tun:
in Zeile 124 stehen 2 </td> - der zweite ist schlicht über.hat nichts damit zu tun aber ist trotzdem super, dass du das gemerkt hast.
Gibt es ein Prog. das solche Fehler findet oder hast du das Teil durchgelesen?
Ich habe es ein paarmal duchgesehen und nichts bemerkt... war ev. auch schon ein bisschen müde :)Ansonsten noch 3 relative Kleinigkeiten:
- die Angabe height="" an <table>, <tr> und <td> kommt bei dir öfter vor - da das nicht zum Standard gehört verstehen das aber nur ältere IE's (bzw. 6er im müll-compat-mode) und Netscape 4.
hmmm da muss ich umlernen... habe bisher immer damit gearbeitet...
- da Fehlen aber relativ viele alt="" an den Bildern (bzw. alle)
Bei den Bilder des Rahmens braucht es diese ja auch nicht unbedingt... bei den anderen wird es diese noch geben.
- <td background="%"> (zeile 84) gibt's nicht. Richtig ist: <td style="background-image:url(%);"> (das % steht jeweils für die URL.
THX!
Werde mich wohl einmal intensiver mit CSS auseinandersetzen müssen...Danke für die Analyse!
Gruss Michael
-