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

[Andreas]

Wenn ich mir den Quelltext angucke bekomme ich als zentrale Information:

Dieses Projekt verwendet Frames. Wenn Ihr Browser keine Frames versteht, können Sie den Inhalt dieser Seite nicht sehen.
Bitte besorgen Sie sich einen neueren Browser.

Und im Quelltext des hier angesprochenen Frames schreibt Du

HTML

<!-- MITTLERE SPALTE --> <td style="text-align: center" valign="top">

und genau das zeigt der Firefox auch an. Er richtet es oben in der Zelle aus. Versuch' doch dort einfach mal "middle" ...

[i.b.g]

Hallo,

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

Und so ist es eben gerade nicht, denn der unstrukturierte Quelltext ist besonders schwer zu analysieren. Ist das Handarbeit oder von einem Generator?

Da hier th-Tags und td-Tags in einer Tabellenzeile gemischt werden, was nicht regelkonform ist, muss das zunächst bereinigt werden und dann dem ganzen einen ordentlichen Style geben (text-align, vertical-align).

Im übrigen: wenn das Eingabefeld auch bei anderen so wie bei mir einfach im grauen Dunst der Zeile verschwindet, wird es wohl sehr selten einen Nutzer geben, der dieses Suchmaschinenfeld anwendet. Es ist ja eher eine Aus- als eine Einladung.

[Thomas]

Den Skript-Teil in den HEAD-Bereich, TH durch TD ersetzen, unnötige FONT-Tags entfernen und dann einfach noch das VALIGN-Attribug weg - dann sollte es so ähnlich aussehen wie es dir wohl vorschwebt. Ansonsten schließe ich mich meinen Vorschreibern an, speziell was den Punkt graues Eingabefeld auf grauem Grund betrifft.

CODE

<table><tr><td>
<form action="http://www.google.com/search" method="get" onsubmit="Gsitesearch(this)">
<input name="q" type="hidden">
<input name="qfront" style="width: 145px; background-color: rgb(200, 214, 222);" type="text">
<input name="search[submit_button]" style="border: 0pt none ;" value="Submit" src="grafik/seiten/hauptseite/lupe2.gif" type="image">
</form>
</td>
<td></td>
<td style="text-align: center;">
<a href="deutsch/kantone/baselland_initiative.html"><b>Volksinitiative 'Ja, Bildungsvielfalt für alle'</b></a>
</td>
<td></td>
<td style="text-align: center;">
<a href="deutsch/news/news.html"><b>Veranstaltungen</b></a>
</td></tr></table>

[Zsolt]

Hallo, vielen Dank für Eure Hilfe

@Thomas:
Dein Textvorschlag ist gut; ich habs auch angewendet - das Suchmaschinenfeld ist grade richtig, nur kommen dabei die Texte in den zwei anderen Zellen 'Volksinitiative ...' und 'Veranstaltungen' zu weit nach unten, und es reagiert nicht auf valign oder so. Hast Du einen Vorschlag? Ich habe die Datei hochgeladen, damit ich nicht die Online-Version überschreiben muss.

@ ibg
Suchmaschinenfeld verschwindet im grauen Dunst - das ist natürlich richtig, und es bekommt noch einen feinen Rahmen oder so. th-tags sind eine Folge vom Rumbasteln. Die Felder waren vorher noch ohne grauen Querbalken da - siehe französische Version.
Dass aber der Quelltext unstrukturiert sei, das verwundert mich ein wenig. Ich habe seinerzeit alles von Hand geschrieben und jede Tabellenzeile ist mit Auskommentierungen gekennzeichnet, damit ich auf einen Blick finde was ich suche ...
Wie würdest Du denn das Ganze strukturieren? Ich arbeite nur mit phase und manchmal sogar nur mit dem Texteditor ohne wysiwyg-klimbim.

@all
So wegen Strukturierung:
Die Ganze Übung mit den 0.gif und so ist der Versuch ein grosses Hintergrundbild pixelgenau auf die Tabellenzellenbreiten abzustimmen. Habt ihr da eine bessere Idee? Wenn ich eine Vereinfachung wüsste, würde ich die Arbeit, alles umzubauen, auf mich nehmen. : )

