| | | | |
| |||||||
| HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability. |
|
| | LinkBack | Themen-Optionen | Thema bewerten |
| | |
| Neuer Benutzer | Guten Abend, ich möchte einem Formular ein einheitliches Aussehen verpassen. Einzelne Inputfelder, die zusammen mit dem dazugehörigen Label in einer Zeile stehen, lassen sich problemlos auf verschiedene Weise anpassen. Mein Problem sind die Telefonnummern, sowie PLZ und der Ort. Auch die Mehrfachauswahl hätt' ich gerne "auf Breite". Ansätze waren mit Pixelangaben für width zu arbeiten, was ich eigentlich vermeiden wollte, da habe ich aber das Problem, wie der Browser die Zeichen zwischen den Feldern interpretiert. Grafik will ich auch nicht, weil ich "denke zu wissen" das das auch anders funktionieren kann. Hab' zig Sachen schon ausprobiert, auch die Tuts wie z.B. bei Einfach für alle durchgearbeitet, aber ich finde einfach nicht raus, wie ich das am geschicktesten mit der exakten Breite für alle Elemente anstellen soll. HTML-Code: ... <form action="foo" method="post"> <fieldset> <legend>Persönliche Daten</legend> <!-- Start Anrede / Radiobuttons --> <fieldset class="radio_btn"> <legend>Anrede: </legend> <input type="radio" id="herr" name="anrede" value="herr" checked="checked" /> <label for="herr"> Herr </label> <input type="radio" id="frau" name="anrede" value="frau" /> <label for="frau"> Frau </label> </fieldset> <!-- Start Daten / Auswahl verschiedenster Elemente --> <fieldset class="daten"> <legend>Daten-gemischt: </legend> <label for="namen" class="left" >Namen etc.:</label> <input type="text" id="namen" name="namen" class="formtext" /><br /> <label for="strasse" class="left" >Straße: </label> <input type="text" id="strasse" name="strasse" class="formtext"/> <label for="strNr">Nr.: </label> <input type="text" id="strNr" name="strNr" /><br /> <label for="plz" class="left" >Plz.: </label> <input type="text" id="plz" name="plz" class="plz"/> <label for="ort">Ort: </label> <input type="text" id="ort" name="ort" /><br /> <label for="telefon" class="left" >Telefon: </label> <input type="text" id="telefon" name="vorwahl" class="formtext"/> - <input type="text" name="durchwahl" /><br /> <label for="land" class="left" >Land: </label> <select name="land" id="land" class="formtext"> <option value="">-- bitte wählen --</option> <option value="DE">Deutschland</option> <option value="AU">Österreich</option> <option value="SU">Schweiz</option> </select><br /> <label for="email" class="left" >E-Mail*: </label> <input type="text" id="email" name="email" class="formtext"/> </fieldset> <input type="submit" value="absenden" /> </fieldset> </form> ... Code: body {
font-size: x-small;
font-family: Arial, Helvetica, sans-serif;
}
.left {
width: 13em;
float: left;
display: block;
}
.formtext {
margin: 2px 2px;
padding: 3px 3px;
width: 14em;
}
.plz {
margin: 2px 2px;
padding: 3px 3px;
width: 5em;
}
Vielen Dank, euer Horst |
| | |
| | |
| PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten | |
| | |
| Moderator Registriert seit: 11.05.2008
Beiträge: 6.266
![]() ![]() ![]() ![]() ![]() ![]() ![]() | Du musst zunächst wissen, dass die Angabe des padding im <input>/<select>/.. zur Breite dazu gerechnet wird. Das heißt eine Breite von 100% und padding-left: 2px ergibt eine Breite von 100% + 2px. Mit sowas umzugehen ist sehr ungünstig. Versuch also auf das Mischen von Einheiten (% + absolut) zu verzichten. Du kannst dich auch mal an floating-Bereichen ranwagen: Code: <div> <input type="text" style="width:100%" value="Straße" /></div> <div> <div style="width:75%;float:left;margin:0;padding:0"><input type="text" style="width:100%" value="PLZ" /></div> <div style="width:24%;float:right;margin:0;padding:0"><input type="text" style="width:100%" value="Stadt" /></div> <br style="clear:both" /> </div> SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
__________________ "Nuschel ich?" - "Was?" |
| | |
| | ||
| Moderator Registriert seit: 11.05.2008
Beiträge: 6.266
![]() ![]() ![]() ![]() ![]() ![]() ![]() | Normalisierung (Datenbank) – Wikipedia Zitat:
__________________ "Nuschel ich?" - "Was?" | |
| | |
|
| Themen-Optionen | |
| Thema bewerten | |
|
|
Ähnliche Themen | ||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| PHP: Formular Generator | Zergling-new | Tutorials | 16 | 06.07.2010 03:14 |
| Ergebnis von Formular in iFrame zeigen | PsychoEagle | HTML, Usability und Barrierefreiheit | 2 | 22.07.2009 21:07 |
| PDF Formular ausfüllen mit PHP Formular | oomworld | PHP Tipps 2009 | 1 | 26.03.2009 19:09 |
| Wie würdet ihr das Formular submitten? | pras | Datenbanken | 5 | 05.03.2009 21:33 |
| Problem mit Formular, Daten an datenbank senden | Aurec | PHP Tipps 2008 | 11 | 20.11.2008 18:17 |
| Wert aus Textfeld in neues Formular übernehmen (kein Submit) | PsychoEagle | HTML, Usability und Barrierefreiheit | 9 | 02.01.2007 14:51 |
| formular includen | samspa5 | PHP Tipps 2006 | 13 | 18.03.2006 11:37 |
| [Erledigt] Formular in Formular | HTML, Usability und Barrierefreiheit | 4 | 19.10.2005 12:18 | |
| [Erledigt] Formular testen .... | HTML, Usability und Barrierefreiheit | 7 | 19.09.2005 14:03 | |
| [Erledigt] PHP Formular ~~wichtig~~ | PHP Tipps 2005 | 27 | 29.05.2005 19:38 | |
| [Erledigt] Formular formatieren | HTML, Usability und Barrierefreiheit | 5 | 30.01.2005 13:45 | |
| Im Formular user abfragen? | Datenbanken | 3 | 06.01.2005 10:51 | |
| [Erledigt] Daten in einem Formular ausgeben und ändern | PHP Tipps 2004-2 | 7 | 07.12.2004 17:22 | |
| Daten in Formular formatieren. | PHP Tipps 2004 | 3 | 11.08.2004 12:47 | |
| [Erledigt] Daten in neuem Formular anzeigen | PHP Tipps 2004 | 6 | 21.07.2004 10:44 | |