Meine erste Homepage (Draft)

Ich würde mich freuen, wenn ihr meine Homepage carola-kristine.bplaced.net besuchen würdet und konstruktive Kritik übt, die ich dann in meiner weiteren Bearbeitung berücksichtigen würde.

Dazu muss ich sagen, dass es meine erste Homepage-Erstellung überhaupt ist und dafür das Yaml-Framework als Basis verwende.

Noch herrscht ein wenig Chaos in meiner html/js-Strukturierung und habe deswegen auch noch Redundanzen drin. Außerdem mache ich sicherlich viele Anfängerfehler und kämpfe zudem mit den unterschiedlichen Browsern:

Gleich auf der Hauptseite z.B. kriege ich es partout nicht hin, dass die grafischen Direktlinks sauber mit ihren Unterschriften unter den Grafiken angezeigt werden. Mein neuer Firefox macht das zwar, aber alle anderen nicht. Na ja, das gehört sicher zu den Anfängerproblemen dazu.

Ich würde mich jedenfalls über ein Feedback sehr freuen, vielen Dank dafür.

Wundert mich nicht, daß die Seite nicht so angezeigt wird, wie du es möchtest: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.carola-kristine.bplaced.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Die Tabelle im Header solltest du raus werfen. Immerhin enthält sie keinen tabellarischen Inhalt und die gleiche Darstellung kannst du auch anders und einfacher erreichen. Zudem solltest du die Hierarchie beachten, also h1, h2, h3 etc.

Daß die Bildunterschriften sich nicht unter den Bildern befinden liegt schlicht und einfach daran, daß du den Bildern die Klasse “float_left” gegeben hast. Und was passiert passiert, wenn du die Bilder floatest? Richtig, der Text fließt um sie herum :wink:

Die Katzen-Galerie sieht auch nicht so aus, wie sie vermutlich sollte. Würde mehr Sinn machen, wenn der entsprechende Text bei den Bildern, eventuell drüber und nicht daneben stehen würde. Gleiches bei Natur.

Der Text auf der Startseite ist irgendwie unpassend und lieblos und würde bestenfalls in einen Menüpunkt “über mich” oder so passen. Wenn du nur eine Webseite erstellst, um deine HTML-Kenntnisse zu verbessern, hätte es gereicht, das lokal bzw. unter XAMPP zu machen :wink:

Hi Mohyra,

danke für Dein schnelles Feedback! Dazu möchte ich folgendes anmerken:

[ul]

  1. Der Validator-Output wird mir auf jeden Fall weiterhelfen (und ich werde meine geänderten Pages selbst durchjagen).

  2. Die Tabelle im Header habe ich nur, weil ich es nicht geschafft habe, das Layout Grafik linksbündig - Text zentriert (horizontal und vertikal) - Grafik rechtsbündig hinzubekommen.

  3. float_left brauche ich (dachte ich zumindest), damit die Vorschaugrafiken selbst nebeneinander angeordnet werden und nicht untereinander.

Ich verstehe nicht, was Du mit daneben meinst. Die Texte erscheinen doch oben in der Mitte (zumindest habe ich es beim Firefox, IE und Opera so gesehen).

  1. Mit der Startseite hast Du natürlich komplett recht. Natürlich ist es nicht nur mein Ziel, etwas HTML etc. zu lernen (was in der Tat ins ‘Über mich’ gehört), sondern ich möchte auch die Fotos zeigen, dann das Welli-Zimmer usw. Später sollen noch ein paar Features dazukommen.[/ul]

Danke nochmal, fürs erste habe ich dann genug zu tun :wink:

Ich weiß nicht, bei welcher Version von Opera du das getestet hast, aber bei der aktuellsten (12.0) ist der Text links von der Tabelle mit den Bildern. Dort kannst du eigentlich auch die Tabelle weg lassen und mit Divs arbeiten. Dann sollte es auch keine Probleme mit der Anzeige geben. Wie gesagt, sind Tabellen für tabellarischen Inhalt und sie bereiten oft nur mehr Probleme, als daß sie helfen.

Zum float auf der Startseite: Den hast du ohnehin unter p.icaption-left. Was macht dort eigentlich das JS?

Für den Header erstellst du dir am einfachsten eine Grafik, die beide Bilder enthält und legst ein Div mit der Überschrift drüber, die du dann mit margin ausrichstest.

Hi Mohyra,

also folgendes:

Ich habe ebenfalls mit Opera 12.0 unter WinXP 32Bit getestet und da erscheint der Text rechts von den Bildern! Wie kommt das denn?

