Bildershow - absoluter Anfänger Einstellungen

[engelchen301]

Hallo Zusammen,

ich bin ein absoluter Homepageanfänger! Ich bin jetzt dabei mir eine zu erstellen und ich möchte kleine Vorschaubilder auf meiner Page, die, wenn man draufklickt, groß werden. Das hab ich auch schon hingefummelt:
<a href="Foto.jpg"><img src="Foto.jpg" width="200" height="150" alt="Vorschau" border="1">

Jetzt möchte ich aber gerne, daß, wenn man das große Bild auf hat, man mit einem "Weiter" Knopf zum nächsten großen Bild wechseln kann. Damit die Besucher meiner Page dann nicht immer auf zurück müssen und dann das nächste Vorschaubild anklicken müssen. Drück ich mich verständlich aus?

Ich hoffe jemand kann mir helfen, aber bitte kein zu schweres Fachchinesisch, wie gesagt ich bin absoluter Neuling auf dem Gebiet

Danke im Voraus

[harlequin]

moin!

Eigentlich ist es ganz einfach, allerdings sollte man vorher die Bilder vernünftig benennen und am besten in einem separaten Ordner ablegen.

Also:
Du hast als Beispiel zehn Bilder (foto01.jpg - foto10.jpg), die im Verzeichnis /bilder/ liegen.
Auf einer Seite hast du die kleinen Vorschaubilder, vielleicht/am besten in einer Tabelle, dies ist aber Geschmacksache. Jedes dieser Vorschaubilder ist verlinkt, aber nicht auf das große Bild dahinter selbst, sondern auf eine eigene HTML Seite, die 1. das Bild und 2. eine 'vor/zurück' Navigation enthält.

Dein Homepage Verzeichnis könnte dann so aussehen:

/bilder/foto01.jpg
/bilder/foto02.jpg
/bilder/foto03.jpg
/bilder/foto04.jpg
/bilder/foto01.html <- Diese Dateien enthalten die gleichnamigen Bilder und Verweise (Links) zu den nachfolgenden Seiten.
/bilder/foto02.html
/bilder/foto03.html
/bilder/foto04.html
/fotos.html <- Diese Datei liegt zum Beispiel im Hauptverzeichnis und enthält die Vorschaubilder mit den Links auf die HTML Dateien, die ich oben angeführt habe

Das sollte es schon gewesen sein. Es wäre eine sehr vereinfachte Variante, ausschließlich mit HTML und für ein paar Bilder durchaus leicht pflegbar.
Es gibt noch einige andere Möglichkeiten, manche Grafikprogramme bieten zum Beispiel 'Bildergalerien per Klick' an, aber ich persönlich bevorzuge die handgeschriebene Variante - obwohl ich so etwas heutzutage eher mit PHP lösen würde, aber du hast nach einer ganz einfachen Lösung gefragt und PHP wäre fortgeschritten...

[engelchen301]

Das scheint wirklich einfach zu sein. Ich hab es zumindest verstanden . Ich versuch das direkt mal aus.
Tausend Dank!

[jomal]

Das scheint wirklich einfach zu sein. Ich hab es zumindest verstanden . Ich versuch das direkt mal aus.
Tausend Dank!

Ich hab sowas mit JavaScript gemacht, ich weiß, verpönt bei Vielen.

<a href="../bilder/siegfr1.html"
onMouseover="Bildwechsel(0,Highlight0)"
onMouseout="Bildwechsel(0,Normal0)" target="_mitte">
<img src="../bilder/siegfr1.jpg" border="0" alt="click=größer">
</a>

In dem Moment, wo Du mit der Maus rüber fährst, poppt das große Bild auf.
Und wenn Du da noch nen Link zum nächsten Bild drunterlegst, sollte das eigentlich klappen.
Bin mir aber nicht ganz sicher, da ja nur ein Bild und kein HTML aufgerufen wird.

jomal

[Thomas]

<a href="../bilder/siegfr1.html"
onMouseover="Bildwechsel(0,Highlight0)"
onMouseout="Bildwechsel(0,Normal0)" target="_mitte">
<img src="../bilder/siegfr1.jpg" border="0" alt="click=größer">
</a>

