Clan Page - Design und Code (HTML, CSS, PHP) bewerten

Community Showcase & Websitecheck
1

Hi Leute,

Ich habe mich seit kurzem mal wieder hingesetzt ein neues Projekt zu starten. Da mein Clan bis dato nur schlecht gecodete und viel zu ueberfuellte Templates benutzt hat, habe ich das jetzt mal in die Hand genommen und eine neue Clan Page gecodet, die auf das Wesentliche beschrankt ist.

Wie ihr sehen werdet ist der Inhalt noch nicht zu 100% vollstaendig, ich bitte aber trotzdem einmal um die Bewertung der Semantik, des Designs, etc.

Ich habe auch selber schon ein paar Probleme fest gestellt, weiss aber nicht, wie ich diese loesen soll. Ich fange also mal mit meinen Fragen an:

  1. Der Validator zeigt mir mehrere Fehler an, die ich nicht finde, oder gar nicht verstehe. Kann es sein, dass es in xHTML strict untersagt ist das Element innerhalb eines

    Elements zu nutzen? Denn ansonsten wuesste ich nicht, was an meinen Links im FLiesstext verkehrt sein sollte.
    Sollte es untersagt sein, wie zeichne ich das ganze dann richtig aus?

  2. Auf der Team Member Seite bin ich mir in Sachen Semantik nicht zu 100% sicher. Ich habe das ganze jetzt einmal als

      ausgezeichnet, da ich ja die Member unseres Teams aufliste. 5 verschiedene Divs waeren an dieser Stelle evtl. aber auch nicht verkehrt. Hoffe also da auf euren Rat :wink:

    • Denkt ihr, dass es semantisch vertretbar ist, Grafiken, die nur zur Zierde dienen, ueber eine id oder class in einem leeren Div zu plazieren? Semantisch sicherlich nicht gut, aber mir ist kein besserer Tag eingefallen. Gleiches gilt bei der css Eigenschaft „clear“. Auch diese habe ich in ein leeres Div gepackt.

    • Meine naechste Frage betrifft CSS. Wie ihr seht, hat sowohl der Footer, als auch der Header einen Hintergrund, der eine Breite von 100% hat. Die eigentliche Headergrafik ist also im Grunde nur transparent schwarz. Wenn ich jetzt meinen Viewport soweit verkleinere, dass ein horizontaler Scrollbalken entsteht und ich dann anfange nach rechts zu scrollen, wird der blaue Hintergrund nicht mehr mitangezeigt. Ich kann mir nur erklaeren, dass das irgendwie im ZUsammenhang mit der 100% Breite steht. Trotzdem ist dieser Effekt nicht erwuenscht.

    • Viel schlimmer ist das ganze aber, wenn ich mir den Footer bei verkleinertem Viewport anschaue. Die Footer Liste verreisst es komplett, so dass diese sich gar nicht mehr an ihre Platz befindet. Ich wuerde gerne, dass diese Liste genau so an ihrem Platz bleibt und durch scrollen komplett gelesen werden kann. Genau, wie das z.B. bei der Navigation unter dem Header ist. Da springt ja auch nichts aus der Reihe.
      Ich hoffe also jemand kann da mal ueber mein CSS schauen, denn gerade bei diesem position:relative; getrickse bin ich mir unsicher, ob das der beste Weg nach Rom ist.

    • Mir ist im Uebrigen bewusst, dass ich eine feste Breite gewaehlt habe, und somit bei Schriftvergroesserung die Navigationsschrift aus den Boxen springt. Werde das noch in em nachbessern.
      Den FLiesstext habe ich mit Absicht in px gelassen. Meine Browser Schriftgroesse ist 16. Einzig und allein aus dem Grund, weil Google sonst so gut wie unlesbar und viel zu klein ist. Nehme ich jetzt allerdings 1em als Schriftgroesse, dann wirkt mein FLiesstext einfach riesig. Somit wuerde ich meine Brwsereinstellung normalerweise auf 12px runtersetzen, aber Google vermiest mir das doch sehr.
      Sollte ich em als EInheit also verwenden kann ich meine eigene Seite nicht mehr geniessen und wenn es mir so geht, dann wird das sicherlich auch auf andere zutreffen.
      Also Efchen, ich warte auf deine Ueberzeugungsarbeit, dass ich doch noch umgestimmt werde. Denn im Normalfall waere mir em auch lieber.

    • Zum Abschluss habe ich noch eine Frage zum Gaestebuch. Ich wuerde gerne die Moeglichkeit bieten, Smileys in den Kommentarbereich einzufuegen. Man soll also aus einer Smileypalette das jeweilige Bild per Klick in seinen Text einfuegen koennen. PHP soll dann irgendwie diese Zeichenfolge autoamatisch jedem Bild zuweisen und in der Datenbank dann als Bild speichern, so dass der Smiley letztendlich angezeigt wird. Vll. hat ja da jemand ein schoenes Tutorial an der Hand, vor allem weil ich mich mit JS und den dazu noetigen PHP Befehlen nicht auskenne :smiley:
      → gelöst

