Das Design ist ja schon bekannt, habe es vor einiger zeit schon vorgestellt. Jetzt habe ich es aktualisiert, ein paar Effekte eingebaut und zu mehr Browsern kompatibel gemacht (am besten sieht es in Firefox3 aus, aber die anderen machen auch nichts verkehrt).
mitaki: find das design nach wie vor sehr gut und augenfreundlich, lediglich der hintergrund stört mich etwas... genaugenommen dass der text darin in spalten geschrieben steht (oder sich lediglich ungünstig wiederholt...) sieht jedenfalls ned so pralle aus. wenn es besser "ineinander geschoben" wäre, sodass es wie ein echter natürlicher text aussehen würde, wäre es IMO viel besser.
und wieso nimmst du bei der headergrafik, wenn es schon ein text-bild sein muss, nicht svg? das würd sogar gut aussehen, wenn man es skaliert (oder genrell ein etwas höher aufgelöstes bild von besserer qualität verwenden^^)
--
cats are not characteristically disposed toward voluntary aerobic exercise
Du solltest noch ein <div style="clear: both;"></div> einfügen, denn bei mir überschreitet das Menu das Ende der Seite (unter Katze).
In den Links solltest du noch das HTML-Entitie für das Ampersand-Zeichen verwenden ( & ) und einen Doctype einfügen!
Das Bild Mitte.png wird wegen einem unempfindlichen Grund nicht gezeigt.
Das ganze besteht aus 3 Div Containern noch ein paar Divs und CSS Stylesheets.
Bitte nicht ausernander nehmen das ist erst meine 4 Seite.
[Die anderen 2 sind purer mist xD]
Riesig ist relativ. Das Layout schaut in 1024 schon nicht korrekt aus, in allem was darunter liegt verrutschen die Elemente, und in allem was darüber liegt verrutschen sie ebenfalls. So gesehen sieht es in keiner Auflösung so aus wie du es gern hättest
Es ist zwar gut davon ausgehen dass die Seite für maximal 1024er Bildschirme ausgelegt sein sollte, aber heutzutage hat eigentlich praktisch jeder Monitor 1280 und mehr Bildpunkte in der Breite.
Wenn du divs zentrieren willst hilft dir die kleine aber feine css anweisung margin: 0 auto;
Damit kann es dir richtig gemacht egal sein welche Auflösung die Nutzer haben.
Allgemein kann man noch sagen dass es der Seite an Kontrasten fehlt. Dunkle Schrift und dunkler Grund, sehr schlecht zu lesen. (auf die Navigation und den Header bezogen)
Also, soweit ich das sehe, ist dein Backgroundimage in horizontaler Richtung immer gleich, das heisst, du kannst es auch nur 1px Breit machen. http://img152.imageshack.us/img152/6030/bgrz3.png
Daher würd dein CSS-Code dann so aussehen:
Und hör auf mit den Tabellen und mit dem absoluten Positionieren. Der ganze Code für den Header könnte so aussehen:
Dann das Menu:
Zudem ist mir noch aufgefallen, dass du mehreren Elementen die gleiche id gegeben hast, dass ist in XHTML nicht erlaubt.
Und dann noch ein div für den eigentlichen content und dieses auch zentrieren, dann sollte so manches Problem behoben sein.
Zudem ist mir noch aufgefallen, dass du mehreren Elementen die gleiche id gegeben hast, dass ist in XHTML nicht erlaubt.
...
Nimm stattdessen class="", das ist valide und funktioniert. Quasi das Selbe, nur für mehrere Objekte zu verwenden, anstelle von nur einem, wie id="" es tut.
Leon: Ich persönlich mag diese extreme Spiegelung in den "Buttons" (Wie ich dieses Wort hasse. Das erinnert mich immer an irgendwelche Mädchenspielzeuge...) überhaupt nicht. Zudem setzt sich der Schriftzug im Header durch den harten, schwarzen Rand viel zu sehr vom Rest ab und dieser "3D-Schrift"-Effekt passt überhaupt nicht ins restliche Bild. Die Pilze haben auch noch einen recht pixeligen Rand, wenn man genau hinschaut. Ich würde auch noch in den Highlight-Grafiken in der Navigation das "Leuchten" beim Hovern weicher machen. Ein Farbverlauf im tristen grauen Hintergrund täte sich sicherlich auch gut. Für den Content würde ich keine Hintergrundgrafik benutzen, da das nur unnötiges Laden bedeutet; die Grafik hat doch sowieso an jedem Pixel die selbe Farbe.
Die Farbgebung an sich ist aber nicht all zu schlecht.
Joah, hoffentlich hab ich dir damit ein bisschen helfen können.
In Verbindung mit absoluter-Positionierung sowieso nicht (welche btw. eh Rotz ist, die sollte man nur in Verbindung mit JavaScript verwenden ...).
Und das margin-auto funzt, wohlgemerkt auch nicht im IE6!
Und das margin-auto funzt, wohlgemerkt auch nicht im IE6!
...
Also ich hab Multiple-IEs installiert und hab mir kurz eine Testdatei angelegt und da hat mir der IE 6 sehr wohl das div zentriert.
Ausser du lässt deine Seiten im Quirksmodus anzeigen, aber dann liegt das Problem jawohl da. (xml deklaration nicht vor den Doctype tun!)
Also ich hab Multiple-IEs installiert und hab mir kurz eine Testdatei angelegt und da hat mir der IE 6 sehr wohl das div zentriert.
...
Blödsinn.
Der IE6 kennt margin:0 auto; nicht. Dafür kann man im IE divs zentrieren in dem das übergeordnete Element auf: text-align:center; gesetzt wird.
Und das ist fakt!
Der Multitiple-IE ist eh nie ganz korrekt, ich habe das teil selber ... und es zickt in manchen Dingen noch mehr rum, als das original ...
(oder genrell ein etwas höher aufgelöstes bild von besserer qualität verwenden^^)
Zitat von LS~
Der ganze Code für den Header könnte so aussehen:
Das erinnert mich immer an irgendwelche Mädchenspielzeuge...) überhaupt nicht. Zudem setzt sich der Schriftzug im Header durch den harten, schwarzen Rand viel zu sehr vom Rest ab und dieser "3D-Schrift"-Effekt passt überhaupt nicht ins restliche Bild. Die Pilze haben auch noch einen recht pixeligen Rand, wenn man genau hinschaut. Ich würde auch noch in den Highlight-Grafiken in der Navigation das "Leuchten" beim Hovern weicher machen. Ein Farbverlauf im tristen grauen Hintergrund täte sich sicherlich auch gut. Für den Content würde ich keine Hintergrundgrafik benutzen, da das nur unnötiges Laden bedeutet; die Grafik hat doch sowieso an jedem Pixel die selbe Farbe.
, ich rede von CSS ...
Berechtigungen
Zitieren
