Formular mit CSS statt Tabelle positionieren

[Sergey]

Guten Tag!

Ich habe ein Problem bei dem ich keine Lösung per google gefunden habe. (Ich hoffe, ich habe nach richtigen Begriffen gesucht ;)

Also- ich soll eine Webseite möglichst von Tabellen befreien. Dabei muss das ganze dann sowohl im IE6 als auch Firefox funktionieren. Ich habe mir echt mühe gegeben, Tabellen nur da zu lassen, wo tabellarische Information dargestellt wird, aber an einer Stelle kriege ich das ohne Tabellen einfach nicht nicht.

Es soll so aussehen: 4 Eingabefelder, zwei nebeneinander und zwei weitere unter den ersten beiden. Über die erste Spalte steht "Ort" und über der zweiten Spalte soll "Haltestelle" stehen. Links neben der ersten zeile soll "von" stehen und links neben der zweiten Zeile soll "bis" stehen.

Ich habe gelesen, dass die Texte mit einem <label for="id">-Tags zu kennzeichnen sind. Die ID muss ja eindeutig sein. Aber ich habe pro Label immer 2 input- Felder, somit wäre dass ja nicht mehr eindeutig über id verknüpfbar oder?

Und die einzige Idee die ich habe, wie ich das insgesamt Layouten kann, ist indem ich recht viele divs einbaue. Aber es ist glaube ich dann auch keine wirkliche Lösung, weil die Tabellen einfach durch divs ersetzt werden.

Hat wer eine Idee?
Danke!

Hier noch ein Ausschnitt aus dem Quelltext (wohl gemerkt befindet sich dieser Quelltextausschnitt seinerseits in anderen Tabellen ;) )

<table width="100%" cellspacing="3" cellpadding="0">  
	<tr height="25">  
	  <td>&nbsp;</td>  
	  <td width="122" align="center">Ort</td>  
	  <td width="122" align="center">Haltestelle</td>  
	</tr>  
	<tr>  
	  <td align="right">&nbsp;von</td>  
	  <td width="144" align="center"><input name="place_origin" value="" style="width: 122px;"/></td>  
	  <td width="144" align="center"><input name="name_origin" value=""  style="width: 122px;"/></td>  
	</tr>  
	<tr>  
	  <td align="right">&nbsp;nach</td>  
	  <td width="144" align="center"><input name="place_destination" value="" style="width: 122px;"/></td>  
	  <td width="144" align="center"><input name="name_destination" value=""  style="width: 122px;"/></td>  
	</tr>  
	  
	<tr height="10">  
	  <td colspan="3">&nbsp;</td>  
	</tr>  
	<tr>  
	  <td align="left">&nbsp;</td>  
	  <td width="122">&nbsp;</td>  
	  <td width="122" height="25" align="center"><table class="highlight" cellspacing="0" cellpadding="0">  
		  <tr>  
			<td class="highlight"><nobr>  
			  <input name="image" type="image" class="sButton" src="img/efaportal_pfeil_submit.gif" alt="Anfordern" border="0">  
			  </nobr></td>  
			<td><input name="submit" type="submit" class="sButton" value=" Anfordern ">  
			</td>  
		  </tr>  
		</table></td>  
	</tr>  
	  
  </table>

[LX]

Das Formular ist zwar inhärent keine Tabelle, aber die Daten sind tabellarisch geordnet. Insofern kann man natürlich trotzdem eine Tabelle verwenden.

Mir fehlen bei Deinem Formular vielmehr label-Tags, um Zusammenhänge besser darzustellen.

Wenn Du Dein Anliegen, die Seite von Tabellen zu befreien, trotzdem vorantreiben willst, kannst Du immer noch mit floats mit fester Höhe und clear:left für die neue Zeile arbeiten (dabei musst Du aber umso mehr auf die vertikale Positionierung der Elemente aufpassen):

<form style="overflow:hidden;">  
    <label style="float:left; width:122px; text-align:center;" for="place">Ort</label>  
    <input name="place_origin" value="" style="float:left; width:122px; margin: 0 11px;"/>  
    <input name="name_origin" value="" style="float:left; width: 122px; margin: 0 11px;"/>  
    <label style="clear:left; float:left; width:122px; text-align:center;" for="place">Haltestelle</label>  
    <input name="place_destination" value="" style="float:left; width: 122px; margin:0 11px;"/>  
    <input name="name_destination" value=""  style="float:left; width: 122px; margin:0 11px;"/>  
</form>

Gruß, LX

[Deus Figendi]

Guten Morgen,
(drei Vorschläge)
LX hat nicht unrecht, eigentlich ist das (mehr oder minder) eine Tabelle. Jedenfalls muss man die Kopfdaten für Zeile und Spalte zusammentragen um den Sinn des jeweiligen Input zu begreifen... für mich klingt das tabellarisch.
Allerdings solltest du meiner Meinung nach das Formular dennoch neu bauen, einfach weil sie doch recht unsauber ist:
+- Leerzeile drin
+- Un-Tabelle in der letzten Zeile