Dieses Posting solltest du vielleicht nochmal überarbeiten - ohne die Beschreibung der Funktion Bildwechsel() bringt das nicht viel und selbst wenn, ist doch der einzige Effekt des JS-Codes, dass beim Überfahren der Thumbnail ausgetauscht wird, oder?

[engelchen301]

ich hab ne Seite im Netz entdeckt, da ist das richtig schön gemacht.

www.coverband-handsup.de
wenn ihr mal auf "Fotos" geht und dann am besten auf "Pfarrfest 2007", und dann mal ein Foto von weiter unten öffnen (oben scheint das irgendwie kaputt zu sein).
Das find ich richtig schön gemacht, kann mir einer erklären wie das geht oder ist das zu kompliziert?

[Thomas]

Das find ich richtig schön gemacht, kann mir einer erklären wie das geht oder ist das zu kompliziert?

Das ist zumindest handwerklich gut gemacht, da es auch ohne JavaScript funktioniert. Auf die Schnelle konnte ich nicht herausfinden, wie es genau gemacht wird (vielleicht mit Flash?) - von daher bin ich auch daran interessiert, falls jemand erkennen kann, wie das gemacht wird.

Scheint wohl alles über JavaScript zu laufen - und um deine Frage zu beantworten: Es ist kompliziert .

[edit: nochmal genauer hingeschaut]

Der Beitrag wurde von Thomas bearbeitet: 29.06.2007 - 9:07

[harlequin]

moin!

Um das zu kompletieren: Es kommt auf der Seite "Lightbox" zum Einsatz. Ein fertiges Javascript, das relativ einfach einzubauen ist.
Beschreibung ist in englisch, aber auch 'relativ einfach' gehalten. Das Skript funktioniert tatsächlich auf den 'normalen' Browsern. Hat nur anderthalb Nachteile:
1. Wenn ein Benutzer Javascript deaktiviert hat, oder eine 'Internet Security' - Lösung das Javascript fälschlicherweise als böse betrachtet war es das, keine schönen, sich auffaltenden Bilder mehr. Es wird dann nur noch das Bild angezeigt und der Benutzer kommt ausschließlich per 'zurück' Knopf seines Browsers wieder zu den Thumbnails.

1.5 Wenn man noch nicht so viel Erfahrung mit dem Thema hat, kann das einbauen doch komplizierter sein und ein wenig Fummelarbeit und ggf. Frust nach sich ziehen.

Die Vorteile sieht man aber, es ist schick! Und wenn man einmal das Prinzip verstanden hat, muss man nur noch die Seite(n) mit den Vorschaubildern pflegen.

Fazit: Geschmacksache.

Nachtrag: Hier gibt es eine neuere Version von dem Skript, welche auch das Blättern zwischen mehreren Bildern ermöglicht. Einbau ein klein wenig komplexer, aber eigentlich eine schöne Sache.

have fun!
Lars

[Peter Gedamke]

Das find ich richtig schön gemacht, kann mir einer erklären wie das geht oder ist das zu kompliziert?

Das ist zumindest handwerklich gut gemacht, da es auch ohne JavaScript funktioniert. Auf die Schnelle konnte ich nicht herausfinden, wie es genau gemacht wird (vielleicht mit Flash?) - von daher bin ich auch daran interessiert, falls jemand erkennen kann, wie das gemacht wird.

Scheint wohl alles über JavaScript zu laufen - und um deine Frage zu beantworten: Es ist kompliziert .

[edit: nochmal genauer hingeschaut]

Mit Flash ist schon OK
Hier kann man mal eine Diashow von mir ansehen, die mit einem kleinen kostenlosen Flash-Programm erstellt wurde.
Die Adresse des Anbieters wird (leider) zum Schluss mit eingeblendet... aber na ja, soooooo stöhrend ist's nicht

Diashow - Menschen in Berlin

[Peter Gedamke]

Eine normale Foto-Ansicht mit kleinen Vorschaubildern (lt. der eigentlichen Anfrage wenn ich mich recht besinne) könnte auch so aussehen:

http://www.pg-private-line.de/privacy-fotoalbum1/index.html

Peter

[Peter Gedamke]

PS: letzte Auswahl wurde erstellt mit dem (Super) Betrachter- und Manager-Programm
XnView http://www.xnview.com/xnview/de_home.html
lässt sich aber auch fast mit jedem guten Foto-Bearbeitungsprogramm wie Ulead PhotoImact etc. mehr oder minder 'automatisch' gestalten

[Thomas]

1. Wenn ein Benutzer Javascript deaktiviert hat, oder eine 'Internet Security' - Lösung das Javascript fälschlicherweise als böse betrachtet war es das, keine schönen, sich auffaltenden Bilder mehr. Es wird dann nur noch das Bild angezeigt und der Benutzer kommt ausschließlich per 'zurück' Knopf seines Browsers wieder zu den Thumbnails.

Dann will ich auch noch was beisteuern: Wenn man zusätzlich noch PHP zur Verfügung hat, könnte man noch ein einfaches Skript basteln, das ein Bild und eine Navigation mit Vor, Zurück und Übersicht anzeigt. Statt Verweisen auf die Bilder fügt man dann einfach Verweise auf das Skript ein, mit dem Namen des Bildes als Argument. Oder man verwendet die ursprünglich angedachte Minimallösung als Backup für javaScriptfreie Zonen.

Und als praktischer Hinweis an die/den TE: Erstmal die Lösung aus der ersten Antwort umsetzen, wenn das geht, kannst du die Seite mit dem zusätzlichen Einsatz von Lightbox weiter tunen.

[Peter Gedamke]

schön und gut wer eben auch php schreiben kann
Ich kann's leider nicht

[jomal]

<a href="../bilder/siegfr1.html"
onMouseover="Bildwechsel(0,Highlight0)"
onMouseout="Bildwechsel(0,Normal0)" target="_mitte">
<img src="../bilder/siegfr1.jpg" border="0" alt="click=größer">
</a>

Dieses Posting solltest du vielleicht nochmal überarbeiten - ohne die Beschreibung der Funktion Bildwechsel() bringt das nicht viel und selbst wenn, ist doch der einzige Effekt des JS-Codes, dass beim Überfahren der Thumbnail ausgetauscht wird, oder?

Oh, Du hast mal wieder Recht, wie eigentlich immer.
Hab nur im Moment keine Homepage, den gesamten Code reinzustellen ist ein bißchen viel. Habe eben auch keine Zeit dazu.
Ich hab vergessen, dass da ja ein Anfänger sitzt, sorry.

Aber zum Ablauf: da steht nur eine Schaltfläche mit Anschrift und so, fährst Du mit der Maus drüber erscheint ein Bild der Firma und klickst Du drauf,
dann kommt das größere Bild.
Muß mal sehen, ob ich das bis morgen hinkriege als Mini Version, die ich hierreinpacken kann.
jomal

[Thomas]

Oh, Du hast mal wieder Recht, wie eigentlich immer.

Du Schmeichler - aber ich lass das mal so stehen, Dankeschön .

Aber zum Ablauf: da steht nur eine Schaltfläche mit Anschrift und so, fährst Du mit der Maus drüber erscheint ein Bild der Firma und klickst Du drauf, dann kommt das größere Bild.

Kann mich dunkel daran erinnern, dass wir das Thema schon einmal hatten. Ist aber für einen Anfänger definitiv zu viel. Wie schon oben geschrieben, am Besten fängt man mit der von Lars beschriebenen, einfachen Lösung an und erweitert diese dann ggf. sukzessive (z. B. mit Lightbox und/oder PHP).

[jomal]

Eine normale Foto-Ansicht mit kleinen Vorschaubildern (lt. der eigentlichen Anfrage wenn ich mich recht besinne) könnte auch so aussehen:

http://www.pg-private-line.de/privacy-fotoalbum1/index.html

Peter

Oh, mir gefällt das gut. Die Realisierung ebenso wie die Bilder.

jomal

[engelchen301]

Hallo Ihr Lieben,