Ich werde Deinen Rat beherzigen und die Tabelle weglassen und hoffe, dass ich die Vorschaugrafiken mit Captions darunter und die Grafiken nebeneinander hinbekomme…

js baut eine html-Seite auf zum Blättern durch die entsprechende Fotogalerie. Wenn im Browser js deaktiviert ist, kommt man da gar nicht hin. Das möchte ich so, da ich es selbst nervig findet, auf Seiten geleitet zu werden, die nur mit js Sinn machen und bei meiner Version kommt stattdessen eine Meldung und es wird keine ‘leere’ Seite geöffnet.
Das icaption so wurde vom Framework Yaml programmiert und die Beispiele dort funktionieren einwandfrei. Es muss also an mir liegen.

[quote]Für den Header erstellst du dir am einfachsten eine Grafik, die beide Bilder enthält und legst ein Div mit der Überschrift drüber, die du dann mit margin ausrichstest.
[/quote]
Okay, für feste Header geht das ja, aber trotzdem muss ich dann für jede Seite mit eine neue Grafik zusammenbasteln. Das wollte ich eigentlich vermeiden.

Zudem wird der Header beim Durchblättern der Fotoserien dynamisch mit dem alt-Text des aktuellen Fotos angezeigt, spätestens dann geht’s so nicht mehr. Evtl. muss ich mir da Alternativen überlegen. Ist es denn üblich die Überschriften der Sites komplett als Grafik zu machen (ich bin da absoluter newbie)?

Ich danke Dir für Deine ausführliche Antwort. Damit hilfst Du mir sehr weiter. :slight_smile:

Erstelle ein div und verwende float:

[code]
#header {
background:white;
padding: 2px;
clear: both;
height: 40px;

}

#header .right {
float: right;
height: 40px;
}

#header .left {
float: left;
height: 40px;
}

#header h1 {
margin:0;
padding:0;
text-align: center;
}

Überschrift

[/code]

So genau hatte ich mir den Header nicht angeschaut, deswegen der Lösungsvorschlag. Der Vorschlag von progandy ist dann in dem Fall der bessere und wäre mein nächster Vorschlag gewesen.

Der Sinn des JS erschließt sich mir immernoch nicht, da man die ganzen Funktionen auch ohne aufbauen kann, was ich in dem Fall ohnehin sinnvoller finde.

Ich weiß nicht, ob du meine Erklärung zu den Bildlinks auf der Startseite verstanden hast. Du hast einmal einen float in p.icaption-left. Dadurch stehen die Bilder, so wie du es möchtest, nebeneinander. Zusätzlich hast du einen Float bei den Bildern (Klasse “float_left”). Der lässt den Text um die Bilder fließen, d. h. der Text steht neben den Bildern. Hättest du mehr Text, würde er über die gesamte Bildhöhe daneben und erst danach drunter stehen, eben darum fließen. Klar soweit? Entfernst du die Klasse “float_left” kommt nur noch der Float aus p.icaption-left zum Tragen und es sieht so aus, wie du möchtest.

Falls du das Tool noch nicht hast, empfehle ich dir Firebug für FF und daß du dich noch ein wenig mehr in das Thema einliest, etwa unter http://www.css4you.de/

Ich finde die Seite ist schön übersichtlich :slight_smile:

@progandy:

Vielen Dank für Deine Erklärungen und den Beispielcode. Das werde ich gerne berücksichtigen und testen.

@thestory:
Danke für Dein positives Feedback.

@Mohyra:

[ul]

  1. Die Tabellen habe ich alle entfernt, nur der Header wird noch so wie es progandy beschrieben hat bearbeitet.

Ich würde eigentlich auch gerne auf js verzichten, aber ich habe nichts gefunden, womit ich dann eine Fotoserie durchblättern kann analog wie ich es gelöst habe. Vllt. reichen meine Kenntnisse nur noch nicht aus :wink: ?

  1. Eine kleine Frage hätte ich aber noch an Dich: Da ich nun bei den Vorschaugrafiken auf die Tabellen verzichte ist mir aufgefallen, dass Opera keinen Zwischenraum vertikal macht so wie der Firefox und IE. Getestet habe ich auf Firefox 13.0, IE 8 und Opera 12.0. Kannst Du mir da weiterhelfen? Auf der Katzen- und Naturseite sind diese Vorschaugrafiken zu sehen, also
    z.B auf carola-kristine.bplaced.net/Natur.html

  2. Das mit dem Float habe ich ausprobiert und bin zu demselben Schluss gekommen wie Du es geschrieben hast. Da aber diese icaption noch andere Effekte verursachen, wenn der Text zu lang wird, habe ich beschlossen, dies ganz wegzulassen und den Text separat anzuordnen.

  3. Danke für Deinen Tip mit dem Firebug . Das Tool habe ich vor kurzem eingebunden. Der findet einiges aber halt keine XHTML-Fehler. Und danke auch für den css-Link :slight_smile: . Da muss ich mich in der Tat noch einlesen.
    [/ul]

