nicht angemeldet
Hallo
Anfängern ist leider nur schwer zu erklären, warum ein Quelltext Schrott (deutlich ausgedrückt) oder aus technischer Sicht leider schlecht (freundlich ausgedrückt) sein soll.
Ich habe mal einen für mich sauberen Quelltext erstellt. Dabei gibt es natürlich immer zu diskutierende Kleinigkeiten. Den kannst du gerne mit deinem vergleichen.
<body>
<nav>
<a href="#schminkfarben">Farben</a>
<a href="#kosten">Kosten</a>
<a href="#kontakt">Kontakt</a>
<a href="#bilder">Bilder</a>
</nav>
<header>
<figure>
<img src="http://facefun.de/t.jpg" alt="Facefun-Schriftzug">
</figure>
</header>
<main>
<section>
<h1 class="unsichtbar">Facefun</h1>
<p>"Lass dich mit Pinsel und Farben verzaubern"</p>
<p>Egal ob es um einen Geburtstag, ein Fest oder eine Vorführung geht, schon in wenigen Minuten verwandeln sich Kindergesichter in Piraten, Feen, Katzen oder beliebige andere Charakterfiguren. Passend zu jedem Anlass schminke ich Kinder auch thematisch zusammenhängend, zum Beispiel zu Märchen, Geschichten oder Fantasy-Spielen. Warum nicht einmal ein Kindergeburtstag mit Findus und seinen Freunden?</p>
<p>Fröhliche geschminkte Kindergesichter bringen Farbe in Ihre Feier oder Veranstaltung. Ich würde mich freuen, bei deren Gestaltung mitwirken zu können.</p>
<p>Ihre</p>
<address>Johanna Böhm</address>
</section>
<section>
<hr id="schminkfarben">
<h2>Schminkfarben</h2>
<p>Kinderhaut liegt mir am Herzen, deshalb verwende ich ausschließlich dermatologisch getestete, fettfreie und wasserlösliche Schminkfarben ohne Parfumstoffe, Gluten, Arsen, Antimon oder Schwermetalle gemäß Spielwaren-Verordnung und nach den Richtlinien über die Sicherheit von Spielzeug in der EU.</p>
<p>Zusätzlich können sich die Kinder vorher ihr Gesicht eincremen. Während des Spielens sind diese Farben wischfester als Fettfarben und lassen sich auf Wunsch jederzeit einfach mit Wasser und Seife abwaschen.</p>
</section>
<section>
<hr id="kosten">
<h2>Kosten</h2>
<dl>
<dt>Kinderschminken bis 2 Stunden:</dt>
<dd>60 € / 90 Fr</dd>
<dt>Jede weitere angefangene halbe Stunde:</dt>
<dd>10 € / 15 Fr</dd>
<dt>Für private Feiern bis 12 Kinder:</dt>
<dd>60 € / 90 Fr</dd>
</dl>
<p>Alle Preise inklusive Material und Anfahrt im nachfolgend dargestellen Gebiet. Bei Aufträgen außerhalb fallen zusätzliche Fahrtkosten an.</p>
<figure>
<img src="http://facefun.de/plan.png" alt="Tätigkeitsgebiet ohne Anfahrtkosten">
</figure>
</section>
<section>
<hr id="kontakt">
<h2>Kontakt</h2>
<form id="formular" action="#" method="post">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text">
</div>
<div>
<label for="email">E-Mail</label>
<input id="email" name="email" type="email">
</div>
<div>
<label for="tel">Telefon</label>
<input id="tel" name="tel" type="tel">
</div>
<div>
<label for="nachricht">Nachricht</label>
<textarea id="nachricht" name="nachricht" rows="10"></textarea>
</div>
<div>
<button type="submit">Abschicken</button>
</div>
</form>
</section>
<section>
<hr id="bilder">
<h2>Bilder</h2>
<div>
<figure>
<img src="http://facefun.de/bilder/00.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/01.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/02.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/03.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/04.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/05.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/06.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/07.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/08.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/09.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/10.jpg" alt="Geschminktes Kind">
</figure>
<figure>
<img src="http://facefun.de/bilder/12.jpg" alt="Geschminktes Kind">
</figure>
</div>
</section>
</main>
<footer>
<p>E-Mail: info@facefun.de</p>
<p>Impressum</p>
<a href="http://facefun.de/">Originalseite: Facefun.de</a>
</footer>
</body>
Der gesamte Quelltext der Seite ist für das Forum wohl zu groß, der Hintergrund färbt sich unangenehm rot. Deshalb ein Link zu einer Testseite zum direkten ausprobieren. Der gesamte Quelltext einschließlich des CSS befindet sich im Dateiquelltext.
Ein paar Einstellungen müssen noch nachjustiert werden. Ältere Browser können für Flexbox eventuell noch ein paar Prefixe vertragen. Das ist aber nur etwas Fleißarbeit.
Grundsätzlich sollte die Seite aber in allen aktuellen relevanten Browsern responsive funktionieren.
Gruss
MrMurphy
Matthias Apsel