Zu einem ähnlichen Formular gibt es ein Videotutorial bei lupin 3000 http://www.lupin3000.de/tutorials_viewit.php?viewid=3&kat=css&id=176
Es folgt eine knappe Erklärung der Schritte:
Div Tag erstellen
Klasse Name: myFormdiv
Formular einfügen
im Formular eine Feldgruppe einfügen, (Symbol in der Formularleiste) Legend: Ihre Nachricht
Textfeld einfügen, (Label Tag. mit for Attribut anhängen), Name und Beschriftung eingeben
den letzten Schritt für weitere Felder wiederholen
Textarea einfügen auch hier label hinzufügen
Button einfügen ohne Label
Anleitung für die CSS StyleSheets des Formulars
Man kann sich die Tags entweder in der Codeansicht auswählen oder unten auf der Leiste des Dokuments, hat man ein Tag ausgewählt und klickt dann im CSS Fenster auf das Plus-Symbol für "neuer Stil", wird automatisch die richtige Klassendefinition angzeigt. Bei einigen Tags kann man diese etwas anpassen.
#myFormdiv
Box Breite 400 Pixel
#myFormdiv #theForm fieldset
Rahmen durchgehend, 1 Pixel, Farbe definieren
#myFormdiv #theForm br
Box frei: beide
dadurch wird das "floaten" unterbrochen
#myFormdiv #theForm legend
Schriftformatierung für Überschrift des Formulars definieren
#myFormdiv #theForm label
Schriftformatierung für die Bezeichnungen der Eingabefelder
Block Textausrichtung: rechts, Anzeigen: Block
Box Breite 100 Pixel, schwebend: links, Rand: 5 Pixel
#myFormdiv #theForm input
Schriftformatierung
Box Breite 200 Pixel, Rand: 5 Pixel
#myFormdiv #theForm textarea
Schriftformatierung
Box Breite: 200 Pixel Höhe: 200 Pixel Rand: 5 Pixel
#myFormdiv #theForm #button
Für den Button wird eine extra Style Definition erstellt
Box Breite: 100 Pixel, Rand:5,5,5,110
<style type="text/css">
<!--
#myFormdiv {
width: 400px;
margin-right: auto;
margin-left: auto;
}
#myFormdiv #theForm fieldset {
border: 1px solid #999999;
}
#myFormdiv #theForm br {
clear: both;
}
#myFormdiv #theForm legend {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
#myFormdiv #theForm label {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: right;
display: block;
float: left;
width: 100px;
margin: 5px;
}
#myFormdiv #theForm input {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
width: 200px;
margin: 5px;
}
#myFormdiv #theForm textarea {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 200px;
width: 200px;
margin: 5px;
}
#myFormdiv #theForm #button {
width: 100px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 110px;
}
h1 {
font-size: 18px;
color: #006600;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
background-color: #FFFFFF;
}
-->
</style>
Zurück zum Dreamweaver Tutorial