nicht angemeldet
Liebe Anne,
so sieht mein Dokument momentan aus (keinen Schock bekommen :)):
nö, damit hatte ich gerechnet. Schauen wir uns die Dinge etwas genauer an.
<script type="text/javascript" src="lightbox2/js/prototype.js"></script> <script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
Dagegen sage ich nichts. Du wirst wissen, was Du alles brauchst - und was das lightbox-Script braucht.
<style type="text/css"> <!-- body { background-color: #ffffff; }
Du möchtest CSS-Code lieber in eine externe Datei [ref:self812;css/formate/einbinden.htm#separat@title=auslagern]. Dadurch kannst Du alle Deine <style>-Elemente in einer externen Datei abhandeln und Dein HTML-Dokument seeeehr viel übersichtlicher werden lassen.
.style1 {
Es hat sich gezeigt, dass solche nichtssagenden Klassennamen auch nicht wirklich nützlich sind.
#rundrum { [...] a.menu {
Das sieht viel sinnvoller aus.
<link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
Bindet das Lightbox2-Script diese CSS-Datei nicht selbständig ein? Naja, hier siehst Du jedenfalls, wie Du Dein eigenes Stylesheet (Deine externe CSS-Datei) in Dein Dokument einbinden kannst.
<body>
<br> <br> <div id="a3">
Aua. Wozu diese <br />-Elemente? Willst Du einen Abstand? Das löst man mit CSS! Dazu treibst Du doch diesen ganzen Aufwand!
<table align=center width="650">
Wie eine Tabelle aussieht ist auch eine Frage des CSS, nicht aber von veralteten Attributen! Hier ist das aber völlig unerheblich, da Du diese Tabelle eh komplett entsorgen wirst.
<td><a class="menu" href="index.html">Home</a></td>
Wie man eine Navigation sinnvoll erstellt siehst Du hier: [ref:self812;css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten]
<td><a class="menu" href="mailto:name@domain.de">Kontakt</a></td>
Mitten in der Navi einen mailto-Link? Das ist böse! Da passiert bei mir nämlich nix! Und wenn doch, dann öffnet sich Outlook Express, welches bei mir nie benutzt wird und dessen Öffnen für mich nur störend und keinesfalls zielführend ist.
<td><a class="menu" href="links/index.htm">Impressum</a></td>
Verpacke Deinen Kontakt-Link hier ins Impressum. Da gehört er auch hin! Du darfst diesen Navi-Punkt auch "Kontakt/Impressum" nennen.
</table> <br><br> <table> </table>
??? (Schmeiß das raus!)
<table align=center width="650"> <tr> <td width="219"><a class="menu2" href="index.htm">Buchcover</a></td>
Auch das ist ein Fall wie oben. Arbeite das Kapitel einmal durch! Du wirst viel dabei lernen!
<table align=center border=0> <tr> <td><font color=#604c24>Die Kelten - 2009</font></td> </tr>
Oho! War das eben eine Überschrift? Die sieht aber normalerweise so aus:
<h1>Die Kelten - 2009</h1>
Die Tabelle entsorgst Du prompt. Sie hat hier layout-technische Funktion und wird im Grunde missbraucht. Tabellen sind ein Werkzeug zur Darstellung tabellarischer Daten. Zum Layouten benutzen wir ja CSS, da braucht es keine Tabelle (mehr).
<td> <a href="images2/angriff.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/angriff.jpg" /></a> <a href="images2/barden.jpg" rel="lightbox[roadtrip]" ><img src="thumbnails/barden.jpg" /></a>
Aha, hier kommt nun also die eigentliche Galerie. Da empfehle ich Dir, dass Du Dir den Quelltext meines Beispiels anschaust. Damit sollte Dein Code dann sinnvoller werden.
<table align=center> <tr> <td><font color=#604c24>Liontu - 2009-2010</font></td> </tr>
Ist das ein Copyright-Hinweis? Das sollte dann ein simpler Textabsatz sein:
<p>Liontu - 2009-2010</p>
Oder meintest Du schon wieder eine Überschrift...?
Vieles durcheinander, da ich momentan noch viel probiere.
Klar. Denke in Dokumentstruktur. Dann wird Dein Dokument wesentlich übersichtlicher.
Die Galerie habe ich nicht selbst erstellt. Das war ein fertige Baustein, den man sich im Netz kopieren konnte. Deshalb weiß ich auch nicht, wie ich da noch was verändern kann.
Also fangen wir an:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Die Kelten - Anne Bernhardi - Illustration, Grafik & Malerei</title>
<script type="text/javascript" src="lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="inhalt">
<h1>Die Kelten - 2009</h1>
<div class="galerie">
<p>
<a href="images2/angriff.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/angriff.jpg" alt="Angriff der Kelten" /></a>
ein Angriff der Kelten
</p>
<p>
<a href="images2/barden.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/barden.jpg" alt="keltische Barden" /></a>
keltische Barden
</p>
<p>
<a href="images2/boud.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/boud.jpg" alt="" /></a>
Boud
</p>
<p>
<a href="images2/charaganz.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/charaganz.jpg" alt="" /></a>
Chara ganz
</p>
<p>
<a href="images2/dorf.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/dorf.jpg" alt="keltisches Dorf" /></a>
ein keltisches Dorf
</p>
<p>
<a href="images2/waffen.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/waffen.jpg" alt="keltische Waffen" /></a>
keltische Waffen
</p>
<p>
<a href="images2/keltboss.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/keltboss.jpg" alt="keltischer Anführer" /></a>
ein keltischer Anführer
</p>
</div>
<h2>Liontu - 2009-2010</h2>
<div class="galerie">
<p><a href="images2/liontu.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/liontu.jpg" alt="" /></a></p>
<p><a href="images2/buch3-12.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-12.jpg" alt="" /></a></p>
<p><a href="images2/buch3-22.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-22.jpg" alt="" /></a></p>
<p><a href="images2/buch3-32.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-32.jpg" alt="" /></a></p>
<p><a href="images2/buch3-42.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-42.jpg" alt="" /></a></p>
<p><a href="images2/buch3-52.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-52.jpg" alt="" /></a></p>
<p><a href="images2/buch3-62.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-62.jpg" alt="" /></a></p>
<p><a href="images2/buch3-72.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-72.jpg" alt="" /></a></p>
<p><a href="images2/buch3-82.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/buch3-82.jpg" alt="" /></a></p>
<p><a href="images2/ianthewein.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/ianthewein.jpg" alt="" /></a></p>
<p><a href="images2/johannes.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/johannes.jpg" alt="" /></a></p>
<p><a href="images2/jacobi5.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/jacobi5.jpg" alt="" /></a></p>
<p><a href="images2/graalfs.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/graalfs.jpg" alt="" /></a></p>
<p><a href="images2/georgsitzend.jpg" rel="lightbox[roadtrip]"><img src="thumbnails/georgsitzend.jpg" alt="" /></a></p>
</div>
</div>
<div id="navi">
<h2>Navigation</h2>
<ul id="hauptmenue">
<li><a href="index.html">Home</a></li>
<li><a href="illustration.htm">Illustration</a></li>
<li><a href="links/index.htm">Malerei</a></li>
<li><a href="links/index.htm">Biografie</a></li>
<li><a href="links/index.htm">Kontakt/Impressum</a></li>
</ul>
<h2>weitere Seiten</h2>
<ul id="untermenue">
<li><a href="index.htm">Buchcover</a></li>
<li><a href="index.htm">Einzelprojekte</a></li>
<li><a href="index.htm" class="ausgewaehlt">Bücher</a></li>
</ul>
</div>
</body>
</html
Das passende CSS können wir hier auch gemeinsam erarbeiten, wenn Du Dich dazu überreden kannst Deine Dokumentstruktur auf meinen Vorschlag hin umzurüsten.
Liebe Grüße,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)