VORSCHLAG 1:
Wenn du die Tabelle loswerden willst musst du dich wohl auch von der tabellarischen Form trennen (oder mit absoluter Positionierung herumfuchteln). Völlig legitim wäre z.B.

<fieldset>  
 <legend>Abfahrt(ehemals von)</legend>  
 <label for="place_origin">Ort</label>  
 <input name="place_origin" id="place_origin" value="" style="width: 122px;"/>  
 <label for="name_origin">Haltestelle</label>  
 <input name="name_origin" id="name_origin" value="" style="width: 122px;"/>  
</fieldset>  
<fieldset>  
 <legend>Ankunft(oder Ziel ehemals nach)</legend>  
 <label for="place_destination">Ort</label>  
 <input name="place_destination" id="place_destination" value="" style="width: 122px;"/>  
 <label for="name_destination">Haltestelle</label>  
 <input name="name_destination" id="name_destination" value="" style="width: 122px;"/>  
</fieldset>

Zwecks barrierearmut könnte man nun noch den labels ein (unsichtbares) "Ziel-" vor das "Ort" schreiben oder sowas, einfach damit im Label eine vollständige Erklärung des Feldes steht. Also (inetwa) so:

<fieldset>  
 <legend>Abfahrt</legend>  
 <label for="place_origin"><span class="unsichtbar" style="display:none;">Abfahrts-</span>Ort</label>  
 <input name="place_origin" id="place_origin" value="" style="width: 122px;"/>  
 <label for="name_origin"><span class="unsichtbar" style="display:none;">Abfahrts-</span>Haltestelle</label>  
 <input name="name_origin" id="name_origin" value="" style="width: 122px;"/>  
</fieldset>

(ich habe jetzt Klasse und style-Element angegeben, wahrscheinlich würde ich das nur mit einer Klasse machen und die dann über label .unsichtbar selektieren)
Den Input-Elementen würde ich jeweils eine neue Zeile gönnen, dann aber einrücken...

VORSCHLAG 2:
Wenn du mit Labels und Tabelle weiter arbeiten möchtest (wie gesagt, Tabelle ist hier nicht abwegig) könnte man auf das jeweils erste zutreffende Feld zeigen also
von => place_origin
nach => place_destination
Ort => place_origin
Haltestelle => name_origin
und den Rest der Tab-Reihenfolge überlassen

VORSCHLAG 3:
Du verzichtest ganz darauf zwei Eingabefelder zu haben und passt deine Verarbeitung entsprechend an. Sprich du hast ein input für Abfahrt und ein input für Ankunft und in beiden soll "Ort,[Komma] Haltestelle" eingegeben werden. ggf. JavaScript-Plausiblitäts-Prüfung... Auf Serverseite trennst du die Eingaben am Komma einfach auf und fertig.

[Sergey]

Guten Morgen,
(drei Vorschläge)
LX hat nicht unrecht, eigentlich ist das (mehr oder minder) eine Tabelle. Jedenfalls muss man die Kopfdaten für Zeile und Spalte zusammentragen um den Sinn des jeweiligen Input zu begreifen... für mich klingt das tabellarisch.
Allerdings solltest du meiner Meinung nach das Formular dennoch neu bauen, einfach weil sie doch recht unsauber ist:
+- Leerzeile drin
+- Un-Tabelle in der letzten Zeile
(...)

Danke sehr an euch beiden für die Antworten. Ich glaube ich belasse dann es tatsächlich als Tabelle und räume nur bisschen drum herum auf.

Danke!

Gruß

Sergey

[Beat]

Zwecks barrierearmut könnte man nun noch den labels ein (unsichtbares) "Ziel-" vor das "Ort" schreiben oder sowas, einfach damit im Label eine vollständige Erklärung des Feldes steht. Also (inetwa) so:
[code lang=html]<fieldset>
<legend>Abfahrt</legend>
<label for="place_origin"><span class="unsichtbar" style="display:none;">Abfahrts-</span>Ort</label>

display:none ist vollkommener Mumpitz.
es ist nicht unsichtbar, sondern aus der Sicht der GUI nicht existent.
Du willst es vom Bildschirmbereich verstecken, nicht vor dem Screenreader.

Barrieren soll man finden und belegen, nicht erdichten.

Bist du sicher, dass ein Screenreader ein Legend nie vor jedem Label vorliest?

http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/

"The reason is, and read this twice, it’s important: LEGEND text isn’t read at the start of the FIELDSET, it is read at the start of the label. It repeats at the beginning of every single text label in that FIELDSET."

mfg Beat

[Deus Figendi]

Bist du sicher, dass ein Screenreader ein Legend nie vor jedem Label vorliest?

http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/

"The reason is, and read this twice, it’s important: LEGEND text isn’t read at the start of the FIELDSET, it is read at the start of the label. It repeats at the beginning of every single text label in that FIELDSET."

Ah wie praktisch, wieder was gelernt, danke Beat!