MST-NETSOLUTIONS SEO BLOG

Teil 4: Design

Header

Nachdem die Funktionalität schon in den Grundzügen vorhanden ist, werden wir uns nun darum kümmern, dass das Ganze auch noch ein wenig schöner aussieht.

Dazu werden wir zunächst ein paar Zeilen in den Header packen müssen, also ganz an den Anfang unserer einkaufsliste.php noch über das <?php

<html lang="de-DE">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="einkauf.ico" type="image/x-icon"/>

Als Erstes werden wir den HTML-Kopf für HTML5 und die passende Sprache bilden. Danach beginnt mit <head> der HTML-Kopf. Darin geben wir zunächst mit dem meta-Tag viewport an, dass dieses Datei auch responsiv nutzbar ist und alles in den sichtbaren Bereich gehört und auf die Bildschirmbreite des Gerätes gedehnt wird width=device-width gefolgt vom Zoom-Level initial-scale=1.0

Darunter fügen wir eine Zeile ein, um im Browser ein Icon für die Lesezeichen anzuzeigen. Das Bild einkauf.ico ist ein einfaches kleines Bitmap in der Größe 64×64 Pixel, welches in .ico umbenannt wird und im gleichen Verzeichnis auf der Server liegen muss, wie die einkaufsliste.php.

Der Style

Damit Buttons, Tabelle und Co auch schön formatiert werden, bauen wir nun die Styles ein. Klar sollte man diese Einstellungen eigentlich in eine extra Datei legen, aber ich möchte hier alles in einer Datei zeigen, also fügt folgendes direkt nach dem obigen Code hinzu:

<style>
.button{cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;text-decoration:none}
.button1{box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

input[type=submit]{background-color:#6BC500;border:none;border-radius:4px;box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);color:white;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:14px 20px;text-align:center;text-decoration:none;transition-duration:0.4s;width:100%;-webkit-transition-duration:0.4s}
input[type=submit]:hover{background-color:#5AB300}
input[type=text],[type=date],[type=number],select{border:1px solid #ccc;border-radius:4px;box-sizing:border-box;display:inline-block;margin:10px 0;padding:12px 20px;width:100%}

div{background-color:#F2F2F2;border-radius:5px;padding:20px}

#Tabelle td{border:1px solid #CFCFCF;padding:10px}
#Tabelle th{background-color:#6BC500;border:1px solid #CFCFCF;color:white;padding:10px;padding-bottom:12px;padding-top:12px;text-align:left}
#Tabelle tr:nth-child(even){background-color:#eee}
#Tabelle tr:nth-child(even){background-color:#ccc}
#Tabelle tr:hover{background-color:#6BC500}
#Tabelle{border-collapse:collapse;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;margin-top:20px;width:100%}

.Auswahl{background-color:#eee;height:25px;left:0;position:absolute;top:0;width:25px}

.EingabeFeld{cursor:pointer;display:block;font-size:22px;margin-bottom:12px;padding-left:35px;position:relative;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none}
.EingabeFeld input{cursor:pointer;opacity:0;position:absolute}
.EingabeFeld input:checked ~ .Auswahl{background-color:#6BC500}
.EingabeFeld input:checked ~ .Auswahl:after{display:block}
.EingabeFeld:hover input ~ .Auswahl{background-color:#ccc}
	
</style>
</head>
<body>

Ans Ende der Datei packen wir dann für den ordentlichen Abschluß noch ein </body></html>

Natürlich kann die Liste und die Eingabe optisch noch schöner und mit Grafiken aufwendiger gestaltet werden, aber wenn Du die Liste wirklich für Deinen Einkauf nutzen möchtest, sollte darauf verzichtet werden, um im Supermarkt nicht plötzlich bei einer Edge-Verbindung genervt zwischen den Regalen sitzen zu müssen…

Letztendlich ist hier die Liste praktisch fertig. In den folgenden Teilen werden optionale Features zugefügt und einige kleine Änderungen und Verbesserungen gezeigt. Die Liste selbst kannst Du so aber schon einsetzen.