CSS für fieldset, legend und label

[Martin Hein]

Hallo Forum,

ich verzweifle am CSS-Styling eines Formulars. Ist es überhaupt möglich so ein Formular:

---------------------------------------------------------------
<form method="post">
 <fieldset>
  <legend>Ihre Kontaktdaten</legend>
  <label for="anrede">Anrede:</label><br>
  <input type="text" id="anrede" name="Anrede">
  <label for="vorname">Vorname:</label><br>
  <input type="text" id="vorname" name="Vorname">
  <label for="nachname">Nachname:</label><br>
  <input type="text" id="nachname" name="Nachname">
  <label for="email-adresse">E-Mail Adresse:</label><br>
  <input type="text" id="email-adresse" name="E-Mail-Adresse">
 </fieldset>
 <fieldset>
  <legend>Sind Sie bei uns versichert?</legend>
  <label for="kassennummer">Kassennummer:</label><br>
  <input type="text" id="kassennummer" name="Kassennummer">
  <label for="versichertennummer">Versichertennummer:</label><br>
  <input type="text" id="versichertennummer" name="Versichertennummer">
 </fieldset>
 <fieldset>
  <legend>Ihre Nachricht</legend>
  <label for="betreff">Betreff:</label><br>
  <input type="text" id="betreff" name="Betreff">
  <label for="nachricht">Nachricht:</label><br>
  <input type="text" id="nachricht" name="Nachricht">
 </fieldset>
</form>
---------------------------------------------------------------

mit css dahin zu bewegen, dass es so aussieht, wie folgendes
Layout:

http://herrhein.com/public/temp/Form-Layout.jpg

kennt jemand die probleme ?

danke für eure tipps und
beste gruesse,
marritn

[Inita]

hi,

das einfachste waere mit dem <table>, da es wie ne table deine form aussieght. Aber mit den <div> ist es auch moeglich.

Mit den <table>s das waer irgendwie so:

<form action="" name="" id="" method="post">
<fieldset>
    <table cellpadding="5" cellspacing="1" border="0" align="center" style="width:350px">
        <tr>
            <td align="right"><label for="username">Name:</label></td>
            <td><input type="text" name="user" id="user" maxlength="15" value="" /></td>
        </tr>
        <tr>
            <td align="right"><label for="Passw">Password:</label></td>
            <td><input type="passw" name="passw" id="Passw" maxlength="15" /></td>
        </tr>
        <tr>
            <td align="center" colspan="2"><input type="submit" name="Submit1" id="Submit1" value="Login!" /></td>
        </tr>
    </table>
</fieldset>
</form>

[Cheatah]

Hi,

ich verzweifle am CSS-Styling eines Formulars.

woran genau?

Ist es überhaupt möglich so ein Formular:

[...]

mit css dahin zu bewegen, dass es so aussieht, wie folgendes
Layout:

Etwas schwierig wird es sein, die Doppelpunkte zu entfernen; zudem sind die <br>-Elemente sicherlich nicht zweckdienlich (um nicht zu sagen: sie sind völlig fehl am Platz). Die Positionierung der Eingabefelder mit ihren Labels dürfte sehr schwer sein; ich halte es aber legitim, diese beiden Elemente jeweils in ein <div> oder <li> zu gruppieren. Der Vorschlag von Inita ist natürlich kompletter Unfug.

http://herrhein.com/public/temp/Form-Layout.jpg

http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden

kennt jemand die probleme ?

Welche "die" Probleme?

Cheatah

[Inita]

Hi,

unfug?! Fuer die Anfang tables sind gar keine unfug, meiner meinung nach. Sowas mit li oder div fuer nen Anfaenger wird ganz schwierig auf allen browsern gut zu machen. Na, weiss auch nicht, vielleicht Herr Martin ist fuer sowas auch bereit.

LG, Inita

[Cheatah]

Hi,

unfug?! Fuer die Anfang tables sind gar keine unfug, meiner meinung nach.

doch, *gerade* Anfänger sollten sich nicht mit etwas Falschem belasten, was anschließend nur sehr schwer wegzutrainieren ist.

Sowas mit li oder div fuer nen Anfaenger wird ganz schwierig auf allen browsern gut zu machen.

Ja, wenn man mit Tabellenlayout angefangen hat, dann glaube ich das gerne.

Cheatah

[Martin Hein]

Hi,

ich halte mich auch garnicht für einen Anfänger ;)

martin

[Martin Hein]

Hi,

ich verzweifle am CSS-Styling eines Formulars.

woran genau?

an der Darstellung von <legend>-Tags. Die hatten in FF und Opera
nicht die volle Breite des Formulars, dafür waren sie für den ie
nur mit margin-left:-7px; an den linken Rand positionierbar.

Wenn's dafür ne Lösung gibt, versuche ich um meine bisherige
(schlechte) Lösung und Tabellen herum zu kommen.

