Pauls Blog http://www.paul-kroening.de/ Blog und Tutorials zu CSS und JS/DOM Wartungsarbeiten [4] <p><span class="big">D</span>as Grundgerüst steht soweit. In den nächten Tagen und Wochen werde ich die Seiten wieder mit Inhalt füllen. Es wird einige neue Tutorials und Templates gegeben, also schaut bald noch mal vorbei. </p> <p><div id="load"><p>50%</p></div></p> http://www.paul-kroening.de/blog-webdesign/wartungsarbeiten chickensclub.de [11631] <h4 class="textbrowser">www.chickensblub.de</h4> <a href="http://www.chickensclub.de"><img class="referenzen" src="/images/referenzen/chickensclub.jpg" alt="Vorschaubild: chickensclub.de" title="chickensclub.de" /></a> <dl class="referenzen"> <dt>Profil:</dt> <dd>Community-Homepage.</dd> <dt>Art:</dt> <dd>Tabellendesign</dd> <dt>URL:</dt> <dd><a href="http://www.chickensclub.de">www.chickensclub.de</a></dd> </dl> http://www.paul-kroening.de/referenzen/chickensclubde STR : Swishmax Text Replacement [3] <p><span class="big">I</span>ch teste zur Zeit <abbr title="SwishMAX Text Replacement">STR</abbr>, eine dynamische Methode Textelemente automatisch durch Flashobjekte zu ersetzen.</p> http://www.paul-kroening.de/blog-webdesign/Swishmax Text Replacement Formulare mit CSS gestalten (Teil 1) [7045] <p>In diesem Artikel wird ein Formular standardkonform ausgezeichnet (fieldset-, legend- und label-Elemente) und formatiert. Auf Tabellen als Layoutratser wird bewußt verzichtet und ausschließlich CSS zur Anordnung der Formularelemente verwendet.</p> <h3>Inhalt</h3> <ul> <li><a href="http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1#aufbau">Ein typischer Aufbau</a></li> <li><a href="http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1#anordnen">Positionieren der Elemente</a></li> <li><a href="http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1#gestalten">Usability und Design</a></li> <li><a href="http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1#beispiel">Ein Beispiel</a></li> </ul> <h3 id="aufbau">Ein typischer Aufbau für ein Kontaktfomular</h3> <p>entweder man arbeitet mit Überschriften, also hx-Tags, für die logischen Unterteilungen des Formulars oder mit <code><fieldset></code> in Verbindung mit <code><legend></code>. In diesem Beispiel kommt die zweite Variante zum Einsatz. In jedem Fall sollte man aber für die Titel der Inputfelder das <code><label></code>-Element verwenden. In dieser Anleitung ist das Formular in drei Bereiche unterteilt: Kontaktinformationen, eine Umfrage und Eingabefeld für die Nachricht. Folgende HTML-Struktur gilt es also zu gestalten:</p> <p class="codetext">Download this Code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_markup.txt">/code/formulare_gestalten_markup.txt</a></p> <h3 id="anordnen">Anordnen der Elemente</h3> <p>Ohne CSS sieht das Formlar nicht sehr schön aus, obwohl die Funktionalität nicht beeinträchtigt ist. Zunächst muss man die Elemente übersichtlicher anordnen. Dafür werden die Input-Elemente und deren Label formatiert:</p> <ol class="code"> <li><code>select{ </code></li> <li class="tab1"><code>position: relative; </code></li> <li class="tab1"><code>top: -1.4em; </code></li> <li class="tab1"><code>left: 8em; </code></li> <li class="tab1"><code>display: block; </code></li> <li class="tab1"><code>width: 8em; </code></li> <li class="tab1"><code>border: 1px solid #a5acb2; </code></li> <li><code>} </code></li> <li><code> </code></li> <li><code>label{ </code></li> <li class="tab1"><code>float: left; </code></li> <li class="tab1"><code>display: block; </code></li> <li class="tab1"><code>width: 8em; </code></li> <li class="tab1 cmnt"><code>clear: left; /* Umbruch */ </code></li> <li class="tab1"><code>margin-top: -1em; </code></li> <li class="tab1"><code>font-weight: bold; </code></li> <li><code>} </code></li> <li><code> </code></li> <li><code>input{ </code></li> <li class="tab1"><code>position: relative; </code></li> <li class="tab1"><code>top: -1.4em; </code></li> <li class="tab1"><code>left: 8em; </code></li> <li class="tab1"><code>display: block; </code></li> <li class="tab1"><code>border: 1px solid #a5acb2; </code></li> <li class="tab1"><code>padding: 2px; </code></li> <li class="tab1"><code>background: #fff; </code></li> <li><code>}</code></li> <li class="source">Download this code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_1_1.txt" title="Download the above code as a textfile">/code/formulare_gestalten_1_1.txt</a></li> </ol> <p>Um zu erreichen, dass alle Input-Felder untereinander angeordnet werden, bekommen sie die Eigenschaft <code>float:left;</code> in Verbindung mit <code>clear:left;</code> zugewiesen. Jetzt muss man nur noch Input- zu Label- und Select-Elementen relativ positionieren und die Input- sowie Select-Elemente nach rechts verschieben - dann hat man das Gröbste erledigt.</p> <p>Für das erste Labelelement wird nun eine Klasse eingeführt, die zum Positionieren innerhalb des Fieldsets gebraucht wird, um Platz zum oberen Rand zu schaffen - so kann man auf <code>padding</code> für das Fieldset verzichten, da es im IE damit Probleme gibt (Bug)</p> <ol class="code"> <li><code>label.erstes{ </code></li> <li class="tab1 cmnt"><code>margin-top: 1em; /* Abstand */ </code></li> <li><code>}</code></li> <li class="source">Download this code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_1_2.txt" title="Download the above code as a textfile">/code/formulare_gestalten_1_2.txt</a></li> </ol> <p>Die ersten beiden Bereiche des Formular sehen schon ganz manierlich aus. Jedoch könnte man noch die Radiobuttons horizontal zum rechten Rand schieben. Dafür bekommt das Fieldset, in dem die Radiobuttons für die Umfrage verwendet werden, eine extra Klasse. Man kann so gezielt diese Schaltfächen formatieren, etwa das Entfernen der Standardrahmen und - Hintergrund für Input-Felder, da man anfangs schon ganz allgemein die Input-Elemente formatiert hat:</p> <ol class="code"> <li><code>fieldset.radio input{ </code></li> <li class="tab1 cmnt"><code>border: none; /* wichtig */ </code></li> <li class="tab1 cmnt"><code>background: none; /* wichtig */ </code></li> <li class="tab4"><code>left: 17.5em; </code></li> <li><code>} </code></li> <li><code>* html fieldset.radio input { </code></li> <li class="tab1 cmnt"><code>left: 18.5em; /* IE */ </code></li> <li><code>}</code></li> <li class="source">Download this code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_1_3.txt" title="Download the above code as a textfile">/code/formulare_gestalten_1_3.txt</a></li> </ol> <p>Nun werden Textfeld und Sendeknopf gestaltet.<br /> Mit Hilfe der Klasse "senden" wird der Sendeknopf transformiert bzw. positioniert. Das Textfeld bekommt ähnliche Eigenschaften und Werte wie schon bei den Inputfeldern zugewiesen, damit alles einheitlich aussieht: </p> <ol class="code"> <li><code>input.senden{ </code></li> <li class="tab1"><code>top: -1em; </code></li> <li class="tab1"><code>left: 0; </code></li> <li class="tab1 cmnt"><code>clear: left; /*wichtig */ </code></li> <li class="tab1"><code>width: 19em; </code></li> <li><code>} </code></li> <li><code>textarea{ </code></li> <li class="tab1"><code>position: relative; </code></li> <li class="tab1"><code>top: -1.4em; </code></li> <li class="tab1"><code>left: 0; </code></li> <li class="tab1"><code>display: block; </code></li> <li class="tab2"><code>border:1px solid #a5acb2; </code></li> <li class="tab1"><code>padding: 2px; </code></li> <li class="tab1"><code>width: 19em; </code></li> <li class="tab1"><code>height: 15.7em; </code></li> <li><code>}</code></li> <li class="source">Download this code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_1_4.txt" title="Download the above code as a textfile">/code/formulare_gestalten_1_4.txt</a></li> </ol> <p>Mit folgenden kleinen Korrekturen für das Fieldset ist man eigentlich schon fertig:</p> <ol class="code"> <li><code>form{ </code></li> <li class="tab1"><code>margin: 2em 0; </code></li> <li class="tab1"><code>display: block; </code></li> <li><code>} </code></li> <li><code> </code></li> <li><code>fieldset{ </code></li> <li class="tab1"><code>border: 1px solid #000; </code></li> <li class="tab1"><code>display: block; </code></li> <li class="tab1"><code>padding: 1em 2em; </code></li> <li class="tab1"><code>clear: both; </code></li> <li class="tab1 cmnt"><code>width: 20em; /* wichtig */ </code></li> <li class="tab1"><code>margin: 2em 0 0 0; </code></li> <li><code>}</code></li> <li class="source">Download this code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_1_5.txt" title="Download the above code as a textfile">/code/formulare_gestalten_1_5.txt</a></li> </ol> <h3 id="gestalten">CSS/JS für Usability und Design</h3> <p>Das nun folgende CSS wird zwar nur von modernen Browsern interpretiert, bedeutet aber ein großes Plus für die Handhabung solcher Formulare. Zum Beispiel kann man das aktive Feld hevorheben, an den der User gerade arbeitet oder einfach das Formular an die Farbgebung der Seite anpassen.</p> <p>Das Prinzip ist ganz einfach - man gibt einfach für die verwendeten Elemente Eigenschaften wie <code>border</code>, <code>background</code>, <code>color</code>, etc an. Mit den Pseudoklassen, wie zum Beispiel <code>:focus</code> kann man auch noch ein paar nützliche Effekte erzielen, die die Handhabung des Formulars erleichtern können. Dies will ich aber hier nicht ausführlich erläutern, das dies CSS-Grundlagen sind.</p> <ol class="code"> <li><code>select:hover, </code></li> <li><code>input:hover, </code></li> <li><code>textarea:hover{ </code></li> <li class="tab1"><code>border: 1px solid #999; </code></li> <li class="tab1"><code>color: #31709F; </code></li> <li><code>} </code></li> <li><code>select:focus, </code></li> <li><code>input:focus, </code></li> <li><code>textarea:focus{ </code></li> <li class="tab1"><code>background: #DFF1FF; </code></li> <li class="tab1"><code>border: 1px solid #000; </code></li> <li class="tab1"><code>color: #000; </code></li> <li><code>} </code></li> <li><code>html > body fieldset{ </code></li> <li class="tab1 cmnt"><code>background: #f3f3f3; /* vor IE verstecken */ </code></li> <li><code>}</code></li> <li class="source">Download this code: <a href="http://www.paul-kroening.de/code/formulare_gestalten_1_6.txt" title="Download the above code as a textfile">/code/formulare_gestalten_1_6.txt</a></li> </ol> <p>Nützlich ist auch ein kleines Javascript, da bei klicken auf das Textfeld den Beschreibungstext (value des Inputelements oder Textfelds) verschwinden lässt. Es wird einfach als Attribut für zum Beispiel das Inputelement notiert.</p> <p>So funktioniert es: Bei Focus, d.h. wennd er User auf dieses Element klickt, wird dessen Wert auf einen leeren String gesetzt.</p> <code class="code"> <input id="vorname" name="vorname" type="text" value="Vorname" onfocus="this.value=''" /> </code> <p>Konsequenterweise sollte man das Javascript auslagern, damit der Inhalt des Dokuments von seinem Verhalten getrennt bleibt, darauf wurde jedoch in diesem Artikel ausnahmsweise verzichtet.</p> <h3 id="beispiel">Ein Beispiel</h3> <p><a href="http://www.paul-kroening.de/example/formulare_gestalten_1.html">Hier geht es zum Beispiel</a></p> http://www.paul-kroening.de/tutorials-css/formulare-mit-css-gestalten-teil-1 Webdesign - mein Profil <p>Ich biete neben meinem Studium auch gelegentlich meine Dienste als Webdesigner an.</p> <p>Ich nehme zwar nicht viele Aufträge an, aber wenn ich mich mit einem Projekt befasse, können Sie sicher gehen, dass sie ansehnliche Seiten, mit sauberem Code nach den aktuellen Webstandards erstellt bekommen.</p> <h3>Seiten mit Struktur und Stil</h3> <p>Gutes Webdesign ist eine Verbindung von Schönheit und Ordnung. Gut strukturierter Inhalt und einladendes Design sind typisch für meine Arbeiten.</p> <h3>Planung</h3> <p>Bei mir beginnt ein typisches Engagement mit der Ergründung der Ziele meiner Kunden, deren Kunden und schließlich der technischen Anforderungen an die Aufgabe. Sorgfältige Planung und offene Kommunikation sind der Schlüssel für erfolgreiches Arbeiten.</p> <h3>Struktur</h3> <p>Ich gestalte Webseiten nach den aktuellen Webstandards, wie etwa für XHTML und Cascading Style Sheets (CSS). Ich achte besonders auf gute Zugänglichkeit und Handhabung - bequeme Seitenverwaltung bei kleinen Dateigrößen.</p> <h3>Stil</h3> <p>Ich bin der Auffassung, dass Webseiten visuell herausfordernd, einfach zu verstehen und benutzen sein sollten. Erfahren im Umgang mit Typographie, Farben und Bildbearbeitung, werden meine Seiten zu einem angenehmen Surferlebnis.</p> <h3>Interesse?</h3> <p>Hinterlassen Sie mir doch einfach eine Nachricht. Nutzen sie einfach das <a href="http://www.paul-kroening.de/kontakt/">Kontaktformular</a> oder eine der zahlreichen anderen <a href="http://www.paul-kroening.de/kontakt/">Kontaktmöglichkeiten</a>.</p> <h2 style="border-top: 1px solid #999; margin-top:30px;" class="str">Fragen und Antworten</h3> <p>Hier folgt eine Auflistung häufig gestellter Fragen. Von Zeit zu Zeit wird die Liste aktualisiert. Falls Sie noch Fragen haben, die nicht unten aufgeführt sind oder ausführlichere Antworten erhalten möchten, können Sie mir gern eine Email schreiben oder eine Anfrage über das Kontaktformular senden.</p> <h3>Bieten Sie auch Flashdesign an?</h3> <p>Ich übernehme gern die Gestaltung von kleineren Seiten oder Teasern. Für größere Projekte sollten Sie besser einen Flashfachmann beauftragen.</p> <h3>Wie lange dauert ein typischer Auftrag?</h3> <p>Das ist natürlich sehr stark von Umfang abhängig, also wenige Tagen bis hin zu mehreren Wochen.</p> <h3>Wie sind ihre Preise?</h3> <p>Preise werden individuell mit dem Kunden besprochen, ich stufe mich aber im Vergleich zu Agenturen als relativ günstig ein. </p> http://www.paul-kroening.de/webdesign/webdesign---grundsaetze