Grüsse aus der Schweiz
Zsolt

Angehängte Datei(en)

 main.html ( 9.04KB ) Anzahl der Downloads: 1

 

[Thomas]

@Thomas:
Dein Textvorschlag ist gut; ich habs auch angewendet - das Suchmaschinenfeld ist grade richtig, nur kommen dabei die Texte in den zwei anderen Zellen 'Volksinitiative ...' und 'Veranstaltungen' zu weit nach unten, und es reagiert nicht auf valign oder so. Hast Du einen Vorschlag? Ich habe die Datei hochgeladen, damit ich nicht die Online-Version überschreiben muss.

Entweder einen Screenshot hochladen oder die Datei unter einem anderen Namen auch auf den Webspace stellen. So fehlen die Referenzen und ich kann nicht viel damit anfangen. Und super ist es, wenn du den HTML-Code, den du versuchsweise eingesetzt hast, und der nicht funktioniert hat, ebenfalls komplett postest und nicht nur beschreibst - denn grundsätzlich "reagiert es auf valign", deshalb sieht es ja jetzt (ohne VALIGN-Attribut) anders aus als vorher. Warum es bei dir dann doch nicht funktioniert, kann ich nur sehen, wenn du auch den ganzen Quelltext postest, den du ausprobiert hast.

[i.b.g]

Hallo,

Wie würdest Du denn das Ganze strukturieren?

ich meine damit, dass es der besseren Lesbarkeit wegen besser ist, wenn man den Quelltext mit Hilfe von Einrückungen so gliedert, dass der HTML-Baum besser erkennbar wird. Z.B.:

QUELLTEXT

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Manchmal ist es sogar zu empfehlen, die Einrückungen noch etwas tiefer zu wählen.

[Zsolt]

Hallo Thomas
jetzt komm ich endlich wieder dazu

Unter der Adresse

www.elternlobby.ch/index_a.html

siehst Du, wie es jetzt aussieht, nachdem ich Deine Anregungen beherzigt habe. Ich hab da das Textfeld der Suchmaschine mal ein wenig eingefärbt, damit mans sieht. Ganz ohne Formatierungen steht dieses Textfeld viel höher als die links, obwohl die auch nicht vertikal ausgerichtet sind, und alle Elemente sind doch in der selben Tabellenzeile
?!?
Irgendwas versteh ich da nicht ...

Zsolt

[Zsolt]

Hi
Da hast Du wohl recht, es wäre ein wenig übersichtlicher.
Danke für den Tip.
Zsolt

[Thomas]

Irgendwas versteh ich da nicht ...

Okay, ganz ausnahmsweise hier noch ein Fisch: Ergänze bei dem FORM-Tag ein STYLE-Attribut, das den Außenrand auf 0 setzt:

QUELLTEXT

<form action="http://www.google.com/search" method="get" onsubmit="Gsitesearch(this)" style="margin: 0;">

Und hier noch die Angel (bitte aufheben, um zukünftig selber fischen zu können): Bei solchen Problemen ist es immer hilfreich, sich Rahmen anzeigen zu lassen. Bei Tabellen z. B. ganz einfach, indem das BORDER-Attribut auf 1 gesetzt wird, ansonsten und noch allgemeiner, indem ein STYLE-Attribut mit dem Wert "border: 1px solid gold;" hinzugefügt wird (die Farbe ist natürlich wahlfrei, aber "solid gold" gefällt mir persönlich am besten ). Und schon sieht man, wo etwas "aus dem Rahmen fällt". Probier es am besten einmal aus, bevor du meine Änderung umsetzt.

Das Ergebnis wird dir eventuell trotzdem nicht gefallen, da das Textfeld immer noch nicht vertikal zentriert ist. Dies liegt daran, dass Textfeld und Lupengrafik eine unterschiedliche Höhe haben. Lösung 1: Höhe der Grafik reduzieren. Lösung 2: Textfeld und Grafik in zwei getrennten Tabellenzellen platzieren (am einfachsten, indem du noch eine weitere, einzeilige und zweispaltige Tabelle einfügst). Lösung 3 gibt es bestimmt auch noch, aber für mich waren das genug Fische für heute.

[Google Bot]