Abschliessend hoffe ich natuerlich, dass ihr auch auf das Design noch etwas eingeht.

Link:
http://hokage.bplaced.net/cs_website/

Ich danke euch also schon einmal fuer eure Muehen :smiley:

gruesse hokage

2

…dürfte ich höflichst die Adresse der besagten HP erfragen ?

3

Super^^
Manchmal kann ich echt nur ueber mich selber lachen :wink:

Also der Link:

Proud 2 Be - Home

gruesse hokage

4

Viele überflüssige divs. Z.B. gleich am Anfang, Du fügst ein leeres div ein, um ein Hintergrundbild zu setzen. Wozu? Warum kriegt nicht das

das Bild? Später hast Du ein div eingefügt, um zu clearen (wg. float vermute ich). Warum? Warum cleart nicht das darauffolgende Menü?
Weiter hab ich dann nicht geguckt.

Kann es sein, dass es in xHTML strict untersagt ist das Element innerhalb eines

Elements zu nutzen?

Nein.

Denn ansonsten wuesste ich nicht, was an meinen Links im FLiesstext verkehrt sein sollte.

Ich vermute das fehlende Leerzeichen im zweiten Link?

Auf der Team Member Seite bin ich mir in Sachen Semantik nicht zu 100% sicher.

Passt doch. EIndeutig eine Liste. Du sagst es jaselber, Du listest die Members auf.
Ich verstehe nur nicht die Semantische Bedeutung Deiner Klassennamen, die auf „_l“ oder „_r“ enden. Ich könnte schwören, das sind Layoutangaben, die - auch in Klassen/ID-Namen - nicht im HTML-Code vorkommen sollten, wenn Du Inhalt und Layout sauber trennst.

  1. Denkt ihr, dass es semantisch vertretbar ist, Grafiken, die nur zur Zierde dienen, ueber eine id oder class in einem leeren Div zu plazieren? Semantisch sicherlich nicht gut, aber mir ist kein besserer Tag eingefallen.

Semantisch perfekt. Weil besagt ja, dass hier ein Bild mit Content eingebunden wird. Zierde gehört aber ins CSS.

Gleiches gilt bei der css Eigenschaft „clear“. Auch diese habe ich in ein leeres Div gepackt.

Hin und wieder braucht man sowas, ja. Aber eben nicht immer (s.o.).

Wenn ich jetzt meinen Viewport soweit verkleinere, dass ein horizontaler Scrollbalken entsteht und ich dann anfange nach rechts zu scrollen, wird der blaue Hintergrund nicht mehr mitangezeigt.

Bin ich grad zu faul dazu. Mit Firebug kommt man da sicher gut dahinter.
Der Footer sieht bei mir dann genauso aus.

gerade bei diesem position:relative; getrickse bin ich mir unsicher, ob das der beste Weg nach Rom ist.

Meistens brauchst Du es nicht. Aber das ist jetzt mal eine allgemeine Aussage.

Den FLiesstext habe ich mit Absicht in px gelassen. Meine Browser Schriftgroesse ist 16.

Schade. Denn Deine Schriftgröße ist für mich nicht relevant.

Einzig und allein aus dem Grund, weil Google sonst so gut wie unlesbar und viel zu klein ist. Nehme ich jetzt allerdings 1em als Schriftgroesse, dann wirkt mein FLiesstext einfach riesig.