ich hab es geschaftt und das hab ich nur Euch zu verdanken. Vielen Dank!!!
ich hab es jetzt (nach längerem Fummeln) mit lightbox hingekriegt. Ich hatte zuerst
Antwort 1 (Verweis auf eine Seite anstatt auf ein Bild) umgesetzt, das war ein echt super
Tip, Danke nochmal. Hätte ich das mit lightbox nicht auf die Reihe gekriegt, wär das
eine super alternative. Und danke auch, das ihr das mit lightbox rausgekriegt habt und für
die ganzen tollen Tips. Ihr seid echt super!

LG
engelchen301

hier mal zum angucken:
www.bratwursttreffen.de
ich bin noch am basteln, deshalb ist nur die eine Seite fertig -> fotos/bwt/2004

[stwie]

Ich möchte hier zwar keine Werbung für Drittprogramme machen, aber Fotoalben erstelle ich mit JALBUM (http://jalbum.net)
Der installierbare Skin "Classic Aligned 2" generiert XHTML 1.0 strict und CSS code
Die Möglichkeiten des programms (open source) lassen Selbermachen völlig unnötig erscheinen, zumal ich gleichzeitig die Bilder konvertieren, in der größe verändern, mit Wasserzeichen versehen, Exif-Daten darstrellen kann etc.

Und zu guter Letzt: Der Code lässt sich nachträglich mit Phase 5 verändern und umgestalten.

[jomal]

Hallo Ihr Lieben,

ich hab es geschaftt und das hab ich nur Euch zu verdanken. Vielen Dank!!!
ich hab es jetzt (nach längerem Fummeln) mit lightbox hingekriegt. Ich hatte zuerst
Antwort 1 (Verweis auf eine Seite anstatt auf ein Bild) umgesetzt, das war ein echt super
Tip, Danke nochmal. Hätte ich das mit lightbox nicht auf die Reihe gekriegt, wär das
eine super alternative. Und danke auch, das ihr das mit lightbox rausgekriegt habt und für
die ganzen tollen Tips. Ihr seid echt super!

LG
engelchen301

hier mal zum angucken:
www.bratwursttreffen.de
ich bin noch am basteln, deshalb ist nur die eine Seite fertig -> fotos/bwt/2004

Funktioniert bei mir nicht.
Sieht aus, als wäre die Fotos nicht hochgeladen.
Habe FF2.0.4

[Peter Gedamke]

Eine normale Foto-Ansicht mit kleinen Vorschaubildern (lt. der eigentlichen Anfrage wenn ich mich recht besinne) könnte auch so aussehen:

http://www.pg-private-line.de/privacy-fotoalbum1/index.html

Peter

Oh, mir gefällt das gut. Die Realisierung ebenso wie die Bilder.

jomal

Danke dir :-)
In dieser Form war es nur eine von mehreren Varianten, die sich mit dem genannten Programm anfertigen lassen

[Peter Gedamke]

Hallo Ihr Lieben,

ich hab es geschaftt und das hab ich nur Euch zu verdanken. Vielen Dank!!!
ich hab es jetzt (nach längerem Fummeln) mit lightbox hingekriegt. Ich hatte zuerst
Antwort 1 (Verweis auf eine Seite anstatt auf ein Bild) umgesetzt, das war ein echt super
Tip, Danke nochmal. Hätte ich das mit lightbox nicht auf die Reihe gekriegt, wär das
eine super alternative. Und danke auch, das ihr das mit lightbox rausgekriegt habt und für
die ganzen tollen Tips. Ihr seid echt super!

LG
engelchen301

hier mal zum angucken:
www.bratwursttreffen.de
ich bin noch am basteln, deshalb ist nur die eine Seite fertig -> fotos/bwt/2004

Funktioniert bei mir nicht.
Sieht aus, als wäre die Fotos nicht hochgeladen.
Habe FF2.0.4

hmmm, also ich kann auch ausser den ganz normal eingestellten Dateien nüscht von einer Bildershow entdecken

[Peter Gedamke]

Hallo Ihr Lieben,

