Bitte um feedback zu erster HP (.css)

jam · User [**User**] Anmeldung: 05.06.06 Beiträge: 11

Hallo,

Ich bin eigentlich netzwerkadmin und habe den auftrag bekommen eine kleine seite zu basteln. Wir haben nur wenige zugriffe, kleinere fehler sind also keien drama.

Mein grosses problem sind nach wie vor die verschiedenen auflösungen, wie man sieht ist die seite für 1280x1024 gemacht, 1024x786 geht auch, bei weniger gibt es ein problem mit dem scrollbalken.

Ich bitte um feedback zu design und technik. Vielen Dank.
link entfernt, da seite gerade überarbeitet wird.

PS: An dieser Stelle ein grosses Danke an "Cineplex", von ihm kommt der script für den Newsletter.

edvsb · Erfahrener [**User**] Anmeldung: 24.03.06 Beiträge: 94

Hi,

also ansich finde ich die Seite ganz nett.

Aber wie Du schon gesagt hast, die Scrollbalken. Selbst bei 1024x768 ist der untere Seitenbereich nicht erreichbar.

Dann stört mich ansich der Scrollbalken wo er ansich keine Funktion hat. z.B. unter "Kontakt".

Der Content-Bereich geht nicht bis ganz nach unten, sondern hört etwa 4 cm über der unteren Linie auf. Das führt wieder zum Scrollen wo es nicht sein müßte.

Das Menü finde ich zu breit. Bei 800x600 nimmt es fast 40% der gesamten Breite ein.

Und, auf allen Seiten der gleiche Title und Description.

Gruß, Ingo

sejuma · Beliebter [**User**] Anmeldung: 08.05.06 Beiträge: 490

Design find ich o.k. und übersichtlich, Navi-Bereich noch etwas schmälern.

Beim Code hast du dir unnötig viel Arbeit gemacht:
Gerade CSS macht Tabellen weitgehend überflüssig. Bei dieser Form kannst du auf den Tabellencode verzichten.
Vom Aufbau her brauchst du im wesentlichen 4 Container: Logo, Menue, Hauptinhalt und Sponsoren etc. dazu evtl. noch einige Gestaltungscontainer für den background.
Versuch mal diese Container ohne absolute Angaben (evtl. mit Ausnahme des Logo's) zu definieren, indem du deren Breite als Prozentwert angibst, dazu noch einen margin-Wert als Abstand und einen float-Wert zur Bestimmung der Position. Dadurch erübrigt sich auch das Scroll-Problem.
Das Menue kannst du statt in Tabellenform als Liste definieren.
Näheres zur Layoutgestaltung:

http://www.css4you.de/wslayout1/index.html

jam · User [**User**] Anmeldung: 05.06.06 Beiträge: 11

Danke fürs feedback. Ich habe den code jetzt bereinigt, dh. alle tabellen rausgeschmissen und auch in der css-datei selbst teilweise prozentuelle angaben gemacht. Das problem mit dem scrollbalken ist leider nach wie vor da. Es lässt sich für die höhe anscheinend keine prozentuelle angabe festlegen und wenn ich es über den margin von textlayer versuche, geht nicht der text nach oben, sondern das fenster nacht unten. D.h man kann dann über den hintergrund hinaus runterscrollen.

Hier habe ich jetzt den neuen code hochgeladen, vielleicht kann mir jemand bei dem scrollbalkenproblem helfen. Das ding soll sich prozentuell an die bildschirmhöhe anpassen.
link entfernt, da seite gerade überarbeitet wird.

edit: ich sehe gerade, firefox wirft den rechten layer ganz ducheinander. Werde mir das mal genauer ansehen.
edit2: problem teilweise gelöst. Für alle, denen es hilft: es muss in der .css datei auch unter "body" ein prozentwert für "height" definiert sein. Allerdings funktioniert das nur im IE, firefox ignoriert die prozentangaben. Habe den code aktualisiert.
edit3: Jetzt funktioniert es glaub ich mit beiden browsern. Code nochmal aktualisiert.

--------
Bleibt noch eine sache, die mich schon die ganze zeit beschäftigt: gibt es mit css eine möglichkeit, den inhalt (bilder und text) von layern in eine eigene datei auszulagern, so dass ich diese dann global für alle htmls verändern kann, ähnlich wie bei stylesheets? zB. der navigationsbereich, der ja auf allen seiten gleich ist. So müsste ich bei zukünftigen änderungen nicht jede einzelne datei ändern. Das wäre mehr als praktisch.

Wenn jemand noch feedback (zur hauptseite) abzugeben hat: nur her damit Smilie

sejuma · Beliebter [**User**] Anmeldung: 08.05.06 Beiträge: 490

zum Scroll-Problem:
versuch mal die Höhenangaben generell wegzulassen.

Layer auslagern:
geht mit css leider nicht, da kannst du nur Formatierungen hinterlegen.
Der Editor Phase 5 bietet aber unter "tools" eine Möglichkeit, dateiübergreifend einen bestimmten Code zu suchen und ihn gleichzeitig in mehreren Dateien durch einen anderen zu ersetzen.

jam · User [**User**] Anmeldung: 05.06.06 Beiträge: 11

Seite nun upgedatet. Das scrollproblem habe ich noch immer nicht ganz aus dem weg geräumt, weil IE6 kein "max-height" unterstützt, aber so wie es jetzt ist kann ich damit leben.

Danke nochmal an alle die bisher gepostet haben, würde mich über weitere kommentare zur neuen version freuen.

Und nachdem ich mich jetzt seit etwa 2 wochen mit webdesign beschäftige, ein tipp an alle die gerade anfangen (und geld invesitieren können und wollen, um dann weiter bei webdesign zu bleiben):

Probiert eine weile mit dreamweaver rum und erstellt eine kleine seite (30tage testversion bietet sich hier an, mir stand aber netterweise eine vollversion in der firma zur verfügung, weiss deswegen nicht ob die trial grosse einschränkungen hat). Am besten mit layern und/oder tabellen. Arbeitet damit so lang, bis ihr euch schon bisschen an dreamweaver gewöhnt und sich langsam eine eigene arbeitsweise herauskristallisiert. Und hier kommt der punkt, um sich ein dreamweaver-tutorialvideo zu bestellen, mir wurde eines von "total training" empfohlen (zugegebenermassen nicht ganz billig, aber man kann es ja nachher wieder zB. auf ebay stellen).

Ich habe in diesen paar stunden verdammt viel gelernt. Ich habs mir in einem rutsch angesehen, ohne die workshops mitzumachen, und dadurch, dass ich vorher schon etwas mit dreamweaver gearbeitet habe, habe ich mir fast alles sofort gemerkt und vieles an der arbeitsweise korrigiert.

Es gibt sicher eine menge anderer videotutorials und bücher da draussen, das von "total training" war aber wirklich sehr sehr gut.
Wie gesagt, wichtig ist es vorher per trial and error mit dreamweaver gearbeit zu haben, dann geht danach alles viel schneller.
Es wird bald noch ein ziemlich grosses update meiner seite geben, nachdem ich jetzt mit dem tutorialvideo fertig bin Smilie

Aber bevor ich das angehe wären weitere kommentare von euch sehr fein.