Tabellenzellen, Ausrichtung Einstellungen

[Zsolt]

Hallo alle Experten
Ich bitte um eine kurze Hilfestellung:

Auf der Seite

www.elternlobby.ch

im unteren Frame
auf dem grauen Querbalken

sind folgede Elemente im TR aufgereiht:
Ein Textfeld
Die Lupe gif
(Stegzelle)
in der Mitte ein Verlinkter Text
(Stegzelle)
rechts ein verlinkter Text

Mein Problem:
Das Textfeld links ist ein Suchmaschinenfeld.
Das positioniert sich irgendwie wertikal in die Tabellenzelle hinein.
Die Vertikale Ausrichtung des Textfelds und der anderen Elemente in der selben Zeile stimmen nicht überein - und ich weiss nicht warum.
Ich hab versucht mit valign und mit dem Anpassen des Hintergrundbildes mit dem graublauen Querbalken auszugleichen, aber es ist nicht sehr befriedigend.
Wie kann ich das Textfeld vertikal ausrichten?

Ich bin sicher, dass ein Pro im Quelltext auf den ersten Blick sieht, was los ist ; ))

Ich bedanke mich für jeden Hinweis

Zsolt

[Thomas]

Hier nochmal ein Bild des Ganzen mit Rahmen und vor der Korrektur - man sieht deutlich, dass die Tabellenzeile sehr viel höher ist als man eventuell aufgrund der Hintergrundgrafik annehmen würde. Und durch den Rahmen um das Formular sieht man auch, dass dieses anscheinend einen Abstand nach unten definiert.

Angehängte Datei(en)

 foo1.png ( 4.9KB ) Anzahl der Downloads: 8

 

[Thomas]

Da die Grafik wohl doch nicht signifikant höher ist als das Textfeld, werfe ich noch einen Fisch, die wichtigsten Gräten sind fett und rot markiert:

CODE

<form action="http://www.google.com/search" method="get" onsubmit="Gsitesearch(this)" style="margin: 0;">
<input name="search[submit_button]" style="border: none; float: right;" value="Submit" src="http://www.elternlobby.ch/grafik/seiten/hauptseite/lupe2.gif" type="image">
<input name="qfront" style="width: 140px; background-color: rgb(250, 200, 200);" type="text">
<input name="q" type="hidden">
</form>

Außerdem muss dazu der Button im HTML vor dem Textfeld kommen.

Dummerweise funktioniert auch das nicht wirklich, da dann die Tabellenzeile nicht mehr exakt über der Hintergrundgrafik liegt. Mit der Angabe von

QUELLTEXT

style="height: 132px;"

für die erste Zeile (= <!-- VORZEILE -->) lässt sich das zwar einigermaßen kaschieren, aber sinnvoller wäre es wohl, den Querbalken aus der Hintergrundgrafik des BODY-Tags herauszunehmen und als separate Hintergrundgrafik für die Tabellenzeile zu setzen, oder den noch einfacheren Weg zu gehen und einfach die Hintergrundfarbe der Tabellenzeile entsprechend zu setzen:

CODE

<tr style="height: 26px; background: #C8D6DE;">
<td>
<form action="http://www.google.com/search" method="get" onsubmit="Gsitesearch(this)" style="margin: 0 5px;">
<input name="search[submit_button]" style="border: none; float: right;" value="Submit" src="http://www.elternlobby.ch/grafik/seiten/hauptseite/lupe2.gif" type="image">
<input name="qfront" style="width: 130px; background-color: rgb(250, 200, 200);" type="text">
<input name="q" type="hidden">
</form>
</td>

Zusätzlich doch noch einen kleinen Außenabstand für das Formular, damit es nicht so an die Kante klatscht und das Textfeld zum Ausgleich noch etwas schmaler: Viola! Allerdings sind dann rechts die abgerundeten Ecken und links die Fransen weg, falls die sein müssen, braucht man doch die Hintergrundgrafik. Ich brauch jetzt auf jeden Fall 'ne Pause .

[Zsolt]

Fische sind Lösungen/Tags, Angeln sind Anleitungen? ...

Hallo Thomas
Vielen Dank für die kompetente und ausführliche Hilfe, da bin ich echt froh drum.
Damit werde ich jetzt wohl klarkommen.

Grüsse aus dem Süden
Zsolt

[Thomas]

Fische sind Lösungen/Tags, Angeln sind Anleitungen? ...

Jepp, frei nach dem (angeblich chinesischen) Sprichwort: "Gib einem Hungernden einen Fisch, und er wird einmal satt, lehre ihn Fischen, und er wird nie wieder hungern." .

Herzliche Wochenendgrüße in die Schweiz .

[Google Bot]