HTML and CSS Reference
In-Depth Information
Inhalte und Definitionen werden innerhalb von ul class "pageitem" zusammenge-
fasst. Text stellt man am besten, wie im Beispiel gezeigt, durch die Definition einer
Textbox dar:
<li class "textbox"></li>
Damit ist kein Texteingabefeld gemeint, sondern ein sich vom grauen Untergrund
abhebender Bereich für die Textanzeige.
Besonders einfach ist auch der Einbau von Touchfeldern für Links. Innerhalb einer
Seitenelementdefinition können folgende Bereiche definiert werden:
die Zielseite mittels des Tags a href "" ,
ein Icon,
die Bezeichnung des Links sowie
ein Pfeil nach rechts, der kenntlich macht, dass es sich bei dem Feld um einen Ver-
weis auf eine neue Seite handelt.
Im HTML-Code sieht das wie folgt aus:
<li class "menu">
<a href "preisrechner.html">
<img alt "Rechensymbol" src "../thumbs/calculator.png" />
<span class "name">Preisrechner</span>
<span class "arrow"></span>
</a>
</li>
Die Klasse menu ruft das Design eines Touch-Menüfelds auf, das
Tag a href "" verweist auf die Zielseite preisrechner.html .
Piktogramme und Icons können ohne Klassenzuweisung im
img -Tag eingefügt werden, während für die Linkbezeichnung
die Klasse span class "name" und für den Pfeil die Klasse
span class "arrow"> angegeben werden muss.
Zum Abschluss zeigt unser Beispiel noch einmal die Verwen-
dung eines Seitenelements, das neben einer Textbox auch ein
Bild enthält. Im Kopfbereich der HTML-Datei hatten wir
definiert, dass dieses Bild, da es innerhalb des textimg-div -
Bereichs liegt, die für das iPhone typischen Abrundungen
erhält. Optisch abgesetzt ist der Fußbereich, der einfach über
div id "footer" definiert wird und sich insbesondere in der
Schriftgröße vom Rest des Inhalts absetzt.
Search WWH ::




Custom Search