Tài liệu Einstieg in CSS- P11 pptx

281 Modul 1: Namen und Adresse - Radio- Buttons und Textfelder 2841 Modul 1: Namen und Adresse - Radio-Buttons und Textfelder Und so wird Modul 1 aussehen: Personliches Thre Nachri

Trang 1

281 Modul 1: Namen und Adresse - Radio- Buttons und Textfelder

2841 Modul 1: Namen und Adresse -

Radio-Buttons und Textfelder

Und so wird Modul 1 aussehen:

Personliches Thre Nachricht

Anrede Anlass

Name Schreiben Sie, was Sie beweg!

Hiillen Sie den gesamten Container div#wrap_content in ein

Form-Element, wie Sie es schon einmal verwendet haben Sie be-

nutzen dabei wieder die Sende-Funktion von nettz.de; vergessen Sie nicht, ein hidden field mit der Empfangeradresse einzufiigen

Dieses Vorgehen erlaubt, dass alle drei Spalten als ein zusammen- hangendes Formular funktionieren Aus Platzgriinden wird der nachfolgende Code nicht eingertickt

<form id="myform" action="http://www.nettz.de/Formular- Chef/Formular-Chef.cgi® method=post enctype="multipart/

4 Abbildung 28.2

Layout #07, Formular mit Spalte 1 fiir persönliche

Daten

Mochten Sie nur eines

der Module verwenden, so

umhillen Sie nur dieses mit dem Form-Element und setzen Sie den Submit- Button

an das Ende(d.h vor dem

f orm-Ende-Tag)

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

311

Trang 2

Denken Sie bei Formularen

immer daran, die Felder auch

im Sinne der Barrierefreiheit deutlich zu kennzeichnen

Das erreichen Sie mit den Elementen | abel und

Der Container div#wrap_content umhillt seinerseits die drei

Spalten, die letztlich das Formular ausmachen Der Container div#coll bildet die linke Spalte, die nachfolgend mit Formular- daten ftir das erste Modul gefullt wird

<1i><input name="anrede" id="anrede" type="radio"

value="Frau" /><label for="anrede">Frau</label></1i>

<1i><input name="anrede" id="anrede" type="radio’

value="Herr" /><label for="anrede">Herr</label></1i>

</ol>

</fieldset>

Indem Sie jedes fieldset-Element mit einer eigenen Klasse verse-

hen, konnen Sie spater in CSS den jeweiligen 01-Elementen unterschiedliche Eigenschaften zuweisen

Die Eingabe-Elemente in der linken Spalte werden von einem

set.anrede Wie schon angekiindigt, helfen Ihnen bei der Gestal- tung in CSS geordnete Listen 01, die Eingabefelder wie 1i-Elemen-

<1i><label for="plz">PLZ</label><input name="p1z"

id="plz" type="text" /></1i>

<]i><label for="ort">Ort</label><input name="ort"

id="ort" type="text" /></1i>

Trang 3

selected="selected">Deutschland</option>

<option value="oesterreich">&Ouml ; sterreich</option>

<option value="schweiz" >Schweiz</option>

</select>

</div><! END #box >

</div><! END #coll >

Die nachste geordnete Liste 01 gilt den Namens- und Adressdaten

Der CSS-Code

Die Formularseite soll breitenflexibel sein, das heift, die mittlere Auch ein Formular kann mit

Spalte darf sich ausdehnen, wahrend die beiden seitlichen Spalten ein wenig mehr Aufwand

weisungen bleiben unverändert

body { font: 1.2em/1.8em Verdana, sans-serif; }

div#wrapper {margin: Opx 40px; background: #FAFAFA; }

Die erste Spalte wird links gefloatet, die zweite rechts, beide er-

Trang 4

div#maintext { margin: Opx 210px;

Nun richten Sie noch die Navigationsleiste mithilfe einer klei-

nen Anpassung zentriert aus, was mit der nunmehr symmetrischen

Ausrichtung der Seite besser korrespondiert

margin: 0px 0px 10px 10px;

padding: 0px;

Fiir die ol-Elemente werden die Listenpunkte entfernt (list-

style-type: none;) und die Aukenabstande von 10px nach unten

und links eingestellt Das riickt die Elemente etwas vom linken Rand weg und schafft unten einen kleinen Abstand zu den nach- folgenden Elementen

