HTML and CSS Reference
In-Depth Information
5.2.5 Die Programmoberfläche
Sie haben nun alle benötigten Funktionalitäten für Ihre Geolocation-App beisam-
men. Nun müssen Sie das Ganze noch in einen App-Rahmen gießen. Sie beginnen
mit dem HTML-Code. Sie haben bereits den Platzhalter für die Karte und die Restau-
rantliste angelegt, ergänzen Sie einen weiteren Bereich für die Optionen:
<section id="karte">
</section>
<section id="uebersicht">
<h2>Restaurants in der N&auml;he</h2>
<ul>
<!-- Wird dynamisch befüllt -->
</ul>
</section>
<section id="optionen">
<h2>Optionen</h2>
<ul>
<li><label>Pizza<span><input type="checkbox" checked="checked"
class="Pizza"></span></label></li>
<li><label>Burger<span><input type="checkbox" checked="checked" class=
"Burger"></span></label></li>
<li><label>Pasta<span><input type="checkbox" checked="checked" class=
"Pasta"></span></label></li>
<li><label>Sushi<span><input type="checkbox" checked="checked" class=
"Sushi"></span></label></li>
</ul>
</section>
Dieser besteht aus einer unsortierten Liste mit den Restaurantkategorien, die jeweils
eine angewählte Checkbox pro Listeneintrag enthält. Um das Layout kümmert sich
eine CSS-Datei, in der Folgendes steht:
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
section {
overflow: scroll;
-webkit-overflow-scrolling:touch;
width: 100%;
min-height: 411px;
background: #c5ccd4;
padding-bottom: 50px;
Search WWH ::




Custom Search