Textfield relative position zu einem Bild

[Hauke]

Hallo Leute,

ich habe mal eine Frage und zwar soll ich für einen Freund von mir eine Homepage bauen. Die Homepage hat keine Frames, dafür habe ich eine Tabelle genommen. Diese Tabelle hat drei Spalten. Links und Rechts 20% mitte 60%.

Nun bin ich im mittlerem Feld und habe dort wieder eine Tabelle, mit zwei Zeilen. Oben soll ein Bild mit einer Suche hin, und der Hauptinhalt.

Soweit so gut. Nun möchte er, da wo die Suche hin kommt ein JPG haben, auf dem ein Textfeld liegt für die Eingabe des Suchsstrings. Dadruch habe ich zur Zeit 2 Probleme und zwar

1. Wie kann ich es realisieren, dass das Bild sich in der vollen Breite der Tabelle entfaltet, wobei man ja aber auf die Auflösung achten muss. Wenn ich zB ein Bild habe, dass ziemlich breit ist, und nur evt. 150pixel hoch ist, das bild dann aber auf einer Auflösung die sehr klein eingestellt ist, wir das Bild vergrößert und dadurch geht es auch weiter nach unten. Meine Idee wäre irgendwie mehrere Bilder für verschiedene Auflösungen zu nehmen, aber kann ich Standartkonform die Auflösung abfragen und wenn ja wie? (Geht das wirklich auf allen System und Browsern?)

2. Angenommen das Bild ist nun da wo es hin soll, wie kann ich es realisieren, dass das Textfeld über dem Bild liegt? Also im Prinzip ist mir das klar, habe nen Layoutfile und arbeite dort mit dem z-index der > ist der z-index vom Bild. außerdem muss ich (glaube ich) position:absolue machen um das Textfeld zu positionieren. Aber wie kann ich es schaffen, dass das Textfeld trotz verschiedener Auflösungen immer an der gleichen Stelle auf dem Bild ist? Kann man das relativ zur Bildecke angeben und dann in %? Das würde dann ja gehen?

Denn das Problem ist, dass auf dem Bild ne tolle Grafik ist mit "blablabl und geben Sie hier :                       die Suche ein"

Wäre über jede Hilfe dankbar.

Mfg
Hauke

[wahsaga]

hi,

Denn das Problem ist, dass auf dem Bild ne tolle Grafik ist mit "blablabl und geben Sie hier :                       die Suche ein"

Ja, das wird wirklich zum Problem, wenn du es nicht gut durchdacht umsetzt. Dann fehlt Nutzer, die keine Bilder sehen können/wollen, nämlich komplett die Info, wozu das Eingabefeld gedacht ist.
Ein Alternativtext, der darauf hinweist, dass das _nachfolgende_ Inpitfeld zur Eingabe eines Suchbegriffes gedacht ist, wäre also Pflicht.

2. Angenommen das Bild ist nun da wo es hin soll, wie kann ich es realisieren, dass das Textfeld über dem Bild liegt? Also im Prinzip ist mir das klar, habe nen Layoutfile und arbeite dort mit dem z-index der > ist der z-index vom Bild. außerdem muss ich (glaube ich) position:absolue machen um das Textfeld zu positionieren.

Nee, lass mal lieber.
Gerade absolute Positionierung lockt Einsteiger oft in Fallen, die sich noch gar nicht erkennen können. Wende absolute Positionierung nur dann an, wenn du dir in _allen_ Belangen sicher bist, was für Auswirkungen sie haben wird.

Um ein auf ein Bild folgendes Inputfeld "nach oben zu ziehen" - so dass es "über" dem Bild liegt - kannst du auch bspw. ein negatives margin-top oder relative Positionierung verwenden (auch hier bitte wieder darüber im klaren sein, was diese bedeutet).

Aber wie kann ich es schaffen, dass das Textfeld trotz verschiedener Auflösungen immer an der gleichen Stelle auf dem Bild ist?

Für den Anfang würde ich dir raten, auf "Anpassungen" der Bildmaße an den vorhandenen Platz zu verzichten.
Nutze ein Bild, dass nicht zu groß ist, so dass angenommen werden kann, das es bei einer noch handelsüblichen kleinen "Auflösung" [1] noch ganz sichtbar ist - und verzichte auf Größenänderungen.

[1] So lange du noch so redest, als hätte eine "Auflösung" irgendetwas mit dem verfügbaren Platz zu tun, in dem ein HTML-Dokument dargestellt werden kann, fehlt dir sowie noch Grundlagenwissen.

gruß,
wahsaga