Matthias Apsel: Zwei Bilder (img) auf einer Zeile

Beitrag lesen

Om nah hoo pez nyeetz, Otto Wyss!

Es ist mir klar, dass ich momentan ein Mischmasch aus HTML4 und HTML5 verwende.

Das wäre nicht schlimm. Schlimm sind die inline-styles und die unnötigen Elemente.

Eine gute Arbeitsgrundlage wäre folgendes Markup:

<!DOCTYPE html>  
<html lang="de">  
<head>  
  <link rel="stylesheet" href="main.css">  
  <!-- eins reicht, das print kann in das normale mit rein -->  
  <meta charset="utf-8">  
  <meta name="author" ... >  
  <meta name="description" ...>  
  <meta name="keywords" ...>  
  <meta name="robots" ...>  
  <meta name="google-site-verification" ...>  
  <title>Mobo−Fahrschule - Motorboot−Fahrschule</title>  
</head>  
<body>  
  
<header>  
  <img src="images/title.jpg" width="690" height="90" alt="Motorboot−Fahrschule" title="Motorboot−Fahrschule: So schön kann Motorbootfahren auf dem Zürichsee und Obersee sein.">  
</header>  
  
<nav>  
  <ul>  
    <li>Start</li>  
    <li><a href="boot.php">Schulboot</a></li>  
    <li><a href="tarife.php">Tarife</a></li>  
    <li><a href="kontakt.php">Kontakt</a></li>  
    <li><a href="lehrbuch.php">Lehrbuch</a></li>  
    <li><a href="anlegestellen.php">Fotos</a></li>  
  </ul>  
</nav>  
  
<header>  
  <img src="images/logo01.jpg" alt="Mobo−Fahrschule" title="Mobo−Fahrschule"> <!--Das sollte vielleicht ein Hintergrundbild werden -->  
  <h2>Mobo−Fahrschule - Ihre Motorboot−Fahrschule</h2>  
</header>  
  
<article>  
  <img src="images/wyssotto01.png" alt="Fahrlehrer" title="Fahrlehrer: Otto Wyss">  
  <p>Wir sind eine junge <b>Motorboot−Fahrschule</b> mit erfahrenem Fahrlehrer, der nach den neuesten Erkennt&shy;nissen unterrichtet. Alle Manöver werden genau vorgezeigt, erklärt und anschliessend eingehend geübt. Das <a href='boot.php'>Schulboot</a> der Fahrschule ist ein kleines, wendiges und angenehm zu steuerndes Kabinenboot.</p>  
  <p>Zur Unterstützung und Vertiefung des Lernerfolgs wird das Lehrbuch &quot;<a href='lehrbuch.php'>Motorboot&shy;fahren - Lehrbuch für die Praxis</a>&quot; eingesetzt, in dem alle Übungsteile detailliert beschrieben sind. Das Lehrbuch ist noch nicht erhältlich.</p>  
  <p>Im weiteren wird für jedermann zum Ausdrucken &quot;<a href='anlegestellen.php'>Fotos der Zu- und Wegfahrts&shy;wege</a>&quot; zu den Hafen und anderen Anlegestellen in ver&shy;schiedenen Prüfungsgebieten zur Verfügung gestellt. Auch dies ist momentan noch nicht fertig.</p>  
</article>  
  
<p class="aktion"><b>Einführungsaktion 2 für 1</b>, gültig bis <b>30. April 2013</b>. Zwei Lektionen buchen, eine bezahlen. Anmeldung via Web siehe <a href='kontakt.php'>Kontakt</a>.</p>  
  
<article>  
  <p>Die <b>Mobo−Fahrschule</b> ist auf dem <a href='karte01.php'>Zürichsee / Obersee</a> beheimatet in den Übungsgebieten mit den folgenden Treffpunkten (die mit <img src='images/star01.png' class='icon_star' alt='*'> bezeichneten Treffpunkte werden bevorzugt):</p>  
  
  <img src="images/zuerichsee-zh.jpg" alt="Zürichsee ZH" title="Zürichsee: Prüfungsgebiet Oberrieden" usemap="#Zürichsee-ZH">  
    <map name="Zürichsee-ZH">  
      ...  
    </map>  
	<img src="images/zuerichsee-sg.jpg" alt="Zürichsee SG" title="Obersee: Kanton St.Gallen" usemap="#Zürichsee-SG">  
    <map name="Zürichsee-SG">  
      ...  
    </map>  
	<img src="images/zuerichsee-sz.jpg" alt="Zürichsee SZ" title="Obersee: Kanton Schwyz" usemap="#Zürichsee-SZ">  
    <map name="Zürichsee-SZ">  
      ...  
    </map>  
  
	<ul>  
	<li>Zürichsee - Kanton Zürich (Prüfungsgebiet Oberrieden)  
		<ul>  
			<li><a href='karte43.php'>Hafen Thalwil Farbsteig</a></li>  
			<li><a href='karte44.php'>Steg AWEL-Gebäude Oberrieden</a></li>  
			<li><a href='karte45.php'>Seepo Oberrieden</a>(nur Prüfungsfahrten)</li>  
			<li><a href='karte47.php'>Hafen Horgen</a>(Landungsstelle ZSG)<img src="images/star01.png" <!-- als Hintergrund-->></li>  
			<li><a href='karte49.php'>Hafen Herrliberg</a></li>  
		</ul>  
	</li>  
	<li>Obersee - Kanton St.Gallen  
		<ul>  
			<li><a href='karte34.php'>Stützpunkt Schmerikon</a><img src="images/star01.png" class="icon_star" alt="*"></li>  
		</ul>  
	</li>  
	<li>Obersee - Kanton Schwyz  
		<ul>  
			<li><a href='karte38.php'>Schifffahrtsinspektorat Pfäffikon</a></li>  
			<li><a href='karte39.php'>Hensa Werft Altendorf</a><img src="images/star01.png" class="icon_star" alt="*"></li>  
		</ul>  
	</li>  
	</ul>  
</article>  
  
<footer>  
     &copy; 2013 <b>Mobo−Fahrschule GmbH</b> <a href="impressum.php">Impressum</a>  
</footer>  
  
<script>  
  ga  
</script>  
  
</body>  
</html>

Matthias

--
1/z ist kein Blatt Papier.