ich hab es geschaftt und das hab ich nur Euch zu verdanken. Vielen Dank!!!
ich hab es jetzt (nach längerem Fummeln) mit lightbox hingekriegt. Ich hatte zuerst
Antwort 1 (Verweis auf eine Seite anstatt auf ein Bild) umgesetzt, das war ein echt super
Tip, Danke nochmal. Hätte ich das mit lightbox nicht auf die Reihe gekriegt, wär das
eine super alternative. Und danke auch, das ihr das mit lightbox rausgekriegt habt und für
die ganzen tollen Tips. Ihr seid echt super!

LG
engelchen301

hier mal zum angucken:
www.bratwursttreffen.de
ich bin noch am basteln, deshalb ist nur die eine Seite fertig -> fotos/bwt/2004

Funktioniert bei mir nicht.
Sieht aus, als wäre die Fotos nicht hochgeladen.
Habe FF2.0.4

hmmm, also ich kann auch ausser den ganz normal eingestellten Dateien nüscht von einer Bildershow entdecken

[Thomas]

hier mal zum angucken:
www.bratwursttreffen.de

Also bei mir geht es (FF 2.0.0.4, IE 7.0.5730.11). Hier noch ein direkter Link zur Bildseite 2007 (jomal und Peter, vielleicht probiert ihr es auf der falschen Seite?).

Hinweis an die TE: In der Datei sollte als erstes der DOCTYPE stehen. Bei dir steht da " design & layout by Andrea -->". Das würde ich rausnehmen und irgendwo weiter unten als Kommentar oder passendes META-Tag im HEAD-Bereich einfügen.

[jomal]

hier mal zum angucken:
www.bratwursttreffen.de

Also bei mir geht es (FF 2.0.0.4, IE 7.0.5730.11). Hier noch ein direkter Link zur Bildseite 2007 (jomal und Peter, vielleicht probiert ihr es auf der falschen Seite?).

Hinweis an die TE: In der Datei sollte als erstes der DOCTYPE stehen. Bei dir steht da " design & layout by Andrea -->". Das würde ich rausnehmen und irgendwo weiter unten als Kommentar oder passendes META-Tag im HEAD-Bereich einfügen.

Ja, mit dem Link klappts.
Hab mir den Sourcecode nicht angesehen, aber das führende Kommentarzeichen scheint zu fehlen, es sei denn, das ist beabsichtigt.
Gefällt mir soweit, aber der Next-Button stört mich an der Stelle. Und ein Back-Button fehlt auch noch, aber das ist sicher nur Feinarbeit.

Ach, da es zwei Links gibt, ich würde den falschen so ändern, dass er nur noch nen Link auf die aktuelle Seite enthält.

jomal

[Peter Gedamke]

hatte ich wohl :-)
aber wow - da haben ja bereits die Thumb's Grössen von durchschnittlich 45-50 kb
Sonst aber doch gut gemacht! Richtig ist aber, dass "design & layout by Andrea -->" nüscht über dem Doctype zu suchen hat. Gehört in die Metas, evtl. auch in dei Beschreibung etc

[Thomas]

Gefällt mir soweit, aber der Next-Button stört mich an der Stelle. Und ein Back-Button fehlt auch noch, aber das ist sicher nur Feinarbeit.

Klickfläche für das nächste Bild ist auf der kompletten rechten Seite des angezeigten Bildes (außer beim letzten), Klickfläche für das vorherige auf der kompletten linken Seite des Bildes (außer beim ersten). Die Buttons erscheinen nur, wenn die Maus über dem Bild steht, das stört mich eigentlich nicht so sehr. Außerdem funktionieren auch die Cursortasten recht und links (für vor und zurück) und die Escape-Taste (für zurück zur Übersicht).

Ach, da es zwei Links gibt, ich würde den falschen so ändern, dass er nur noch nen Link auf die aktuelle Seite enthält.

Welche Links meinst du? Hier im Forum gibts den auf die Hauptseite, dort musst du auf Fotos, dann auf BWT und dann auf Bratwursttreffen 2004 klicken (so wie es die TE auch geschrieben hat: www.bratwursttreffen.de -> fotos/bwt/2004) und den von mir, der direkt auf die Unterseite von 2007 verlinkt. Funktionieren tuen beide. Oder meinst du etwas anderes?