Also, dass der Text links angezeigt wird, hat schonmal nichts mit der Tabelle zu tun. Eventuell wäre es hilfreich, wie es aussehen sollte. Vielleicht stimmt das ja so, aber wie gesagt, für mich sieht das irgendwie nicht richtig aus.

Den Abstand zwischen den Bildern bekommst du durch margin. So wies aussieht, sind da Leerzeichen nach den Bildern in den a-Tags. Die solltest du entfernen. Und dann hast du ja um den ganzen Bereich das schöne Div mit der ID col3_content. Also machst du im CSS eine Anweisung mit mit img#col3_content und gibst der ein margin, mit sagen wir 5px.

Eventuell wäre in dem Bereich auch eine lightbox gut. Dann würde sich nicht immer eine neue Seite öffnen und man müßte nicht mühsam zurück klicken.

Frag mal Google nach “CSS Galerie”, da findets einiges und vielleicht ist da was dabei als Alternative zum JS. Vor allem, weil durch das Javascript die Ladezeit teilweise arg lang ist.

Noch ein tolles Tool für FF ist der Web-Developer. Da hast dann auch die Möglichkeit, die Seite validieren zu lassen.

Süße Miezen übrigens :smiley:

@Mohyra:

[ul]1. [quote]Also, dass der Text links angezeigt wird, hat schonmal nichts mit der Tabelle zu tun. Eventuell wäre es hilfreich, wie es aussehen sollte. Vielleicht stimmt das ja so, aber wie gesagt, für mich sieht das irgendwie nicht richtig aus.[/quote]

Bei meinen Browsern wird der Text nicht links sondern rechts angezeigt. Aber ich habe die icaptions weggelassen. Nun funktioniert es so wie ich es möchte (zumindest auf der Einstiegsseite).

Beim IE und Firefox funktioniert es ja, also sind die magins da. Nur bei Opera geht es nicht, das bedeutet, dass es bei Opera anders funktioniert, oder?

Habe es mir mal angeschaut, aber die Lightbox macht ja nur die Vorschaugrafik plus Anzeige der Grafik beim Anklicken. DAS habe ich sowieso ohne js gemacht. Es geht ja ums Durchblättern einer kompletten Fotoserie mit vor/zurück Button und dynamischen Füllen der html-Seite aus einem Array von Bildern heraus. Und dafür habe ich js eingesetzt und ich wüsste nicht wie man es dies ohne js lösen könnte.

  1. Den Webdeveloper habe ich ebenfalls drin, aber der validiert scheinbar anders, da ich hierbei immer alles ohne Fehler habe während der validator im Web sehr viele Fehler feststellt. Ich vermute, dass der Webdeveloper nicht auf xhtml-Syntax prüft. Aber danke für den Hinweis.
    [/ul]

Vielen Dank für Deine wieder schön ausführliche Antwort. Das hilft mit sehr weiter und meine Motivation mich mehr mit html/css/js/ zu beschäftigen wächst immer mehr und ich lerne echt dazu und danke fürs Kompliment an die Miezen, werde ich an sie mit einer Krauleinheit weiterreichen :smiley:

Zu 2. Daß beim IE und FF ein Rand angezeigt wird, wird am browsereigenen Stylesheet zu liegen, aber im CSS ist für die Bilder keine Anweisung mit margin enthalten. Folglich wird auch kein Abstand im Opera angezeigt. Deswegen wirst du das einfügen müssen, wenn es überall gleich aussehen soll.

Zu 3. Die Lightbox meinte ich für die Galerie, wenn man auf Natur oder Katzen klickt. Wenn man da ein Bild anklickt, öffnet sich ja eine neue Seite. Da wäre eine Lightbox schön und komfortabel.
Deine Wünsche bzgl. der Galerie auf der Startseite würden sich mit PHP erfüllen. Da kann ich dir nicht weiterhelfen, aber da könntest du mal hier im PHP-Bereich fragen, bzw. Google hat da bestimmt auch Tipps.

