|
|||
Problem bei Formular layout.
Hallo Beisammen,
ich versuche nun seit stunden ein Formular mit CSS zu formatieren doch irgendwie sehe ich den wald vor lauter Bäumen nicht. Formular optik soll so aussehen wie hier in der Tabelle vereinfacht dargestellt: HTML-Code:
<table width="293" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="77">Anrede</td> <td width="90"> </td> <td width="126"> </td> </tr> <tr> <td colspan="3"><span class="radio anrede"> <label for="frau"> <input id="anrede" name="anrede" type="radio" value="frau" /> Frau</label> <label for="herr"> <input id="anrede" name="anrede" type="radio" value="herr" /> Herr</label> </span></td> </tr> <tr> <td>Vorname </td> <td> </td> <td> </td> </tr> <tr> <td colspan="2"><label for="vorname2"> <input id="vorname2" name="vorname" type="text" value="Vorname" /> </label></td> <td> </td> </tr> <tr> <td><label for="nachname2">Nachname</label></td> <td> </td> <td> </td> </tr> <tr> <td colspan="2"><input id="nachname2" name="nachname" type="text" value="Nachname" /></td> <td> </td> </tr> <tr> <td colspan="2"><span class="strasse">Straße</span></td> <td><span class="strasse">Hausnummer</span></td> </tr> <tr> <td colspan="2"><span class="strasse"> <input id="strasse" name="strasse" type="text" value="Straße" /> </span></td> <td><span class="strasse"> <input name="hausnr" type="text" id="hausnr" value="Hausnr" size="10" /> </span></td> </tr> <tr> <td><span class="strasse">PLZ</span></td> <td colspan="2"><span class="strasse">Ort</span></td> </tr> <tr> <td><span class="strasse"> <input name="plz" type="text" id="plz" value="PLZ" size="10" maxlength="10" /> </span></td> <td colspan="2"><span class="strasse"> <input name="ort" id="ort" type="text" value="Ort" class="ort"/> </span></td> </tr> <tr> <td colspan="2">Land</td> <td> </td> </tr> <tr> <td colspan="2"><input name="land" id="land" type="text" value="Land" /></td> <td> </td> </tr> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> <td> </td> </tr> </table> Nabei mein Versuch: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <link href="css/form test.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form" name="form" method="post" action="multipart/form-data"> <fieldset class="pers"><legend>Name</legend> <fieldset class="radio anrede"><legend>Anrede</legend> <label for="frau"><input id="anrede" name="anrede" type="radio" value="frau" />Frau</label> <label for="herr"><input id="anrede" name="anrede" type="radio" value="herr" />Herr</label> </fieldset> <label for="vorname">Vorname<input id="vorname" name="vorname" type="text" value="Vorname" /></label> <label for="nachname">Nachname<input id="nachname" name="nachname" type="text" value="Nachname" /></label> <fieldset class="strasse"> <label for="strasse" class="str">Straße<input id="strasse" name="strasse" type="text" value="Straße" /> </label> <label for="plz" class="plz">PLZ <input name="plz" type="text" id="plz" value="PLZ" size="10" maxlength="10" /> </label> </fieldset> <fieldset class="strasse"> <label for="hausnr" >Hausnummer <input name="hausnr" type="text" id="hausnr" value="Hausnummer" /></label> <label for="ort" > Ort<input name="ort" id="ort" type="text" value="Ort" class="ort"/></label> </fieldset> <label for="land">Land <input name="land" id="land" type="text" value="Land" /></label> </fieldset> </form> </body> </html> Code:
@charset "utf-8"; /* CSS Document */ html { height:100.2%; font-size:62.5%; } body { font-family:Verdana, Geneva, sans-serif; text-align:left; font-size:1.2em; line-height:1.8em; color:#000066; background-color:#ffffff; } /* Brousereinstellungen zurücksetzen */ * { margin:0px; padding:0px; border: 0px; } p { } h1, h2, h3, h4, h5, h6 { font-family:Arial, Helvetica, sans-serif; font-weight: normal; padding:0.6em 0em 0.2em 0em; } h1 { font-size:2.2em; line-height:1.2em; } h2 { font-size: 2.0em; } h3 { font-size: 1.8em; } h4 { font-size: 1.4em; } h5 { font-size: 1.3em; } h6 { font-size: 1.2em; } a { font-weight:bold; color:#9C1A34; } a:link { } a:visited { } a:hover { color:#000066 } a:active { } /* ------ formular --------- */ /* Formular Ramen hell grau* fieldset = Feldgruppe eingabefelder, auswalfelder, textboxen*/ #form fieldset, #form input, #form select, #form textarea{ border: 1px solid #CCCCCC; } /* feldgruppen, zugehörigkeit eingabefelder und auswahlfelder allgemein block*/ #form fieldset, #form label, #form input, #form select { display: block; } /* feldgruppen allgemein*/ #form fieldset { width: 36em; margin: 2em 0em 2em 2em; padding: 1em; } /*überschriften von Feldgruppen legend= Beschreibung */ #form fieldset legend { font-family: Georgia, serif; font-style: italic; font-size: 1.4em; color: #669999; } /*unterfeldgruppen allgemein*/ #form fieldset fieldset { width: auto; margin: 0em 0em 0em 0em; padding-bottom: 0em; } /*überschriften von unterunterfeldgruppen allgemein*/ #form fieldset fieldset legend { font-family:inherit; color: inherit; font-weight: bold; font-size:inherit; font-style:inherit; margin-left:0.6em; } /* Eingabefeld zugehörigkeiten allgemein*/ #form label { margin-bottom: 1em; font-weight: bold; text-indent: 0.6em; } #form fieldset.anrede { /*border:1px;*/ } #form fieldset.radio label { font-weight: normal; } #form fieldset.anrede label { color: #FF0000; float: left; width:10em; } #form fieldset.strasse { width:15em; margin:0px; padding:0px; float:left; } #form fieldset.strasse input { display:block; width: 10em; padding: 0.2em 0.6em 0.3em 1.6em; } #form input { width: 24em; padding: 0.2em 0.6em 0.3em 1.6em; } #form fieldset.radio input { clear: both; float: left; width: auto; margin: 0.2em 0.4em 0em 0em; } ist sicherlich nur irgendeine kleinigkeit. Vielen Dank schon mal im Voraus |
Sponsored Links |
Stichwörter |
css, formatieren, formulare |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
problem mit layout --> testcase | andip | CSS | 5 | 29.02.2008 15:10 |
css layout problem | fz21z | CSS | 0 | 30.01.2008 23:41 |
Problem bei Layout Umsetzung | Lloyd Larkin | CSS | 8 | 13.03.2006 23:50 |
Layout Problem ! | Tim25 | CSS | 2 | 04.07.2005 13:35 |