fieldset.person, fieldset.nachricht, fieldset.interesse {

Trang 5

Fủr die drei ũbergeordneten fieldset-Elemente legen Sie einen feinen grauen Rahmen fest und defnieren lnnen- und AuÊen- abstände nach unten

fieldset.person legend, fieldset.nachricht legend, fieldset.interesse legend [ margin-left: 10px;

font-family: Georgia, serif;

Eine Farbe als background verleiht der legend einen soliden Hin-

tergrund und ldst das Problem Auch ein Hintergrundbild ware

Trang 6

Auch beim Design mancher Formular-Elemente verhalt sich der Internet Explorer nicht ganz so wie andere

Browser

Die Breite eines Drop-Down- Meniis oder einer Drop- Down-Liste ist nicht exakt mit der Breite von Text- feldern in Ubereinstimmung

zu bringen

— 3⁄6

Méchten Sie die Beschriftungen der fieldset-Elemente auch im Internet Explorer prazise ausrichten, dann sollten Sie mit Conditio- nal Comments am besten ein eigenes Stylesheet fiir IE verkniipfen

fieldset.anrede legend, fieldset.anlass legend, fieldset.sport legend, fieldset.kultur legend { font-family: Verdana, sans-serif;

fieldset.person input, fieldset.person select,

ol interesse input { width: 160px;

bige Breite, einen Aubenabstand nach unten, einen Innenabstand,

damit eingegebener Text nicht so dicht am Feldrand erscheint und

den kleinen »Button-Effekt« ftir die input- und select-Elemente,

den Sie bereits in der Navigation kennengelernt haben Dieser verleiht den Eingabefeldern einen dezenten 3D-Effekt

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 7

Textfelder und das Drop-Down-Menủ erhalten die gleiche Breite

und einen kleinen margin-bottom, damit die Felder nicht zu dicht aufeinander folgen Ein padding bewirkt bei den Textfeldern, dass

Texte bei der Eingabe nicht zu dicht am Rand des Feldes »kle-

ben«

Die Anweisung fủr den border von ïnput- und select-Ele- menten (links und unten grau, rechts und oben weif) erzeugt einen leichten 3D-Effekt

Ort

4 Abbildung 28.6

Vorlage #07 Formular: Ein-

erzeugt wird

Land

fieldset.anrede input { width: auto;

border: none;

margin: Opx;

padding: Opx;

Fiir die Auswahl der Anrede »Herr« oder »Frau« werden sogenann-

te Radio-Buttons eingesetzt Die Breite der Radio-Buttons muss auf den Wert auto gesetzt werden, da sie in der vorigen Regel die

Breite von 160px angenommen haben Auch border, margin und padding sind hier nicht erwiinscht

fieldset.person ol label {display: block; }

Damit die Beschriftungen der Eingabe-Elemente in der linken Spal-

te nicht inline neben den Feldern erscheinen, sondern dartiber,

werden sie als Block-Elemente angezeigt

fieldset.anrede ol li, fieldset.anlass ol li, fieldset.anrede ol li label, fieldset.anlass ol 11 label { display: inline;

Trang 8

Im Gegensatz dazu erreichen Sie, dass Radio-Button- und Check- box-Elemente in der linken und mittleren Spalte nebeneinander

stehen, indem Sie deren display-Werte auf inline setzen

Vorlage #07 Formular:

Radio-Buttons und Check- O Frau O Herr 0 Lob © kritik 1 Frage ( Idee

box- Elemente und deren Beschriftung stehen durch

ander anstatt untereinander fieldset.anlass label,

label.mand {color: #E3004F; font-weight: bold;}

Die Pflichtfelder (mandatory fields) wurden im HTML-Code mit

einer entsprechenden Klasse versehen Fiir die Hervorhebung no- tieren Sie jetzt eine ganz einfache Losung — die Schrift erscheint in einer Schmuckfarbe und fett

Schreiben Sie, was Sie bewegt:

Abbildung 28.8 »

Vorlage #07 Formular: Her-

vorhebung eines Pflicht- Strafe

feldes durch color und font-

Trang 9

28.2_ Modul 2: Gemischte Daten - Radio-Buttons und Checkboxen

28.2 Modul 2: Gemischte Daten -

Und so wird Modul 2 aussehen:

Spalte 2 fir weitere person- _—= liche Angaben

Der HTML-Code Der Container div#col2 bildet die rechte Spalte und wird mit einer Ein Radio-Button erlaubt nur

Reihe von Radio-Buttons und einer Reihe von Checkbox-Elemen- a ee ee a ——

label for="sport">T&auml ;glich</label></1i> —

Wiederholen Sie das list itemsamt label noch dreimal und set-

</01>

</fieldset>

319: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 10

Hier wird das erste verschachtelte fieldset geschlossen und gleich danach das zweite geöffnet

Wiederholen Sie auch hier das 1i-Elemnet viermal und setzen Sie

unterschiedliche Werte (Begriffe) ein

</ol>

</fieldset>

<ol>

<1i><label for="favstadt">Liebl ingsstadt</label>

</ol>

</fieldset>

</div><! END #box >

</div><! END #col2 >

Ein zusatzliches Text-Eingabefeld (ebenfalls in einer geordneten Liste) dient als Muster, falls Sie diese Spalte als Vorlage fiir ein se- parates Formular verwenden wollen Das zweite der verschachtel- ten Fieldsets und das fieldset.interessen werden geschlossen, ebenso wie die Container div#box und div#col2

Der CSS-Code Die vorher notierten Anweisungen beinhalten bereits jene For- matierungen, die auch hier in Spalte 2 wirken, wie beispielsweise diejenigen flir das Aussehen der fieldset-Elemente

— 320

Trang 11

28.3 Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button

28.3 Modul 3: Nachrichtenfeld und

Senden - Textarea und Submit-

<11><input name="anlass" id="anlass" type="checkbox"

Trang 12

Gestalten Sie einen Textbereich fiir Nachrichten

</div><! END #maintext >

</div><! END #wrap_content >

</form>

Nun werden die Container divé#maintext und div#wrap_content

und schlieBlich auch noch das Formular selbst geschlossen (sofern Sie alle drei Spalten zu einem Formular vereinen wollen)

Der CSS-Code

Da die meisten Einstellungen bereits vorher mit den anderen Ele- menten festgelegt wurden, sind an dieser Stelle nur noch kleine Anpassungen und ein wenig Design fiir den Submit-Button erfor- derlich

fieldset.nachricht label {display: block; } textarea {width: 90%; height: 200px;}

Die Beschriftung des Nachrichtenfeldes soll ber diesem erscheinen Das Feld selbst soll sich in der Breite anpassen kénnen und

erhalt eine fixe Hohe

.psubmit {text-align: center; margin-top: 20px;}

Trang 13

28.3 Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button

Der Submit-Button liegt in einem Absatz mit der Klasse psubmit

Damit kann er unter dem Nachrichtenfeld zentriert angeordnet werden Ein kleiner Abstand nach oben riickt den Absatz (samt Button) vom Nachrichtenfeld weg

Der Submit-Button erhält ein Hintergrundbild mit einem zarten

Verlauf Die Eigenschaft cursor erhalt den Wert pointer, womit der Cursor die Form einer Hand annimmt, sobald sich dieser tiber

input#submit:hover {

background: #E3004F;

color: #FFFFFF;

Zu guter Letzt wird der Button beim Rollover noch farblich hervor-

Trang 14

Sie werden lernen,

> wie man Elemente an anderen mittig ausrichtet,

> wie man Texte und Bilder zentriert und

>» wie man den gesamten Seiteninhalt in die Mitte riickt

Trang 15

Abbildung 29.1 >

Text in einem div mit text-

align left, center, right

tionen

Das Zentrieren von Elementen ist eine grundlegende Technik ftir die Gestaltung von Seitenlayouts Daher werden hier noch einmal verschiedene Szenarien zu dieser Frage vorgestellt

291 Elemente horizontal zentrieren

Fiir diese Aufgabe existiert in CSS nur eine Eigenschaft, namlich

text-align Mit dem Wert center erreichen Sie, dass Texte oder Elemente innerhalb eines Block-Level-Elements horizontal zent-

riert ausgerichtet werden

Meine Behauptung, dass nicht nur Text, sondern auch andere Ele-

mente mit text-align zentriert werden kénnen, stimmt nur be-

dingt, wie der folgende Screenshot im Firefox-Browser zeigt:

Text zentriert

kia ==sseemse.s.mmess.mmesmmeesammssmmsesmmesmmsesmmeemmessmmeesmeesmmsesmee=m=ed

Firefox halt sich — wie so oft - strikt an die Vorgabe und zentriert

zwar ein Text-Level-Element, nicht aber ein Block-Level-Element SchlieBlich hei&t es ja text-align und nicht etwa block-align

Trang 16

Wie Sie dies in Firefox erreichen, haben Sie bereits beim Zentrie-

ren des ganzen Seitenbereichs div#wrapper kennengelernt Hier noch einmal das Schema mit einer kleinen Ergänzung

Der HTML-Code

beschreiben In der Praxis

sollten Sie allerdings Namen

Selektorennamen

div.redbox {margin-left: auto; margin-right: auto;}

Sie werden bemerken, dass hier — im Gegensatz zu den Ubungen

und Vorlagen - anstelle von margin: auto; nun explizit mar gin-

left und margin-right angegeben werden Dies wird von Exper-

ten empfohlen, um weitgehende Browserkompatibilitat zu errei-

chen

Und da die Eigenschaft text-align an Nachfahren-Elemente

vererbt wird, ist nun auch der Text innerhalb von div.redbox

ebenfalls zentriert ausgerichtet - was so nicht gewiinscht ist Es fehlt also noch eine kleine Erganzung ftir die Anweisung, namlich die Ausrichtung des Textes wieder zuriickzunehmen:

div.redbox { margin-left: auto;

margin-right: auto;

text-align: left;

29.2 Elemente vertikal zentrieren

Bei diesem Vorhaben wird es schon kniffliger Die Eigenschaft vertical-align zeigt sich immer dann, wenn man eine Wirkung erwarten wide, davon vollig unbeeindruckt

Schlagt man die Definition der Eigenschaft nach, wird klar, warum entsprechende Anweisungen wirkungslos verpuffen Die

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

327

Định dạng
Số trang	30
Dung lượng	5,51 MB