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>
Leider bekomme ich es nicht hin die felder PLZ und ort und Straße und Hausnummer in unterschiedlicher größe nebeneinander zu positionieren.
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>
und die dazugehörige CSS:
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;
}
ich hoffe mein code ist nicht zu chaotisch bin gerade am anfang mit css.
ist sicherlich nur irgendeine kleinigkeit.
Vielen Dank schon mal im Voraus |