Meine bisherige (funktionierende aber schlechte) Lösung
(nur so zum Spott;)
--------------------------------------------------------
<form method="post">
 <div class="form_div">
 <fieldset>
  <legend><div class="legend_div">Ihre Kontaktdaten</div></legend>
  <div class="full">
  <div class="label_div"><label for="anrede">Anrede:</label><br></div>
  <input type="text" id="anrede" name="Anrede">
  </div>
  <div class="left">
  <div class="label_div"><label for="vorname">Vorname:</label><br></div>
  <input type="text" id="vorname" name="Vorname">
  </div>
  <div class="right">
  <div class="label_div"><label for="anrede">Nachname:</label><br></div>
  <input type="text" id="nachname" name="Nachname">
  </div>
  <div class="full">
  <div class="label_div"><label for="email-adresse">E-Mail Adresse:</label><br></div>
  <input type="text" id="email-adresse" name="E-Mail-Adresse">
  </div>
 </fieldset>
 <fieldset>
  <legend><div class="legend_div">Sind Sie bei uns versichert?</div></legend>
  <div class="left">
  <div class="label_div"><label for="kassennummer">Kassennummer:</label><br></div>
  <input type="text" id="kassennummer" name="Kassennummer">
  </div>
  <div class="right">
  <div class="label_div"><label for="versichertennummer">Versichertennummer:</label><br></div>
  <input type="text" id="versichertennummer" name="Versichertennummer">
  </div>
 </fieldset>
 <fieldset>
  <legend><div class="legend_div">Ihre Nachricht</div></legend>
  <div class="full">
  <div class="label_div"><label for="betreff">Betreff:</label><br></div>
  <input type="text" id="betreff" name="Betreff">
  </div>
  <div class="full">
  <div class="label_div"><label for="nachricht">Nachricht:</label><br></div>
  <input type="text" id="nachricht" name="Nachricht">
  </div>
 </fieldset>
</form>
</div>
--------------------------------------------------------

danke schonmal für die Info, dass das grundsätzlich
einigermassen sauber möglich ist

und beste gruesse,
martin

[Cheatah]

Hi,

an der Darstellung von <legend>-Tags. Die hatten in FF und Opera
nicht die volle Breite des Formulars, dafür waren sie für den ie
nur mit margin-left:-7px; an den linken Rand positionierbar.

die Vergangenheitsform lässt darauf schließen, dass diese Probleme mittlerweile gelöst sind. Richtig?

Wenn's dafür ne Lösung gibt,

Dies hingegen sagt das Gegenteil. Was hast Du denn versucht, und woran ist es (eventuell) gescheitert?

Meine bisherige (funktionierende aber schlechte) Lösung
(nur so zum Spott;)

Spott gibt's nicht, aber den Hinweis, dass es keinen Grund gibt, den HTML-Code in <div>-Elementen und Klassen zu ertränken.

<div class="label_div"><label for="anrede">Anrede:</label><br></div>

Eliminiere alle <br>. Du hast nirgendwo eine inhaltliche Zeile, also auch nirgendwo ein Zeilenende.

<div class="left">
  <div class="right">

Wenn es in diesen Elementen nicht zufällig um Zurückgelassenes sowie Rechtliches geht, sind die Klassennamen definitiv falsch. Aber wie gesagt, Du hast eh zu viele <div>s.

Cheatah

[Martin Hein]

Hi,

Dies hingegen sagt das Gegenteil. Was hast Du denn versucht, und woran ist es (eventuell) gescheitert?

ok, angefangen habe ich damit, die <legend> am linken rand
auszurichten. das war mit:

legend{
margin:0;
padding:0;
}

... (für ie6) nicht zu erreichen.

Spott gibt's nicht, aber den Hinweis, dass es keinen Grund gibt, den HTML-Code in <div>-Elementen und Klassen zu ertränken.

weil ich mir gedacht habe, dass das gehen muss, bin ich hier ;)

Eliminiere alle <br>. Du hast nirgendwo eine inhaltliche Zeile, also auch nirgendwo ein Zeilenende.

eye eye, wusste mir nicht anders zu helfen. so sei es geschehn.

Wenn es in diesen Elementen nicht zufällig um Zurückgelassenes sowie Rechtliches geht, sind die Klassennamen definitiv falsch. Aber wie gesagt, Du hast eh zu viele <div>s.

ist 'left_div' und 'right_div' ok?

Martin

[Sven Rautenberg]

Moin!

Wenn es in diesen Elementen nicht zufällig um Zurückgelassenes sowie Rechtliches geht, sind die Klassennamen definitiv falsch. Aber wie gesagt, Du hast eh zu viele <div>s.

ist 'left_div' und 'right_div' ok?

"left" und "right" sind Aussagen über das Aussehen. Das Aussehen ist aber nicht Bestandteil des HTML.

Abgesehen davon: Vermeide Unterstriche in IDs und Klassennamen, die führen nur zu Problemen (weil sie in einer früheren CSS-Version verboten waren und dann möglicherweise unbeabsichtigt später mit reingerutscht sind - die Browserunterstützung ist höchst unterschiedlich). Nutze wenn, dann Bindestriche.

- Sven Rautenberg

[Arbeitsloser]

Hallo,

ok, angefangen habe ich damit, die <legend> am linken rand
auszurichten. das war mit:

legend{
margin:0;
padding:0;
}

Füg mal noch "border:0" hinzu (am besten diese drei Angaben mal testweise für alle Elemente[1] und dann -> Browservergleich).
Wie schon gesagt, alle <br /> und diese geschützten Leerzeichen weg, mit display und float arbeiten. Tabellen machen nur Probleme.

(Nur ins Blaue geraten, hatte sowas mal)

Gruß, der Arbeitslose

[1]
* {border:0; margin:0; padding:0;}

[Martin Hein]

Hi,

schönen Dank für den Tipp, aber ich konnte leider nichts
damit erreichen ;( ich hab nun ne <div> drumgelegt. Anders
konnte ich auch nicht erreichen, dass sich das Teil über die
gasamte Breite erstreckt.

schöne Grüsse,
Martin