wahsaga: Textfield relative position zu einem Bild

Beitrag lesen

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.

  1. 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

--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }