My new webpage

[veNom]

So, da mir meine andere nicht mehr gefiel die ich in Flash geplant hatte, habe ich ein neues Konzept aufgestellt. Und damit es Web-Standard ist bleibt diese 100% HTML

Kritik und Verbesserungsvorschläge sind natürlich Willkommen.


Das ganze ist eine Preview-Page der Inhalt, so in etwa soll es dann mit CSS gemacht werden. Der Header ändert sich mit jeder Seite.

Ein Problem bzw. eine Materie mit der ich mich noch nicht in CSS beschäftigt habe ist die Schriften einbindung über meinen Server, aber soweit ich weiß sollte das gehen.

[Basti]

Sieht schön schlicht und elegant aus.
Ich frage mich nur gerade, ob das ganze nacher im Browser nicht ein wenig klein sein wird.

Mehr fällt mir im Moment leider nicht ein, es sieht zwar gut aus, aber vielleicht würden an einigen Stellen ein paar mehr Details nicht schaden.

Achja, wie willst du das denn mit den Schriften machen? Eigentlich ist es doch so, dass nur Standardschriftarten verwendet werden sollten, oder?
Denn sobald man irgendeine spezielle Schriftart nimmt und die auf dem PC des Benutzers nicht installiert ist wird eine andere Schriftart angezeigt.

Oder täusche ich mich da?

[veNom]

Dazu habe ich bereits etwas gefunden

Code: Alles auswählen

@font-face {
   font-family: "Walkway";
   src: local("Walkway Bold"), url("http://venom-media.at/markus/css/walkwaybold") format("TrueType")
}

Allerdings wird es bei mir verpixelt angezeigt, mal sehen, notfalls mach ich die Buttons als image und der Content wird in Arial formatiert.

Ich möchte eigentlich nicht das Design in den Mittelpunkt stellen, sondern eher den Inhalt meiner Seite, schließlich sollte nicht das Design im Vordergrund stehen sondern der Inhalt, daher habe ich es so schlicht gehalten.

edit:
Ich arbeite bereits an der HTML Umsetzung, mir fehlt nicht mehr viel dann kann ich euch einen Preview zeigen, und dann sehen wir auch gleich ob das mit der Schrift funktioniert.

edit2:
der Versprochene Preview
http://www.venom-media.at/markus/

bei mir ist es noch immer verpixelt, wenn ich das nicht besser hinbekomme werde ich wohl auf Bilder und eine andere Schrift umsteigen müssen.

[AlphaWolf1941]

Hi Markus,

also sieht schon nicht schlecht aus, gefällt mir ganz gut. Und der Trick mit der TT-Font Einbindung über CSS ist auch spitze ... wird mir sicherlich auch irgendwann mal zu Gute kommen .

Aber im Firefox ist da ein kleines Problem mit der Darstellung ... der Header ist ziemlich weit nach oben verschoben. Hab mal nen Screenie angehängt ... man achte auf den Header und die Scrollbarleiste vom Browser!!!

[veNom]

Das find ich jetzt aber komisch

Ich hab Firefox auch offen und jedes mal wenn ich etwas erneuer und ansehe refreshe ich beide Browser (Avant = IE und Firefox).

Bei mir sieht es in beiden Browsern identisch aus.

edit:
hab jetzt alles verlinkt und mit den verschiedenen Headern
hier nochmal der Link:

http://www.venom-media.at/markus/

[Persisteus]

Der Seite fehlt total die Semantik. Und ein Menü, dass ohne CSS komplett verschindet, ist natürlich auch alles andere als toll …
Beschränke dich mehr auf die Möglichkeiten, die dir HTML bietet, anstatt zu versuchen, mit Hintergrundbildern die gewünschten Grafikeffekte zu erzeugen.

Lass das root-Div weg, formatier stattdessen den Body direkt, z.B.:

Code: Alles auswählen

body {
  max-width: 50em;
  margin: 2em auto;
  border-left: .5em solid #eee;
  border-right: .5em solid #ccc;
  border-bottom: .5em solid #ccc;
}


[veNom]

Meiner Meinung nach kann man CSS mehr vertrauen schenken als puren HTML Code, denn CSS ist viel genauer als HTML, ein Beispiel.

Ich definiere eine Schriftgröße in CSS, die Größe ist 100prozentig immer die Selbe, definiere ich aber die Schriftgröße kann der User diese durch die Schriftgrad änderung im Browser ändern, das kann zur FOlge haben, das meine ganze Seite durch meine eigene Schrift, weil diese nicht 100prozentig festgelegt ist, "zerlegt" wird.

Daher bervorzuge ich lieber CSS.

Wegen dem mit den Hintergrundbildern, verwende ich keine Hintergrundbilder und die CSS-Hover funktion müsste ich mit Javascript arbeiten, das nicht jeder User hat, CSS hingegen aber schon.
Ich weiß nicht ob du die Version mit Mouseover gesehen hast, aber es wechselt bei dem Buttons die Schriftfarbe.

[veNom]

Sodale nach einen knappen Tag Arbeit ist Sie auch schon fertig

Hier nochmal der Link zu meiner Seite
http://www.markus-w.at.tt

Auch zufinden in meiner Signatur

Die Seite ist 100% w3c-Standard.

[Basti]

Vielleicht warst du ein bisschen voreilig, ich würde an deiner Stelle zumindest die Fehler erstmal verbessern und ein paar Sachen noch anders machen.

Zum einen wie AlphaWolf schon sagte der Header. Auch bei mir ist ein gutes Viertel der Grafik weggeschnitten, sodass das höchst merkwürdig aussieht.

Achja, zu deinem "w3c-Standard". Auf deiner Seite ist ja ein Frameset (von nem kostenlosen Anbieter vielleicht?), zumindest ist die Seite so überhaupt nicht valide, da sie noch nichtmals gecheckt werden kann, siehe:
http://validator.w3.org/check?verbose=1 ... w.at.tt%2F

Naja, ansonsten sind noch ein paar andere unschöne Stellen aufgefallen.
Zum einen ist in der Galerie eine (denke ich) Überschrift genau über den Bildern, sodass man diese nicht wirklich lesen kann und das sieht auch komisch aus.

Als letztes dann noch das Impressum: Auf allen anderen Seiten muss man runterscrollen, weil das Design sich immer dem Inhalt in der Länge anpasst.
Im Impressum aber dann auf einmal nicht. Dort ist eine Box mit sowohl horizontalem als auch vertikalem Scrollbalken, was das Design meiner Meinung nach ein wenig kaputt macht.

Naja, sind im Prinzip alles nur Kleinigkeiten, aber ich denke das war noch wichtig

[veNom]

Was habt ihr denn für Browser ?

Bei mir wird es im IE, Avant und FireFoy einwandfrei angezeigt, bis auf das mit den Bildern im Firefox, das muss ich verbessern. Den Fehler mit dem Header kann ich mir nicht erklären.

Es wird eigentlich auf keiner Seite gescrollt, ich habe den Inhalt beschränkt auf die Länge des Layouts, und eigentlich habe ich "overflow-y: auto" eingestellt, somit kein horizontaler Scroll. Funktioniert im IE auch.

Werd den Disclaimer in nen Popup aufgehen lassen, mit einer bestimmten größe, wird wohl das schönste sein.

