Tutorial HTML, CSS u. PHP - Forum

[Sören]

Ich habe mir eine neue Seite erstellt: http://soeren-thomas.de/

Die Seite dient in erster Linie als Sammelplatz für meine Projekte und Updates, ich habe nämlich noch eine weitere Seite geplant.

Das Design ist schlicht gehalten.
Ich würde gerne mal wissen, was ihr von dem Design haltet. Wenn ihr Fehler findet oder Verbesserungsvorschläge habt, könnt ihr mir die natürlich auch sagen.

[Sarkkan]

Ehrliche Meinung? Von dem Design halte ich nicht besonders viel bis gar nichts.. :/
Es wirkt einfach, meines Erachtens, zu Kalt, klobig und irgendwo zu unübersichtlich :/

Was hältst du davon, wenn du die Farben, von soeren-fotos.de verwendest?
Finde die Konstellation der Farben (v. soeren-fotos.de) eigentlich sehr schön (:

[Sören]

Wollte halt mal was anderes machen. Ich werd mal gucken, wie das mit den anderen Farben aussieht.

Ist ja nicht das erste Mal, dass mein Design mehrere Anläufe braucht ;-)

[Sarkkan]

War auch nicht böse gemeint^^
Weißt ja, dass ich deine Arbeit schätze (:

Aber das war wirklich nichts :/
Bin mal auf deine nächste Idee gespannt (:

[Sören]

Kann jetzt erstmal wieder eine Weile dauern. Ich hoffe, ich kann heute noch etwas präsentieren.

Ist denn so vom Code alles in Ordnung?

[Sarkkan]

Soweit^^
Einige Kleine Mängel, beim herüber schauen gefunden:
-> gib dem ul #nav und setze kein Div drum ;)
-> gib dem transition-Dingsi am besten nicht "all" sondern eine Eigenschaft. Besonders der Chrome neigt dazu das Element dann zu 'vergewaltigen' ;D

Noch ein Kleiner Tipp für die Allgemeinheit:
Verwendet am besten dieses "CSS Reset", ganz am Anfang deines CSS-Codes:

Code: Alles auswählen

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0}

Das ist die Komprimierte Version des YUI-Reset's. Das ist optimiert um alle Browser gleich auszurichten, bei Top performance (:

[DerWaldschrat]

Ja, war alles valide (so auf die schnelle geschaut).
Wie viele Schriftarten verwendest du für dein CAPTCHA?
Wie man das macht, seh ich ja auf der wunderhübschen seite http://www.php-kurs.com
Netter CSS-Code, Sarkkan
DerWaldschrat

edit: Eine Sache, in Safari sieht die Umrahmung ziemlich doof aus (beim Kontaktformular), weil Safari Felder, die fokussiert sind, blau umrahmt.
Allerdings weiß ich nicht, ob man das abstellen kann.

[Sören]

Der Navigationsliste muss ich für die CSS-Tabelle ein div drumrummachen, weil sonst ein Element für die Tabelle fehlt. (display: table (div) -> table-row (ul) -> table-cell (li)).

Den Reset werde ich dann beim Neuen Design einfügen, genauso wie die einzelnen transitions, auch wenn Chrome bei meinem Design nichts 'vergewaltigt'.

Ich benutze 6 Schriftarten für den Captcha.

edit: Eine Sache, in Safari sieht die Umrahmung ziemlich doof aus (beim Kontaktformular), weil Safari Felder, die fokussiert sind, blau umrahmt.
Allerdings weiß ich nicht, ob man das abstellen kann.

Ich weiß, Chrome macht sowas aber auch.

[Sarkkan]

edit: Eine Sache, in Safari sieht die Umrahmung ziemlich doof aus (beim Kontaktformular), weil Safari Felder, die fokussiert sind, blau umrahmt.
Allerdings weiß ich nicht, ob man das abstellen kann.

Ich weiß, Chrome macht sowas aber auch.

Dies wird durch eine CSS-Eigenschaft erstellt, die ziemlich unbekannt ist: outline.
Chromium und Safari haben diese bei Kontaktformularen eingestellt (:
Das ist aber recht einfach abschaltbar, outline funktioniert genau wie border (Mit dem Unterschied, dass border ein Element verbreitert, outline legt sich nur um das Element herum [: ), also einfach

Code: Alles auswählen

input /* und die anderen Elemente, die das Standardmäßig haben */ {
    outline: none;
}

Ich weiß gerade leider nicht, um welche Elemente es sich legt.. sonst könnte man 'form *' machen (: [Würde sich auf jedes Element in einem Formular auswirken^^]

[Sören]

So, habe jetzt ein neues Design hochgeladen. Gefällt mir schonmal deutlich besser.

Die Grafiken sind noch die alten, wollte erstmal gucken, wie das Design ankommt.

Die anderen Sachen hab ich auch verbessert.

[DerWaldschrat]

Ja, die outline-Eigenschaft sagt mir was, aber ich kenns nur von den fokussierten Links.
@Sören: Das neue Design ist schön, aber warum machst du die Linkleiste über eine CSS-simulierte Tabelle?
Da könntest du gleich eine echte Tabelle nehmen, außerdem, bis zu welchem Browser ist das implementiert?
Und wo hast du die Schriftarten für dein CAPTCHA her?

Und noch was ist mir aufgefallen: Warum benutzt du auf deiner Foto-Seite "prototype" und auf der anderen "jQuery"?
DerWaldschrat

[NeoAramis]

Das Logo würde ich ändern, erstmal aufgrund des weissen Hintergrund und zweitens sieht es recht altbacken bzw. billig aus. Die Breite des Gesamtlayout würde ich nicht in Prozent angeben (body { width: 85%; }). Bei meinem Bildschirm wird das Layout viel zu breit. Die Navigationsbutton gefallen mir, hast du gut hingekriegt, nur kann man Navigation ruhig ausgeprägter machen, sticht nämlich so ins Auge, d.h. es fällt nicht sofort auf, das das die Hauptnavigation ist. An der Typografie kann man noch mehr feilen, insbesondere am Abstand zum äusseren Rand. Allgemein, die einzelnen Objekte "kleben" zu fest einander, ein bisschen mehr Luft würde guttun. Bei den "News" würde ich den Text nicht um das Kalenderbild umfliessen lassen, lieber rechts stehen bleiben. So zwei Spalten, eine für den Eintrag und eine für das Kalenderbild.

Sonst finde ich das Ganze eigentlich im Grossen und Ganzen ganz OK.

[Sören]

Das neue Design ist schön, aber warum machst du die Linkleiste über eine CSS-simulierte Tabelle?
Da könntest du gleich eine echte Tabelle nehmen, außerdem, bis zu welchem Browser ist das implementiert?

So teilt sich die Navigation, von selbst auf die komplette Seite auf und es ist weniger Code als mit Float. Bei einer echten Tabelle wäre ja keine Trennung zwischen Inhalt und Design mehr.

Es funktioniert auf jeden Fall in allen aktuellen Versionen der Browser (IE 8, Chrome, Opera, Safari, Firefox). Nach den Browsershots auch in allen anderen, bis auf dreien.
In zwei von diesen (auch in IE7) funktioniert es mit einer Alternativmethode aus meinem CSS-Buch, allerdings ohne volle Breite.
In IE6 weiß ich es nicht.

Und wo hast du die Schriftarten für dein CAPTCHA her?

von "C:/windows/fonts"
Einfach in den Captcha-Ordner kopieren und einbinden.

Und noch was ist mir aufgefallen: Warum benutzt du auf deiner Foto-Seite "prototype" und auf der anderen "jQuery"?
DerWaldschrat

Prototype wird für meine Lightbox-Galerie benötigt, jQuery war fürs Gästebuch. Danke, dass du mich darauf gebracht hast, dass ich bei dieser Seite in dem News System, kein jQuery brauche. ;)

Das Logo würde ich ändern, erstmal aufgrund des weissen Hintergrund und zweitens sieht es recht altbacken bzw. billig aus.

Ich hab ja gesagt, ich habe die Grafiken von dem alten Design noch nicht geändert. Deswegen der weiße Hintergrund.
Außerdem viel mir nichts besseres ein und ich habe die Schriftart nicht gefunden, die ich gesucht habe.
Ihr wisst nicht zufällig, wie eine Schriftart heißt, von der ich ein Bild angehängt habe?

Die Breite des Gesamtlayout würde ich nicht in Prozent angeben (body { width: 85%; }). Bei meinem Bildschirm wird das Layout viel zu breit.

Ich weiß, das besonders die Link-Seite bei größeren Breiten nicht mehr gut aussieht, ich werds verbessern.
Edit: Besser So?

Die Navigationsbutton gefallen mir, hast du gut hingekriegt, nur kann man Navigation ruhig ausgeprägter machen, sticht nämlich so ins Auge, d.h. es fällt nicht sofort auf, das das die Hauptnavigation ist.

Ich werd mal gucken, was mir dazu einfällt.
Edit: Besser So?

An der Typografie kann man noch mehr feilen, insbesondere am Abstand zum äusseren Rand. Allgemein, die einzelnen Objekte "kleben" zu fest einander, ein bisschen mehr Luft würde guttun. Bei den "News" würde ich den Text nicht um das Kalenderbild umfliessen lassen, lieber rechts stehen bleiben. So zwei Spalten, eine für den Eintrag und eine für das Kalenderbild.

Das neue Design habe ich noch nicht komplett verbessert, besonders der News-Teil gefällt mir auch noch nicht richtig.
Ich wollte erstmal nur den Großteil fertig haben.


Edit: Weiß jemand, wieso IE7 mir die oberen Rahmelinien der Navigation entfernt?

[DerWaldschrat]

Naja, die fixe Breite sorgt allerdings bei meinem Monitor (1920 x 1080) dafür, dass ich mehr Luft als Seite hab.
Und ob der Trick mit den CSS-Tabellen mehr Trennung von Layout und Inhalt ist, darüber lässt sich streiten.

Off-Topic: Wieso verwendest du bei deinem Gästebuch jQuery, aber gleichzeitig <body onload="">?
Das hier geht auch, glaub ich:

Code: Alles auswählen

$(document).ready(function() {
  hide('eintragen,ahidinglink');
});


DerWaldschrat

[Sören]

Ohne fixe Breite ist bei der Link-Seite aber sehr viel nicht "beschriebener" Platz rechts.

Und ob der Trick mit den CSS-Tabellen mehr Trennung von Layout und Inhalt ist, darüber lässt sich streiten.

Wieso? Das Layout ist mit CSS-Tabelle doch ganz eindeutig mit CSS gemacht.

Mit dem JS spricht man doch Tags an und keine IDs, oder? Wenn mir jemand sagt, wie ich mit JQuery IDs ansprechen kann, ändere ich das auch um.