|
|||
Tabelle formatieren
Hallo,
ich bin mittlerweile der Verzweiflung nahe... Ich habe meine Formulare früher immer mit Tabellen formatiert. Das hat auch immer gut funktioniert. Naja, da ich mich auch etwas weiter entwickeln möchte, wollte ich zu Testzwecken jetzt einmal ein Formular mit CSS formatieren. Die Feldbeschreibung soll über den Feldern linksbündig stehen. Die Anordnung soll so sein: [Vorname] [Nachname] [Strasse] [Plz] [Ort] [Bemerkung] Code:
<form id="adresse" name="adresse" method="post" action=""> <label for="textfield">Vorname</label> <input name="vorname" type="text" id="vorname" size="15" maxlength="25" /> <label for="label">Nachname</label> <input name="nachname" type="text" id="label" size="30" /> <label for="textfield">Strasse</label> <input name="strasse" type="text" id="strasse" size="30" /> <label for="textfield">Plz</label> <input name="plz" type="text" id="plz" size="6" maxlength="6" /> <label for="textfield">Ort</label> <input name="ort" type="text" id="ort" size="30" /> <label for="textfield">Bemerkung:</label> <textarea name="textfield" cols="30" rows="5" id="textfield"></textarea> </form> Danke!!! |
Sponsored Links |
|
|||
Du brauchst die CSS-Eigenschaften float (um die Elemente jeweils nebeneinander zu setzen) und clear (um dieses Nebeneinandersetzten für die nächste Zeile neu zu setzen).
|
Sponsored Links |
|
|||
Ich habe mir jetzt im Schweiße meines Angesichtes etwas zusammen gebastelt.
Ich kann mir aber nicht vorstellen, dass das so richtig ist. Scheint mir viel zu kompliziert. Kann mir da bitte noch mal jemand helfen. 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> <style type="text/css"> <!-- label { clear: left; float: left; width: 50px; } input { text-align:left; top:18px; position:fixed; float: left; clear: left; } .name { float: left; clear: none; position: relative; left: 90px; } .namefield { color: #FF3300; float: left; clear: none; position: relative; left: 40px; } .ort { clear: none; float: left; position: relative; left: -265px; top: 75px; } .ortfield { float: left; clear: left; position: relative; left: 110px; top: -22px; } form { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } --> </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <label for="vorname" class="vorname">vorname</label> <input name="vorname" type="text" id="vorname" size="15" /> <label for="name" class="name">name</label> <input name="name" type="text" id="name" size="40" class="namefield"/> <label for="strasse">strasse</label> <input type="text" name="strasse" id="strasse" /> <label for="plz">plz</label> <input name="plz" type="text" id="plz" size="10"/> <label for="ort" class="ort">ort</label> <input name="ort" type="text" class="ortfield" id="ort" /> </form> </body> </html> |
|
||||
Ein möglicher Lösungsansatz wäre folgender:
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>form</title> <style type="text/css"> form p { clear: both; } label { float: left; padding: 0 1em .5em 0; } input, textarea { display: block; } </style> </head> <body> <form method="post" action="" id="form1"> <p> <label for="firstname"> Vorname <input type="text" name="firstname" id="firstname" /> </label> <label for="name"> Name <input type="text" name="name" id="name" /> </label> </p> <p> <label for="street"> Straße <input type="text" name="street" id="street" /> </label> </p> <p> <label for="zip"> PLZ <input type="text" name="zip" id="zip" /> </label> <label for="city"> Ort <input type="text" name="city" id="city" /> </label> </p> <p> <label for="comment"> Bemerkung <textarea name="comment" cols="39" rows="5" id="comment"></textarea> </label> </p> </form> </body> </html> |
|
|||
@Inta: dein Beispielcode ist nicht valide. So wäre es besser:
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>form</title> <style type="text/css"> form div { clear: both; } label { float: left; padding: 0 1em .5em 0; } input, textarea { display: block; } </style> </head> <body> <form method="post" action="" id="form1"> <div> <label for="firstname">Vorname</label> <input type="text" name="firstname" id="firstname" /> <label for="name">Name</label> <input type="text" name="name" id="name" /> </div> <div> <label for="street">Straße</label> <input type="text" name="street" id="street" /> </div> <div> <label for="zip">PLZ</label> <input type="text" name="zip" id="zip" /> <label for="city">Ort</label> <input type="text" name="city" id="city" /> </div> <div> <label for="comment">Bemerkung</label> <textarea name="comment" cols="39" rows="5" id="comment"></textarea> </div> </form> </body> </html> |
|
||||
Zitat:
Code:
<label for="firstname"> Vorname <input type="text" name="firstname" id="firstname" /> </label> <label for="name"> Name <input type="text" name="name" id="name" /> </label> Code:
<label for="firstname">Vorname</label> <input type="text" name="firstname" id="firstname" /> <label for="name">Name</label> <input type="text" name="name" id="name" /> |
Sponsored Links |
|
||||
Zitat:
Zitat:
Das wär mir neu, hier zum Beispiel sind beide Wege aufgezeigt: Forms in HTML documents |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabelle mit H1 oder ähnlichen formatieren möglich? | basillio | CSS | 2 | 08.11.2010 22:53 |
Tabelle mit CSS Formatieren? | manolo | CSS | 1 | 28.05.2009 15:49 |
Tabelle formatieren | mike-loewe | CSS | 1 | 10.04.2008 18:54 |
Tabelle als .css formatieren | Meralus | CSS | 1 | 14.03.2008 11:31 |
Tabelle mit CSS formatieren | escholz | CSS | 1 | 07.03.2007 10:12 |