Dieser w3c Fehler ensteht da dieser Free-Domain, wenn du aber meinen direkten Link checkst (http://www.venom-media.at/markus/) wirst du feststellen das es keine Fehler gibt.

So edit:
Ich weiß jetzt wieso bei euch der Header zu weit oben ist und das solltet ihr mir dazu sagen das ihr auflösung 1024x768 benutzt, das Problem bei der Sache ist das die Position im Minus bereich geht, das muss ich anders machen.

[AlphaWolf1941]

Also auf meinem Laptop benutze ich die Auflösung von 1280x800 und auf meinem Desktop benutze ich 1280x1024. Auf beiden war der Header verschoben...jetzt ist alles oki, zumindest bei mir.

[veNom]

Sollte nun bei allen ok sein da macping so nett war und mir ein javascript gegeben hat womit die höhe variable ist.

[Basti]

Jep, jetzt wird's richtig angezeigt

Eigentlich sollte sowas aber auch ohne zusätzliches JS gehen, hab mir den Quelltext jetzt aber nicht näher angesehen...

[Persisteus]

@veNom
Ich fürchte, du verwechselst da etwas. CSS wird sozusagen über den HTML-Code gelegt, und soll HTML nicht ersetzen. CSS verfeinert sozusagen die Darstellung des HTML-Dokuments.

Ich definiere eine Schriftgröße in CSS, die Größe ist 100prozentig immer die Selbe, definiere ich aber die Schriftgröße kann der User diese durch die Schriftgrad änderung im Browser ändern, das kann zur FOlge haben, das meine ganze Seite durch meine eigene Schrift, weil diese nicht 100prozentig festgelegt ist, "zerlegt" wird.

Dann ist das Design nicht richtig gewählt. Internetseiten sind kein Printmedium. Die Benutzer haben sehr unterschiedliche Bildschirmgrößen und Auflösungen, daher sieht eine fest formatierte Seite eh nie bei jedem Benutzer gleich aus. Mal ist sie viel zu klein, mal zu groß.
Dein Design zerfällt bei wechselnden Schriftgrößen deshalb, weil du zu sehr auf Hintergrundbilder (z.B. der komplette Seitenrahmen) setzt.

Und über solchen Quellcode wie

Code: Alles auswählen

<div><a></a></div>

kann man doch eigentlich nur den Kopf schütteln, oder findest du nicht auch?

Mach das Menü und die Überschrift doch mit ganz normalen Text, das sieht dann zwar anders aus, aber bestimmt nur minimal schlechter, wenn überhaupt. Die Suchmaschinen werden sich freuen!

PS: Warum nimmt das Forum hier die Attribute aus meinem Quellcode-Beispiel raus???

[Christopher]

Also das Menü hätte ich auch eher mit einfachen Links gemacht. Geht ja dann auch schneller geladen. Ich merke es ja bei meinem DSL2000 schon, dass der die verzögert anzeigt!

Mit a:hover kannste auch einfach umsetzen, dass die Links beim Mouseover leuchten.

So an sich ist das Design sehr schön.

EDIT:

Es wäre besser so:

Willkommen auf meiner privaten Webseite. Auf dieser Seite dreht sich einzig und allein alles um mich.
Wer ich bin, wo ich her komme, was ich mache, was ich vorhabe, wohin auch immer mein Weg mich führen mag, ich werde nicht davon abweichen.

Auch wenn einige Hürden im Weg stehen, diese werden überwindet und es geht weiter.

Ich hoffe, ich kann Ihnen alle Informationen bieten die Sie wissen wollen. Falls Sie weitere Fragen haben, können Sie mich gerne kontaktieren.

EDIT 2:

Zu meinen Hobbies zählen vor Allem mein Auto, mein großes sowie auch mein kleines.
Weiter natürlich das Internet, wo ich öfters mal Webseiten kreiere und auch Onlinespiele spiele.
Dann wäre da noch das Fotografieren. Auch das ist eines meiner größten Hobbies, am Besten mit Autos und heißen Girls verbunden.

Interessen

Meine Interessen sind ähnlich meinen Hobbies, das Wichtigste in meinem Leben und das zeichnet sich durch mein Können im Web aus, denn darin sehe ich meine Zukunft und ist daher mein größtes Interresse, neben dem Fotografieren.

Ehm...den Schluss kann ich nur noch raten, was das heißen soll...^^ Bevor du eine Seite richtig online schickst, solltest du UNBEDINGT probelesen, bzw. probelesen lassen!!

EDIT 3 ( ;D ):

Was ich noch anmerken wollte: Du hast Text im Banner stehen, z. B. beim Kontakt. Da ist es ganz wichtig richtig zu schreiben, weil es nicht so schnell behoben werden kann, wie wenn es ein Text ist!