[edit: fehlendes p ergänzt]

Der Beitrag wurde von Thomas bearbeitet: 30.06.2007 - 14:11

[Thomas]

aber wow - da haben ja bereits die Thumb's Grössen von durchschnittlich 45-50 kb

Das sind auch keine Thumbnails, das sind die großen Bilder, kleinskaliert durch den Browser. Da muss wohl von der TE nochmal nachgearbeitet werden - oder es ist Absicht, damit die Anzeige der Bilder im Großformat schneller abläuft (was ich aber eher nicht glaube)?

@engelchen301: Für die Vorschau solltest du kleinere Versionen der Bilder erzeugen. Du hast sonst z. B. Datenmengen von über einem Megabyte bei der 2007er Seite, was allgemeinhin als zuviel angesehen wird.

[Thomas]

Und noch ein kleiner Hinweis am Rande: Dateinamen mit Leerzeichen funktionieren zwar meistens, aber das muss nicht unbedingt immer der Fall sein. Deshalb würde ich grundsätzlich empfehlen, auf Leerzeichen in Dateinamen zu verzichten und sie ggf. durch einen Unterstrich ('_') zu ersetzen.
Alternativ sollte man zumindest bei der Referenzierung das Leerzeichen durch "%20" ersetzen, also z. B.

HTML

<a href="Familie%20Molly.html"><img src="Familie%20Molly.gif" onMouseOver="this.src='Familie%20Molly1.gif'" onMouseOut="this.src='Familie%20Molly.gif'" border="0" alt="Familie Molly">

statt

HTML

<a href="Familie Molly.html"><img src="Familie Molly.gif" onMouseOver="this.src='Familie Molly1.gif'" onMouseOut="this.src='Familie Molly.gif'" border="0" alt="Familie Molly">

Und was mir beim Kopieren des Quelltextes noch aufgefallen ist: Da sind viele böse Macken im HTML-Code (Tabellen ohne <tr> und <td>, Anker ohne schließendes </a>, Absätze ohne schließendes </p>)! Nichts, was ein aktueller Browser nicht dennoch irgendwie ansatzweise korrekt interpretieren würde - aber eben auch nicht mal ansatzweise korrektes HTML .

[edit: Beispiel deutlicher herausgearbeitet und noch einen weiteren Problempunkt hinzugefügt]

Der Beitrag wurde von Thomas bearbeitet: 30.06.2007 - 14:37

[Peter Gedamke]

um es genau zu sagen, enthält diese Seite alleine 45 Warnungen:

Zeile 1 Zeichen 9 - Warnung: Unmaskiertes "&" sollte als "&amp;" geschrieben werden
Zeile 3 Zeichen 1 - Warnung: Fehlende <!DOCTYPE> Deklaration
Zeile 3 Zeichen 1 - Warnung: plain text ist in <head> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: [34]<!DOCTYPE> ist nur am Dateianfang erlaubt
Zeile 4 Zeichen 1 - Warnung: Unzulässiges <html> löschen
Zeile 3 Zeichen 1 - Warnung: <head> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <title> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <link> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <link> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: </head> ist in <body> Elementen nicht erlaubt
Zeile 23 Zeichen 1 - Warnung: Unzulässiges <body> löschen
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 39 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 40 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 41 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 42 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 43 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 46 Zeichen 9 - Warnung: Unzulässiges </div> löschen
Zeile 47 Zeichen 9 - Warnung: Unzulässiges </div> löschen
Zeile 48 Zeichen 24 - Warnung: Fehlendes </font> vor <p>
Zeile 50 Zeichen 19 - Warnung: Erforderliches <font> einfügen
Zeile 89 Zeichen 95 - Warnung: Unzulässiges </a> löschen
Zeile 89 Zeichen 99 - Warnung: Unzulässiges </a> löschen
Zeile 139 Zeichen 57 - Warnung: replacing ungültige numerische Notation in 149
Zeile 156 Zeichen 1 - Warnung: Fehlendes </script>
Zeile 40 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 42 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 42 Zeichen 48 - Warnung: URI in <img> enthält unzulässige Zeichen
Zeile 43 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 44 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 147 Zeichen 1 - Warnung: Bei <script> das Attribut type hinzufügen
Zeile 156 Zeichen 1 - Warnung: Bei <script> das Attribut type hinzufügen

0 Fehler / 45 Warnungen

[harlequin]

moin!

Nun macht doch mal langsam... Tipps und Hinweise sind zwar schön und eure durchweg richtig, aber die Art und Weise kann schon etwas... abschrecken...

Ich persönlich war damals froh, wenn überhaupt was auf einer Seite, die ich selbst gezimmert hab, angezeigt wurde...

Schöne Wochenende!
Lars

[Peter Gedamke]

hallöchen Lars,

sicher wollen wir es nicht übertreiben, und schon keinesfalls jemanden abschrecken :-)
aber ich denke, es sollte bei derartigen Anfragen dann auch schon geschrieben werden, wo auf den 'untersuchten' Seiten ggf. Fehler liegen. Ich wäre jedenfalls in meinen Anfangsphasen sehr froh darüber gewesen.

Scheinbar liegt unserem User/in keine lokale Kontrollmöglichkeit vor - dann würde ich empfehlen, die Seiten hierüber einmal durchchecken zu lassen:

Validierungsdienste:

http://validator.de.selfhtml.org/
http://jigsaw.w3.org/css-validator/

Schönes WE

[jomal]

moin!

Nun macht doch mal langsam... Tipps und Hinweise sind zwar schön und eure durchweg richtig, aber die Art und Weise kann schon etwas... abschrecken...

Ich persönlich war damals froh, wenn überhaupt was auf einer Seite, die ich selbst gezimmert hab, angezeigt wurde...

Schöne Wochenende!
Lars

Hallo, harlekin,
die Seite läuft ja soweit, und das ist gut.
Aber ich persönlich würde mir die Tipps der Anderen ausdrucken und versuchen, nach und nach den Code zu bearbeiten.
Das mit den Thumbs sehe ich auch so, mach die doch mit nem einfachen Programm wie IrfanView kleiner.
Wer nämlich mit nem Modem surft, der verliert sofort das Interesse.
Hat noch nicht jeder DSL.
Und halt uns auf dem Laufenden, mich interessiert es jedenfalls, wie es weitergeht.

Zum Glück sind die modernen Browser sehr fehlertolerant, aber ich persönlich finds toll, wenn weder Fehler noch Warnungen ausgegeben werden.
Leider kenne ich keinen Trace-Debugger, das wäre noch ne tolle Sache, kenn ich von VBS, PDF, C usw.
Dann wäre das ändern noch leichter.

So, viel Erfolg weiterhin
jomal

[engelchen301]

Das hat man davon, wenn man Jemanden um Rat fragt, der sich auskennt: man kriegt direkt alle seine Fehler unter die Naser gerieben (kleiner Scherz)

Ich werd mich heut abend gleich mal an die Schadensbegrenzung machen. Danke für die Tips. Mal sehen, was ich hingefummelt kriege.

LG

[Thomas]

Ich werd mich heut abend gleich mal an die Schadensbegrenzung machen. Danke für die Tips.

Viel Erfolg dabei - und wenn du dann wieder Fehler unter die Nase gerieben haben möchtest, einfach wieder hier melden .

Ansonsten: Zum Prüfen des HTML-Codes einfach unter http://validator.w3.org/ die URL der zu prüfenden Seite angeben. Die Stylesheets kannst du unter http://jigsaw.w3.org/css-validator/ prüfen lassen. Und unter http://www.websiteoptimization.com/service...lyze/index.html kannst du den Seitenaufbau an sich prüfen lassen. In allen Fällen gilt: Bei Framesets müssen die einzelnen Frames jeder für sich geprüft werden.

[Auge]

Ich werd mich heut abend gleich mal an die Schadensbegrenzung machen.

Falscher Ansatz, Schadensbehebung anstatt Schadensbegrenzung!