Aber nur bei Dir. Bei anderen wäre es dann ideal.

Somit wuerde ich meine Brwsereinstellung normalerweise auf 12px runtersetzen, aber Google vermiest mir das doch sehr.

Und deswegen müssen andere unter Deiner Site leiden? Weil DU ein Problem mit einer anderen Website hast?
Dann stell die Schriftgröße für Google separat ein. Firefox kann das.

Sollte ich em als EInheit also verwenden kann ich meine eigene Seite nicht mehr geniessen

Das ist nicht wahr. Tust Du es nicht, können sicher mehr Leute als Du einer die Site nicht genießen. Wer ist da wohl ausschlaggebender?

Also Efchen, ich warte auf deine Ueberzeugungsarbeit

:slight_smile:

Abschliessend hoffe ich natuerlich, dass ihr auch auf das Design noch etwas eingeht.

Sieht ganz angenehm aus, aber wenn mich da Soldaten mit Waffen begrüßen und mir sagen, ich soll meinen Aufenthalt genießen - das geht gar nicht. Da fühl ich mich eher vera*eppelt.

5

Geht mir genauso! Ich war ziemlich geschockt!

6

Ich habe anfangs ausprobiert die Grafik dem h1 Element zugeben. Das ist im Endeffekt aber daran gescheitert, dass die Hintergrundgrafik 100% Breit ist und ein repeat: x achse bekommen hat. Das eigentliche img Bild in dem Header hat aber eine feste Breite und das hat sich nicht so gut vertragen. Daher das Extraelement. Ich werde mich aber nocheinmal dransetzen und versuchen die Grafik in das h1 Element einzufügen. Vielleicht kannst du mir ja auch sagen, wie das einfach machen könnte, dann erspare ich mir langes rumprobieren :wink:
Mit dem clearen hast du recht. Ich werde meinen kompletten Quelltext überfliegen und schauen, wo ich das clearen bei dem nachfolgenden Element einfügen kann.

Das war es, danke dir :wink:

Dann bin ich da ja schon einmal beruhigt. Zu den Klassennamen: das r steht für rechts und das l steht für links. Ich weiß einfach nicht, wie ich da einen besseren Namen vergeben soll, weil diese Klasse nur diese weißen Boxen erstellt, die den Inhalt umrahmen. Und daher halt „box_inhalt_r“ und „box_inhalt_l“. Wenn du einen besseren Klassennamen hast, den ich universell für jeden Inhalt benutzen kann, dann teile ihn mir bitte mit :smiley:

So hatte ich mir das auch überlegt. Vll. kannst du dir, solltest du etwas mehr Zeit haben, das ganze dann mal mit

und dem anderen Hintergrundbild anschauen. Beschrieben habe ich das Problem ja weiter oben.

Wenn dich ein Energieschock übermannt, wäre ich dir sehr dankbar, wenn du dir das mal anschaust. Eilt aber nicht :wink:
Ich nehme an Firebug ist ein Addon für Firefox? Na ja werde damit mal etwas rumprobieren und schauen wie das funktioniert.

Auch da hoffe ich, dass du wenn du die Muße hast einmal über mein HTML in Kombination mit CSS schaust. Wie das Design sein soll, siehst du ja im Moment. Wenn ich das so auch ohne position:relative; umsetzen kann, dann um so besser :smiley:
Ich habe da lange dran „getüfftelt“ und bin zu keiner anderen Lösung bekommen. Bin in CSS jetzt aber auch kein Monster.

Alles klar :wink: Ich werde sowohl den Fließtext, als auch die Navigationstexte in em auszeichnen. Wenn ich dann noch herausfinde, wie ich Firefox dazu bringe für Google eine andere Schriftgröße zu verwenden, dann wäre alles perfekt. Denn normal habe ich mit Größe 12 keine Probleme. Nur in Google wird dann halt die Überschrift 12px groß und der beschreibende Text viel kleiner. Aber du sagst ja schon, dass es geht. Jetzt wäre noch das „wie“ interessant, aber womöglich bekomme ich das auch selber raus :wink:

*edit: Ok ich habe jetzt gesucht, gegoogelt, etc., aber ich bin bis her auf nichts Brauchbares gestoßen. Ich hoffe, du kannst mir sagen, wie ich das in meinem Firefox 3.6 einstelle.

[/QUOTE]

Na ja, das Problem ist hier wohl, dass wir ein Clan sind, der CounterStrike:source spielt. Sollte dir das nichts sagen: Das ist ein Egoshooter. Von daher beschrenkt sich im Endeffekt die Zielgruppe unserer Seite auf sog. Gleichgesinnte, die auch CounterStrike spielen.
Daher denke ich, passt das Bild ganz gut zum Thema. Dass es für andere abschreckend wird, kann ich verstehen. Ich werde den Text wohl auch nochmal ändern :wink: Denn der passt echt nicht so gut haha
Wenn man schon so ein Bild hat, sollte der Text wenigstens passen und nicht so formell sein.

Ich danke dir also mal wieder für deine ausführliche Bewertung! Die Arbeit kann jetzt also beginnen :smiley:

grüße hokage

*edit: Keiner der sich das mal intensiv anschauen kann?

7

Einfach auf der Google-Seite die gewünschte Schriftgröße einstellen. Firefox speichert diese Einstellungen ab Version 3 für jede Website separat.

8

Ich nehme an Firebug ist ein Addon für Firefox?

Da liegts du richtig. Ist ein sehr cooles Addon um CSS in Echtzeit abzuändern. Desweiteren kann man damit Javascript deuggen und noch viele andere Dinge. Würde das Addon jedem Web-Developer ans Herz legen :slight_smile: Auch praktisch ist die Web Developer Toolbar.

Da das HTML schon besprochen wurde Melde ich mich zu den anderen Sachen.
Was das Design deiner Seite angeht, so Gefallen mir die Grafiken ganz gut. jedoch fände ich einen Dunkelblauen Hintergrund ansprechender, da du Blau ja auch schon benutzt hast. Aber Das ist Geschmackssache. Der CT/T-Turm mit den Sprechblasen ist auch eine nette Idee.
Was du noch beachten musst, ist das nicht jeder Firefox verwendet und somit die Runden Ecken sieht. Falls dies nur ein Zusatz-Feature ist und es so sein soll, habe ich nichts gesagt :slight_smile:

9

Ich mag dafür zu dumm sein, aber wenn ich meine Clanpage gehe und dort in Firefox unter Einstellungen auf Schriftgröße 12 gehe, dann wird die Google Seite auch in dieser Schriftgröße angezeigt. Ich habe übrigens Mac OS X und nutze Firefox 3.6.
Ich wäre dir also sehr verbunden mir gaaanz ausfühlich zu beschreiben, wie ich es mache, denn offensichtlich bekomme ich das nicht hin haha

Danke dir :wink:

@Gilles:

Mit Firebug werde ich mich mal auseinander setzen. Na ja und die runden Ecken (scheiß Wort^^) sehe ich als Feature an. Wer mit nem veralteten Browser surft, brauch auch keine runden Ecken sehen :wink:

Danke für die Rückmeldungen :smiley:

grüße

10

Nicht in den Einstellungen. Nur über Strg-+/-
Was Du in den Einstellungen einstellst, gilt für alle Sites, weil das die Default-Einstellung ist.

11

Ach so. Aber ist das nicht das normale „zoomen“? Denn so verkleinert und vergroessert sich ja die ganze Seite. Ich wuerde aber gerne nur die Schriftgroesse aendern, denn auch, wenn ich meine Seite dann mit dieser Technik verkleinere, bleibt ja das unschoene Seiten- Schriftgroessenverhaeltnis.

Danke dir fuer deine Muehen :wink:

@Gilles:
Ich hatte vergessen auf dein Designvorschlag einzugehen :wink: Ich habe mit der Zeit herausgefunden, dass hellere Websites (freundlicherer Hintergrund), angenehmer fuer das AUge sind. Daher wuerde ich gerne an dem Weissen Haupthintergrund festhalten. Trotzdem, danke fuer die Idee :smiley:

gruesse

12

Ansicht → Zoom → Nur Text zoomen