zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem bei Formular layout.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.05.2011, 21:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.05.2011
Beiträge: 3
cooky79 befindet sich auf einem aufstrebenden Ast
Idee 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">&nbsp;</td>
        <td width="126">&nbsp;</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>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2"><label for="vorname2">
          <input id="vorname2" name="vorname" type="text" value="Vorname" />
        </label></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><label for="nachname2">Nachname</label></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2"><input id="nachname2" name="nachname" type="text" value="Nachname" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2"><span class="strasse">Stra&szlig;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>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2"><input name="land" id="land" type="text" value="Land" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</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&szlig;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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, formatieren, formulare

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:26 Uhr.