Fang erstmal mit den nicht geschlossenen Tags und einem Doctype (Empfehlung für's erste: 'HTML 4.01 transitional') an. Mit dem Doctype klappt die Validation (der Link dahin wurde hier ja schon mehrfach gepostet) und mit den bereits von dir geschlossenen Tags wird dich das Ergebnis der Validation nicht gar zu sehr erschrecken.

Da sind viele böse Macken im HTML-Code (... Absätze ohne schließendes </p>)!

Nur mal als Hinweis (und um die Verwirrung zu komplettieren ): Wenn HTML und nicht XHTML verwendet wird, ist ein nicht explizit geschlossener Absatz zulässig, da er automatisch vom nächsten Blockelement geschlossen wird. Gleiches gilt z.B. für Überschriften, Listenpunkte und auch für das Formularelement <option>. Für <li> und <option> gilt, dass ihnen nur ein weiteres gleichgestelltes Element oder das schließende Tag des Elternelements (<ul>, <ol>, <select>) folgen darf.

Für Überschriften kann ich jedoch sagen, dass zumindest der MSIE 5 damit nicht zurechtkommt und nach einer nichtgeschlossenen Überschrift alle weiteren Textelemente in der Größe und Farbe der Überschrift darstellt.

Fazit: Auch wenn es also erlaubt ist, bestimmte Elemente offen zu notieren, so ist es doch keineswegs empfehlenswert. Schließe alle Tags, Punkt.
Zumal, wenn irgendwann ein Projekt ansteht, das in XHTML realisiert werden soll, gibt es eine Sache weniger, bei der man sich umgewöhnen muss.

Tschö, Auge

[jomal]

Fazit: Auch wenn es also erlaubt ist, bestimmte Elemente offen zu notieren, so ist es doch keineswegs empfehlenswert. Schließe alle Tags, Punkt.
Zumal, wenn irgendwann ein Projekt ansteht, das in XHTML realisiert werden soll, gibt es eine Sache weniger, bei der man sich umgewöhnen muss.

Tschö, Auge

Hab ich mir eigentlich bei html auch angewöhnt, alle Tags zu schließen.
ist einfach sauberer, hab noch nie Probleme damit gehabt.
Und vor allen Dingen übersichtlicher.
Vor allen Dingen zukunftssicher und leichter zu tracen.

[Peter Gedamke]

Fazit: Auch wenn es also erlaubt ist, bestimmte Elemente offen zu notieren, so ist es doch keineswegs empfehlenswert. Schließe alle Tags, Punkt.
Zumal, wenn irgendwann ein Projekt ansteht, das in XHTML realisiert werden soll, gibt es eine Sache weniger, bei der man sich umgewöhnen muss.

Tschö, Auge

Hab ich mir eigentlich bei html auch angewöhnt, alle Tags zu schließen.
ist einfach sauberer, hab noch nie Probleme damit gehabt.
Und vor allen Dingen übersichtlicher.
Vor allen Dingen zukunftssicher und leichter zu tracen.

sollte man denken
aber gebe zum Beispiel mal <li> mit oder ohne Endtag ein, und vergleiche mal die Ergebnisse in der IE- sowie Firefox-Anzeige.

[Peter Gedamke]

Ich werd mich heut abend gleich mal an die Schadensbegrenzung machen. Danke für die Tips.

Viel Erfolg dabei - und wenn du dann wieder Fehler unter die Nase gerieben haben möchtest, einfach wieder hier melden .

Ansonsten: Zum Prüfen des HTML-Codes einfach unter http://validator.w3.org/ die URL der zu prüfenden Seite angeben. Die Stylesheets kannst du unter http://jigsaw.w3.org/css-validator/ prüfen lassen. Und unter http://www.websiteoptimization.com/service...lyze/index.html kannst du den Seitenaufbau an sich prüfen lassen. In allen Fällen gilt: Bei Framesets müssen die einzelnen Frames jeder für sich geprüft werden.

glaube ich schrieb es hier schon?
Firefoxnutzer können HTML auch durch entsprechende Add-on offline durchführen
http://blog.patrickkempf.de/archives/2005/...validator-tidy/

[Google Bot]