[vht]

Hallo,
habe meinen ersten CSS-Code für eine Beispielseite erstellt. Das Layout einer alten Seite, die mit Tabellen und JS erstellt war, sollte in CSS transformiert werden. Dies ist mir gelungen.

CSS und HTML sind valide.

Als Anfänger habe ich jedoch wahrscheinlich einen umständlichen Code generiert. Mich würde interessieren, wie man ihn vereinfachen bzw. verbessern kann. In allen gängigen Browser-Versionen soll die Seite korrekt dargestellt werden, incl. IE6.

Sämtliche Bilder sind nur testhalber eingefügt und werden noch ersetzt (inkl. Button-Grafiken). Abgesehen davon soll das Erscheinungsbild der Seite aber erhalten bleiben.

Bin für jede Anregung zur Verbesserung des Codes der Seite dankbar.

Grüße

vht

[hubspe]

Moin,

also was mir sofort auffällt:
die Schriftgröße ist zu klein und line-height viel zu gering. Außerdem ist die Laufweite der Zeilen viel zu groß.

line-height sollte mind. 1.4/1.5 betragen und die Zeilenlaufweite um 20%-30% gekürzt werden.

Das ist deshalb sehr, sehr mühsam zu lesen. Spätestens bei der zweiten Zeile hat deshalb keine Lust mehr weiterzulesen.

Der Link der Seite, auf der man sich gerade befindet, sollte immer hervorgehoben sein, bzw. für diese Seite a gegen strong ausgetauscht werden, damit der Link nicht auf sich selber zeigt.

Ich würde die rechte Spalte (content) auch floaten lassen, Stichwort Block Formatting Context.

Du hast keinen CSS-Prolog.

padding/margin:0; für body gelten auch nur für body.

[vht]

Danke für den hilfreichen Kommentar!

Das mit der Zeilenlaufweite (=Zeilenlänge?) könnte mir fast schon peinlich sein, da ich an anderer Stelle genau diese schon wiederholt kritisert habe (130 Zeichen pro Zeile).

Meine längste Zeile hat 95 Zeichen (letztes Wort "invidunt").
Die längste Zeile hier im Forum ist übrigens 107 Zeichen (2. Zeile deines Beitrags, letzte Worte "viel zu").
Empfohlen werden, je nach Zweck, 40 bis 80 Zeichen pro Zeile.

Nach Umstellung des font-size im body von 70 auf 100% sind jetzt 65 Zeichen in der längsten Zeile (letztes Wort "diam"). Es müssen jetzt natürlich noch die Beschriftung der Buttons und die Copyright-Grafik entsprechend vergrößert werden.

Natürlich sollte der Link der Seite, auf der man sich gerade befindet, hervorgehoben werden. Das wird auf den verlinkten Seiten mit abgedunkelten (evtl. etwas eingefärbten) Buttons auch geschehen. Ich dachte, man könnte auf der hier dargestellten Startseite darauf verzichten und spart damit einen Button ein. In die linke obere Ecke wird noch ein Logo eingefügt, das dann als Link zur Startseite dienen soll.

Zum float des Inhalts: Derzeit sind die Benutzer mit unterschiedlichsten Bildschirmbreiten unterwegs, nach Häufigkeit: 1280, 1024,1680, 800, 640, 1920

Ich strebe beim Inhalt Layout-Sicherheit an, der bei den verlinkten Seiten noch wichtiger ist als auf dieser Startseite. Daher denke ich, daß eine Lösung ohne float des Inhalts die bessere ist.

An den CSS-Prolog hatte ich auch schon gedacht, mich aber noch zu wenig damit beschäftigt. Ich habe ihn jetzt eingefügt, damit das Layout der Absätze nicht mehr vom Browser kontrolliert wird. Einen p-Selektor habe ich nun ebenfalls eingefügt, mit margin-top u. -bottom 20px. Allerdings muß das Layout jetzt noch nachgearbeitet werden.

Ich stelle die neue Version trotzdem schon mal online. EDIT: Ist jetzt aktualisiert.

Vielleicht kann jemand etwas auf meinen Anfänger-Code eingehen. Da kann man vielleicht etwas vereinfachen oder eleganter lösen. Habe auch das Gefühl, daß ich mit "position relative" ein bißchen getrickst habe, was vielleicht auch anders zu lösen wäre.

Grüße

vht

[hubspe]

Zitat von vht

Ich strebe beim Inhalt Layout-Sicherheit an, der bei den verlinkten Seiten noch wichtiger ist als auf dieser Startseite. Daher denke ich, daß eine Lösung ohne float des Inhalts die bessere ist.

ohne float ist das alles noch unsicherer.

das untere Menü mit pos.:relat. hochzuholen halte ich für überhaupt keine gute Idee.
Im IE6/7 schaut der untere Teil der HP auch gar nicht so toll aus.

Ich würde die rechte/linke Spalte floaten.
In der rechten Spalte ist oben dein Inhaltsbereich und darunter dein div#wadenmenü.
Erst danach kommt der Fussbereich in den Quelltext.

[vht]

Zitat von hubspe

das untere Menü mit pos.:relat. hochzuholen halte ich für überhaupt keine gute Idee.
Im IE6/7 schaut der untere Teil der HP auch gar nicht so toll aus.
...
In der rechten Spalte ist oben dein Inhaltsbereich und darunter dein div#wadenmenü.
Erst danach kommt der Fussbereich in den Quelltext.

Danke für den Hinweis. Ich habe jetzt im HTML das untere Menü über die Fußzeile gesetzt und mit pos. relative nach unten gezogen. Nun konnte ich den id-Selektor "Sohle" einsparen. Bin mir aber nicht sicher, ob du das so gemeint hast, da ja trotzdem noch pos. rel. eingesetzt wird. Hoffe, daß die Darstellung im IE6/7 akzeptabel ist.

Zitat von hubspe

ohne float ist das alles noch unsicherer.
...
Ich würde die rechte/linke Spalte floaten.

Mit "float" kenn ich mich noch nicht so aus. Wenn ich unten für "float" right oder left einsetze, ist der obere Teil des Inhalts leer.

  div#inhalt {
    float: none;
    margin: 0 30px -50px 220px;
    padding: 0 1em;
  }

Welchen Vorteil hätte der korrekte float-Einsatz bei meiner Seite? Neue Fassung

Grüße

vht