Hallo,
ich möchte in einem Reisebericht Randnotizen (waren mal Fußnoten)
einbauen, die rechts daneben angezeigt werden. Dies klappt mit mit
"float: right" ganz gut:
CSS
.fuss {
float: right;
width: 100px;
margin: 0px -180px 0px 0px;
position: relativ;
}Leider gibt es zwei Probleme, sie auch unter http://familie-ahlers.de/reiseberichte/suedafrika.php zu sehen sind:
1.) Sobald zwei Randnotizen zu dicht zusammen liegen, überlappen sie. Das soll natürlich nicht sein (Vgl. Randnotiz 2+3).
2.) Wenn sich auf gleicher Höhe ein Bild mit "float: right;" dann erscheinen die Randnotizen an der falschen Stelle, also nicht weit genug außen (vgl. Randnotiz 5 - erstes Bild).
Die Codeschnipsel (gekürzt) dazu sehen so aus:
CSS
body {
background-color:#DDDDDD;
width: 970px;
margin: 10 auto;
}
main {
background-color:white;
margin-left: 120px;
margin-right: 120px;
padding: 60px;
border-radius: 1em;
}
rechts {
float: right;
padding: 5px;
width: 100px;
}
.normal {
font-size: 110%;
margin-bottom: 10px;
text-align: justify;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.fuss {
background-color:white;
font-size: 70%;
float: right;
width: 100px;
margin: 0px -180px 0px 0px;
padding: 5px;
border-radius: 1em;
position: relativ;
}
bild.links {
float: left;
margin: 10px 10px 5px -50px;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-hyphens: auto;
font-size:80%;
text-align:justify;
}
bild.rechts {
float: right;
margin: 10px -50px 5px 10px;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-hyphens: auto;
font-size:80%;
text-align:justify;
}HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<!-- Kopf einfügen -->
</header>
<div id="rechts"></div>
<nav>
Navigation
</nav>
<main><article>
<h1>Südafrika</h1>
<h2>(2008)</h2>
<h3><a href="reisebericht_suedafrika_2008.pdf">Druckversion</a> als PDF-Dokument (4,8 MB)</h3>
<p class="tag">Prolog</p>
<p class="normal">Wenn die Schüler in unserem Unterricht müde werden, hat das dann mit der berühmten Schlafkrankheit zu tun, die durch die Tsetse-Fliege übertragen wird?<sup>[1]</sup><span class="fuss">[1] Eigentlich leidet man dabei zunächst unter Schlaflosigkeit, bevor sich dann ein Dämmerzustand einstellt. Das kann für meine Schüler also nur sehr bedingt gelten.</span> Diese Frage wollten wir gerne vor Ort klären, und so beschlossen Dirk und ich, diesmal nach Südafrika zu reisen. Dirk bekam zwar im letzten Moment etwas Muffensausen und täuschte eine Blutvergiftung vor, so dass die Hoffnung, an das Kap der selbigen zu gelangen, schwand, aber nach der Drohung meines Bruders, ihn zu verklagen, wenn er schlapp macht (Meine Geschwister hatten mir nämlich auf Anraten von Dirk einen Reiseführer geschenkt, der natürlich nicht nutzlos sein sollte.), ging es ihm gleich besser, und wir konnten doch aufbrechen.</p>
<p class="tag">13.7. (Sonntag)</p>
<p class="normal">Die Anreise nach Südafrika verlief erschreckend ereignislos.<SUP>[2]</SUP><SPAN class="fuss">[2] Ganz im Gegensatz zum Rückflug - aber dazu kommen wir später. Der geneigte Leser darf schon mal gespannt sein.</SPAN> Einziges Highlight war der Grenzbeamte, der uns Dirks in Deutschland gekauften Äpfel nicht importieren ließ, obwohl er selber feststellte, dass sie ursprünglich aus Südafrika stammten. Wir kamen noch gerade rechtzeitig an, um unser Auto in Empfang zu nehmen. Da das Auto an einer eher dunklen Stelle des Parkplatzes abgestellt war<SUP>[3]</SUP><SPAN class="fuss">[3] Genauer gesagt war der gesamte Parkplatz eine eher dunkle Stelle.</SPAN>, wurde bei den Schäden "Können wegen Dunkelheit nicht aufgenommen werden" vermerkt. Das gab uns ein bisschen Narrenfreiheit, die wir dringend brauchten. Ich setzte ich mich als Fahrer aus Gewohnheit links ins Auto, wo ich kurzzeitig das Lenkrad vermisste. Trotz des Linksverkehrs kam es während des gesamten Urlaubs aber nur zu wenigen Problemen, die dann durch den aufmerksamen Beifahrer behoben werden konnten.</p>
<p class="normal">Mit von der Partie war auch Dirks Navigationssystem, das uns - mit südafrikanischen Karten aufgepeppt - die Zielfindung oft immens vereinfachte. Kleinere Sprachprobleme wie "Nehmen Sie im Kreisverkehr die erste Ausfahrt rechts."<SUP>[4]</SUP><SPAN class="fuss">[4] Beim Linksverkehr bewegt man sich mit dem Uhrzeigersinn durch den Kreisel. Daher befinden sich alle Ausfahrten links.</SPAN> konnten wir selber entsprechend umschiffen.</p>
<p class="tag">14.7. (Montag)</P>
<p class="normal">Als erstes ging es nach Muizenberg an den Strand, um die schicken viktorianischen Strandhäuschen zu betrachten. Schließlich fuhren wir am Wasser weiter nach Süden.
<bild class="rechts" style="width: 422px">
<a href="01_viktorianische_strandhaeuser_in_muizenberg.jpg">
<img src="01_viktorianische_strandhaeuser_in_muizenberg_klein.jpg" style="width:100%" alt="Viktorianische Strandhäuser in Muizenberg." title="Viktorianische Strandhäuser in Muizenberg.">
</a>
<br>Idyllisch gelegene viktorianische Häuser am Strand von Muizenberg.
</bild>
Der im Reiseführer empfohlene malerische Fischereihafen von Kalk Bay ging komplett an uns vorbei, aber am Boulders Beach gab es das nächste Highlight: Hier watscheln jede Menge kleine Pinguine am Strand herum oder spielen im Wasser. Anschließend besuchten wir das Cape Nature Reserve, den südwestlichsten Punkt Afrikas. Das nette Fleckchen Erde glänzte durch tolle Landschaft, viele Tölpel<SUP>[5]</SUP><SPAN class="fuss">[5] Damit sind nicht die Touristen gemeint.</SPAN> und andere Vögel, Strauße und Affen, die sehr erfolgreich den Touristen das Essen weg nahmen. Die Bahn zum Leuchtturm war wegen Baumaßnahmen geschlossen, aber man konnte den Aussichtspunkt gut zu Fuß erreichen.</P>
<p class="normal">"Geschlossen" wurde zum Wort des Tages, was aber nicht daran lag, dass Montag war: Das Solole Game Reserve schien ganzjährig dicht, der Chapmans Peak Drive, eine besonders schöne
<bild class="links" style="width: 389px">
<a href="02_baboon.jpg">
<img src="02_baboon_klein.jpg" style="width:100%" alt="Baboon (Pavian) mit Kind." title="Baboon (Pavian) mit Kind.">
</a>
<br>Ob dieser Pavian wohl weiß, über welchem Schild er sitzt?
</bild>
Küstenstraße, wurde ausgebessert, und die Seilbahn zum Tafelberg wollte auch nicht fahren. Trotzdem genossen wir die teilweise atemberaubenden Aussichten, die sich uns auch so boten. Um es gleich vorweg zu sagen:<SUP>[6]</SUP><SPAN class="fuss">[6] Um es gleich vorweg zu sagen: Dieser Spruch wird noch öfter auftauchen.</SPAN> Es war eine große Ausnahme, dass etwas geschlossen war. Sonst ist uns das nur sehr selten passiert.</P>
</article></main>
<footer>
<!-- Fuß einfügen -->
</footer>
</body>
</html>Ich hoffe, dass ich mein Problem verdeutlichen konnte und dass ihr mir helfen könnt.
Gruß
Eicke