Zu 4. Also bei mir geht der Webdeveloper auch auf die Validator-Seiten von W3C. Kommt wohl auf die Einstellungen an.

Freut mich, daß ich dir helfen kann. Das sind halt so Sachen, die lernt man nicht von heut auf morgen. Merk ich auch immer wieder.

Hi Mohyra,
schön von Dir wieder gute Kritik und Tips zu lesen. Ja, das mit den margins gucke ich mir an. Ich hätte auch gleich selbst nachschauen können, aber ich dachte Opera sei die Ausnahme und nicht umgekehrt, wieder was dazugelernt :slight_smile:

Die Lightbox schaue ich mich nochmal an. Zuerst hatte es mir nicht gefallen, aber da ich in der Tat noch nicht weiß, wie ich ein direkt angeklicktes Bild mit einem selbst erstellten Layout verknüpfen kann, wird es mich ebenfalls weiterhelfen. Seltsamerweise bekomme ich auf meinem PC immer Fehlermeldungen beim Grafik-Fenster und immer dieselbe egal ob aus IE, Opera oder Firefox. Irgendwas scheint in den Eingeweiden der Browserwelt nicht in Ordnung zu sein, oder ich bediene sie nicht richtg :smiley:
php habe ich zwar auch noch nicht gemacht, aber schwer kann es ja auch nicht sein. Mal schauen!

Ach so, ich habe zwar den Webdeveloper, aber ich bin auf meinem Entwicklungs-PC nicht mit dem Internet verbunden, sondern lade die Files von einem Uralt-Rechner von vor über 10 Jahren hoch. Auf diesem kann ich leider keine Updates für Browser etc. machen. Ich werde meine WebFiles wohl direkt validieren lassen müssen, aber das geht ja auch.

Nochmal ein Dankeschön für Deine ausführlichen Feedbacks :slight_smile: .

Hallo carola-kristine

Schau dir mal dieses Galerie Script an:
http://www.twospy.com/galleriffic/

Hier hast du eine Demo Galerie:
http://www.twospy.com/galleriffic/demo/index.html

Vielleicht ist das eher etwas für dich.

Gruß
Camou !coffee

An sich sieht es ja gar nicht so schlecht aus. :slight_smile:
Mir fällt spontan auf, dass du auf der Homepage links die rote Info-Box ganz schön nah an der Überschrift platziert hast. Hier mal etwas mit padding/margin probieren ne bessere Optik rein zu bekommen. :sun:

@Camou:

Hi, danke für Deinen Tip mit den Links, das habe ich mir angeschaut, aber mir gefällt das nicht ganz so gut, da es (vllt. notwendigerweise) auch auf javascript beruht. Ich suche nach einer Lösung, wie ich durch eine Fotogalerie blättern kann, wenn javascript disabled ist oder nicht unterstützt wird. Gut an der Gallerie finde ich die Bildinformationen, die ich bei meinen Bildern rausgenommen hatte und dass sich kein neues Fenster öffnet :slight_smile: .
Aber ich bin ja noch in der Lernphase ganz am Anfang, mache ein bißchen html, css und halt minimal js. Grüße carola-kristine


@joeyel:

Danke für Deine positive Kritik. Die Positionierung für die bessere Optik werde ich bei meiner Überarbeitung berücksichtigen. Gilt ja evtl. für mehrere Stellen in den Seiten, nicht wahr :wink: ?

na ja,
könntest ja einfach was mit flash nehmen :ps:

oder mal hier nachsehen:

www.gipspferd.de/css/experimente/galerie/galerie06/

denke so in der art stellst du dir das vor (ohne neue seite öffnen)

im quelltext solltest du alles nötige erkennen können.

@wollerosekauf: gewöhn dir doch bitte mal an, die links ordentlich zu setzen :unamused:

@wollerosekauf:

Hi, danke für Deinen Tip. Flash kommt für mich nicht in Frage, aber die Galerie habe ich mir angeschaut und das hilft mir für die Parameterübergabe weiter, merci !

@Mohyra: Was ist denn an dem Link von wollerosekauf falsch? Bei mir funzt er oder was meinst Du mit ordentlich?

:p
gemeint war nur das ich beim link immer die punkte darin auslasse - ist dann nicht so einfach klickbar…^^

flash war auch mehr als joke gedacht, daher auch der :ps: dahinter
:smiley: