Website "professioneller" gestalten

[paraGTI]

Zuerst: Erstelle valides (X)HTML.
Achte auch auf semantisch sinnvolle Umsetzung deiner Seite (auch wenn ich mir sicher bin, dass das schon bemängelt wurde) Eine Navigation ist eine Liste und keine Ansammlung von (noch dazu absolut positionierten) divs wie bei dir.

Die Seite skaliert immer noch nicht, informiere dich über skalierbare Layouts.

Wieso verwendest du unterschiedliche Schriftarten? Text ist auch besser lesbar, wenn er linksbündig geschrieben ist. Das dunkelrot im Footer hat einen zu geringen Kontrast.
Beschäftige dich also auch mit Typografie im Web. (Zb. http://www.smashingmagazine.com/2009...nd-techniques/ )

Hover-Zustand für Links in der Navigation gibt es auch keine.
Wenn du schon hover-Effekte mittels Grafiken realisierst, dann verwende wenigstens Sprites. (Bei der Registrierung zum Beispiel)

Grafiken kann man auch optimieren (Ein 830px x 605px großes Bild für einen Verlauf?)

Auch wenn ich mir die ingame-Screenshots ansehe: Keinerlei Kontrast bei den Links im Footer, eine lieblos hingeklatschte Tabelle und wieder der zentrierte Text.

Meine Empfehlung: Bevor du weiter an dem HTML/CSS Code herumschraubst, entwirf lieber ein ordentliches Design. Bis jetzt ist es nicht wirklich zeitgemäßes Webdesign.

Hi, also das mit dem Hovern kommt noch. Das hatte auf Anhieb leider nicht so funktioniert, wie ich mir das vorgestellt habe. Welche unterschiedlichen Schriftarten meinst du denn? Ich wollte nur, dass sich die rote Schrift ganz unten estwas abhebt. Schriften sind alle serifenlos. Grafikoptimiereungen sollten noch erfolgen, da hast du recht.

Du kannst dir den Ingamebereich auch ohne Anmeldung ansehen, wenn du möchtest.

Zugangsdaten sind:

test
Passwort: testify

Validiert wird die Seite auch noch... war bisher noch nicht zufrieden damit. Und wegend em Design: Nunja es ist ein Hobbyprojekt, mit kommerziellen Anbietern wirds wohl niemals mithalten können. Da gehen einige jetzt auch schon verstärkt auf 3d.

[toldyou]

Hi, also das mit dem Hovern kommt noch.

Am Wichtigsten würde ich zuerst das Erstellen von semantisch korrektem HTML erachten. Danach erst das CSS dafür (ansonsten kannst du alles umschreiben)

Welche unterschiedlichen Schriftarten meinst du denn? Ich wollte nur, dass sich die rote Schrift ganz unten estwas abhebt. Schriften sind alle serifenlos.

Ich meine die Schrift in der Navigation: News - Info - Registrieren - etc.

Du kannst dir den Ingamebereich auch ohne Anmeldung ansehen, wenn du möchtest.

Beschränke dich bei den Tabellen nur auf die wichtigsten Linien, bzw. versuche gänzlich ohne diese auszukommen. Fällt mir als erstes zu dem "Design" ein.

[paraGTI]

Guten Morgen,

ich komme nicht auf den Trichter warum das Bildhovern nicht funktioniert. Eingetragen ist mMn alles richtig in der CSS Datei.

Die Schriftart ist doch bei allen Menü-Buttons die selbe?! Ich benutze die gleiche Reihenfolge wie facebook nämlich:

font-family:'Lucida Grande',tahoma, verdana, arial, sans-serif;

Mit der Semantik muss ich mich noch einlesen.


Was ich nicht ganz verstehe:
Ich habe gelesen man soll auf Tabellen verzichten, und stattdessen mit Div-Konstruktionen ein Layout schaffen. Aber nun scheint mir das ja auch falsch zu sein? Oder ist das im Prinzip richtig, solange keine absolute Positionierung vorgenommen wird?


@ toldyou: Hast du eventuell eine (eigene) Website, die ich mir ansehen könnte?

[toldyou]

Bevor du dich mit dem Bildhovern beschäftigst, ändere deine Navigation lieber in eine Liste.

<ul>
    <li><a href="test">Menüpunkt 1</a></li>
    <li><a href="test">Menüpunkt 2</a></li>
</ul>

Erst dann kommt der Teil mit den CSS Sprites dran. Noch ein guter Link zu dem Thema aus dem Jahr 2004.


Du verwendest bei deiner Navigation eine andere Schriftart als im Contentbereich. Die zwei Schriftarten passen irgendwie nicht zusammen.

Man soll auf Tabellen zum Layouten verzichten, weil Tabellen nun mal Tabellen sind und für die Darstellung tabellarischer Daten gedacht sind.
Divs sind per se nicht schlecht, wenn sie richtig eingesetzt werden. Man soll nur kein Tabellenlayout 1:1 in divs übertragen, damit verbessert man nichts. Viel sinnvoller ist es, eine logische Struktur in ein HTML Dokument zu bekommen. Dann kann auch zB Google mehr mit dem Dokument anfangen. Absätze, Überschriften, Listen, etc. wurden nicht geschaffen, um die Leute zu verärgern sondern sind dazu da, um verwendet zu werden.

Du hast ja noch etwas wegen SEO gepostet: Um die Seite sinnvoll für SEO optimieren zu können, muss zuerst der iframe verschwinden.

[paraGTI]

Das iframe ist endlich Geschichte. Die News habe ich auf 3 begrenzt, mehr können nun mittels Linkklick eingeblendet werden. Somit scrollt man nicht grundsätzlich in dem mittleren DIV.

Die obere Leiste ist mittels Liste gelöst. Schriftarten sind einheitlich serifenlos.
Das Hintergrundbild habe ich verbreitert.

Mir persönlich gefällt die Hintergrundfarbe bei den News noch nicht so richtig.

Habt ihr weitere Tipps? Insbesondere das Spiel bekannter zu machen?

P.S.
Valide ist es noch nicht. Zudem gibt es mit Chrome ein Problem, der das Spiel unbenutzbar macht. Bei Erkennung Chrome wird deshalb zu Zeit bis zum Fix ein Warnhinweis eingeblendet.

[toldyou]

Die obere Leiste ist mittels Liste gelöst. Schriftarten sind einheitlich serifenlos.
Das Hintergrundbild habe ich verbreitert.

Es wurde nur die Fan werden und Voten Menüpunkte mit einer Liste umgesetzt. Hier wurde die Liste auch noch falsch umgesetzt, das sind keine zwei einzelne Listen sondern das kann ruhig in eine Liste mit Unterpunkten gesetzt werden. Außerdem gehört eine Liste nicht in ein span Element. Bsp:

<ul>
   <li> Fan werden
        <ul>
           <li> Hier die Unterpunkte </li> 
         </ul>
    </li>
   <li> Voten
        <ul>
           <li> Hier die Unterpunkte </li> 
         </ul>
    </li>
</ul>

Auf diese Weise gehören ALLE Navigationslisten umgesetzt. Es gibt keinen Grund, die Hauptnavigation (News, Infos, etc.) mit absoluter Positionierung umzusetzen.
Auch das Impressum etc. gehört nicht absolut positioniert.

Auch gehören die Bilder mit der Klasse "vorladen" aus dem Code raus, die haben nichts verloren. Auf jeder Seite entstehen so unnötige HTTP Requests, die niemand braucht. Wahrscheinlich wurde hier nur "vergessen" sie raus zu nehmen, aber es zeigt dein Problem recht deutlich: Du pfuscht irgendwelche halbfertige Lösungen zusammen und dabei "übersieht" man einiges.
Auch ist mir nicht klar, wozu du die Grafik links_30s.gif und links_21s.gif brauchst, die sind doch gleich?
Auch gibt es einen 404-Error auf deiner Seite: 404 Not Found - http://phantom-battle.de/pb/css/Bilder/icons/maus_geist_hover.gif"
Mein Rat ist folgender: Nimm dir die Zeit und baue die Seite ordentlich auf. Und zwar komplett ohne inline-Styles sondern mittels CSS und komplett ohne absolute Positionierung.
Mir scheint auch, dass der Grund, wieso du den Rahmen für das Spiel immer noch nicht größer gemacht hat, der ist, dass dann deine absolute Positionierungen nicht mehr passen. Das ist nämlich immer noch ein Kritikpunkt von mir, der Rahmen stört ziemlich. HTML Elemente passen sich automatisch dem Inhalt an, der Rahmen in dem man scrollen kann, ist das Browserfenster. Da ist es unsinnig, noch einen zweiten Rahmen hinzuzufügen.

[paraGTI]

Es wurde nur die Fan werden und Voten Menüpunkte mit einer Liste umgesetzt. Hier wurde die Liste auch noch falsch umgesetzt, das sind keine zwei einzelne Listen sondern das kann ruhig in eine Liste mit Unterpunkten gesetzt werden. Außerdem gehört eine Liste nicht in ein span Element. Bsp:

<ul>
   <li> Fan werden
        <ul>
           <li> Hier die Unterpunkte </li> 
         </ul>
    </li>
   <li> Voten
        <ul>
           <li> Hier die Unterpunkte </li> 
         </ul>
    </li>
</ul>

Auf diese Weise gehören ALLE Navigationslisten umgesetzt. Es gibt keinen Grund, die Hauptnavigation (News, Infos, etc.) mit absoluter Positionierung umzusetzen.
Auch das Impressum etc. gehört nicht absolut positioniert.

Werd ich mir noch vornehmen.

Auch gehören die Bilder mit der Klasse "vorladen" aus dem Code raus, die haben nichts verloren. Auf jeder Seite entstehen so unnötige HTTP Requests, die niemand braucht. Wahrscheinlich wurde hier nur "vergessen" sie raus zu nehmen, aber es zeigt dein Problem recht deutlich: Du pfuscht irgendwelche halbfertige Lösungen zusammen und dabei "übersieht" man einiges.

Das vorladen wird gemacht, damit die Hovereffekte der Navigation sofort da ist. Gibt unschöne Ladeeffekte ansonsten. Sehe den Vorteil von Sprites hier nicht wirklich, wenn man es so machen kann?

Auch ist mir nicht klar, wozu du die Grafik links_30s.gif und links_21s.gif brauchst, die sind doch gleich?

Die Grafiken haben unterschiedliche Ein-/Ausblendtimings.

Auch gibt es einen 404-Error auf deiner Seite: 404 Not Found - http://phantom-battle.de/pb/css/Bilder/icons/maus_geist_hover.gif"

Wo bekommst du den Fehler?

Mein Rat ist folgender: Nimm dir die Zeit und baue die Seite ordentlich auf. Und zwar komplett ohne inline-Styles sondern mittels CSS und komplett ohne absolute Positionierung.
Mir scheint auch, dass der Grund, wieso du den Rahmen für das Spiel immer noch nicht größer gemacht hat, der ist, dass dann deine absolute Positionierungen nicht mehr passen. Das ist nämlich immer noch ein Kritikpunkt von mir, der Rahmen stört ziemlich. HTML Elemente passen sich automatisch dem Inhalt an, der Rahmen in dem man scrollen kann, ist das Browserfenster. Da ist es unsinnig, noch einen zweiten Rahmen hinzuzufügen.

Ich möchte ja aber, dass das Hintergrundbild an den Seiten sichtbar ist, wenn der Bildschirm größer als der bisherige Rahmen ist...

Mit Rahmen meinst du doch den knittrigen weißen Rand, oder?

[toldyou]

Werd ich mir noch vornehmen.

Hoffentlich

Das vorladen wird gemacht, damit die Hovereffekte der Navigation sofort da ist. Gibt unschöne Ladeeffekte ansonsten. Sehe den Vorteil von Sprites hier nicht wirklich, wenn man es so machen kann?

Ich meine hier die buttons: news_hover, news_aktiv_hover, infos_hover, infos_aktiv_hover, etc.
Die brauchst du doch alle nicht mehr? Du hast deine Navigation sinnvollerweise auf richtigen Text umgestellt und nur noch 2 verschiedene Button-Bilder (aktiv-inaktiv)?
Ansonsten der Vorteil von Sprites ist: Weniger HTTP Requests, weshalb eine Seite schneller geladen wird.

Die Grafiken haben unterschiedliche Ein-/Ausblendtimings.

Was mich zu der Frage bringt: Wo werden diese Grafiken angezeigt? Ich habe die noch nicht gefunden auf der Seite...

Wo bekommst du den Fehler?

Auf der Info Seite.

Ich möchte ja aber, dass das Hintergrundbild an den Seiten sichtbar ist, wenn der Bildschirm größer als der bisherige Rahmen ist...

Mit Rahmen meinst du doch den knittrigen weißen Rand, oder?

Ich meine damit den sehr kleinen Bereich, den du dem Inhalt gestattest. Es ist in Ordnung, den content Bereich auf eine Breite zu begrenzen, zu lange Textzeilen irritieren nur. Jedoch den Inhalt in Höhe UND Breite zu beschränken wirkt sehr unprofesionell (Ich wähle dieses Wort hier deshalb, da es dir ja darum geht, profesioneller zu wirken)
Gib deinem Inhalt Platz, nach unten zu wachsen. Der Inhalt muss nicht eingesperrt sein

[paraGTI]

Hoffentlich

Ich meine hier die buttons: news_hover, news_aktiv_hover, infos_hover, infos_aktiv_hover, etc.
Die brauchst du doch alle nicht mehr?

Achja hast recht. Daran hab ich gar nicht gedacht.

Was mich zu der Frage bringt: Wo werden diese Grafiken angezeigt? Ich habe die noch nicht gefunden auf der Seite...

Da musst du mal eine Weile warten. Die Grafiken sind immer nur kurz zu sehen, wenn sie rot aufleuchten, da sie sonst im dunklen Hintergrund wie gewünscht nicht zu sehen sind.

Ich meine damit den sehr kleinen Bereich, den du dem Inhalt gestattest. Es ist in Ordnung, den content Bereich auf eine Breite zu begrenzen, zu lange Textzeilen irritieren nur. Jedoch den Inhalt in Höhe UND Breite zu beschränken wirkt sehr unprofesionell (Ich wähle dieses Wort hier deshalb, da es dir ja darum geht, profesioneller zu wirken)
Gib deinem Inhalt Platz, nach unten zu wachsen. Der Inhalt muss nicht eingesperrt sein

Ich hab hab gar nicht soviel Content im Außenbereich. Aber hast schon recht, ich beschneide den Content ja absichtlich bei den News, damit man nicht in der Box scollen muss...

[barzar]

Editiere deine robots.txt - da steht ja einfach mal alles drin. Angefangen bei der phpinfo inkl. mysqldumper pfad(Der Gott sei dank nicht mehr zu gehen scheint).
Nichts desto trotz kann man in den Infos rumwühlen und hat dann schon mal den Pfad auf dem Server inkl. dem Db-User - Ein Anfang

Ansonsten solltest du die $_POST Variablen in deinem Spiel besser überprüfen. Ich konnte mir mit deinem Testaccount direkt die letzte? Rüstung und das letzte? Schwert holen, auch wenn es nicht freigeschaltet(nicht sichtbar) war - Lvl 12 statt Lvl6. Bei anderen Sachen fehlen evtl. auch Checks? Ist nur ein Tipp, die Leute cheaten halt gerne.

Mehr hab ich da jetzt beim Spielen nicht getestet, das fiel mir halt grade auf. Gegen SQL-Injection und Co. hast du ja hoffentlich etwas unternommen. Ansonsten ganz ok, erinnert mich an die frühen Browsergames

[paraGTI]

Ach dann warst du das mit den XSS-Checks in der Shoutbox?

Das hat ja zumindest nicht geklappt
robots.txt hab ich ein paar wenige Sachen rausgenommen. Das meiste ist halt kein Geheimnis, soll nur nicht in den Suchmaschinen auftauchen. Für andere wichtige Sachen fehlt immernoch der komplette Pfad.

Das mit dem Waffenkauf muss ich nochmal überprüfen. Die Funktionen sind schon sehr lange implementiert und ich bilde mir ein das eigentlich überprüft zu haben... komisch.

Die andere Sache ist natürlich, dass der Test-Account unglaublich viel Geld hat. Normalerweise sollte es kaum möglich sein soviel Geld anzusammeln.

EDIT:
2 Variablen waren nicht global und wurden somit fälschlicherweise leer übergeben. Ist gefixt.

P.S.
Die wichtigen Sachen, wie zB mysqldumper sind selbstverständlich schon immer passwortgeschützt gewesen. Und gegen XSS und SQL-Inj. wurden diverse Vorkehrungen getroffen.

[DrFuture]

robots.txt hab ich ein paar wenige Sachen rausgenommen. Das meiste ist halt kein Geheimnis, soll nur nicht in den Suchmaschinen auftauchen. Für andere wichtige Sachen fehlt immernoch der komplette Pfad.

Wie landen die Pfade in einer Suchmachine wenn du sie nirgends verlinkst und auch nicht manuell in eine Suchmachine einträgst?

[paraGTI]

Kann doch immermal nen dummen Zufall geben, dass ein robot irgendwie drauf stößt...

zum Teil sind es auch spielrelevante Sachen wie die php-Datei zum Account aktivieren. Auf die gibt es natürlich Links, soll aber wirklich nur bei Bedarf (=Account aktivieren) auftauchen.

[DrFuture]

ja gut da isses Sinnvoll ja