Designumsetzung in CSS

[Xtremo]

Hallo alle zusammen. Es geht um das Design.

http://www.anime-commando.de/Haus_Bo...g2-Entwurf.jpg

Dieses möchte ich in CSS umsetzen, welches ich zum größten Teil gemacht habe, aber da ich ein CSS-Neuling bin, wollte ich wissen, ob die Umsetzung richtig ist.

http://www.anime-commando.de/bockey2

http://www.anime-commando.de/bockey2/css/style.css

Erst zu den Problemen.

1. Das obere Menü wird in Firefox 1.5 anders dargestellt als in 2.0

2. Auf der Seite sind zwei gleiche Menüs in unterschiedlicher Form zu sehen. Ich möchte beide Menüs miteinander verbinden. Das heißt, wenn ich auf Startseite klicke, dann soll der Rollover bei beiden Menüs aktiv werden und das auch umgekehrt.

3. PNG-Dateien werden in IE leider nicht unterstützt. Problem ist nur, dass Messer und Gabel einen Schlagschatten haben, welcher als GIF nicht richtig dargestellt wird. GIF setzt ein weißen RAND um den Schlagschatten.

4. Beim schnellen verkleinern und größeren der Webseite sieht man, wie der Textinhalt sich mit bewegt. Es sollte normalerweise so aussehen, wie ein fester Bestandteil der Seite.

5. Wenn ich die Seite verkleinre, dann sind die Abstände links und rechts außerhalb der Karte unterschiedlich.

6.Was für Fehler wurden gemacht und welche Änderungen sollten gemacht werden?

7. Vorallem kriege ich es nicht hin, dass sich die Seite mittig automatisch je Fenstergröße positioniert. Links und Rechts hat es geklappt, aber nicht oben und unten. Da mußte ich ein padding von 50px setzen.

Schon mal ein großen Dank für die Hilfe.

[pekka]

Hmmmm. Schick!

1. Screenshots bitte

2. Geht nur mit Javascript. Stichwort getElementById() und die Eigenschaft "className".

3. Das ist leider so und nicht zu ändern. Entweder GIF oder JPEG mit Holz-Hintergrund (gibt bei dynamischer Positionierung aber häßliche Reißer) oder dem transparenten GIF eine Hintergrundfarbe geben, die passt (also einen Durchschnitt der Brauntöne drumrum).

4. Bei mir bewegt sich da nichts.

5. Fiel mir erst beim ganz genauen hinschauen auf (FF1.5.0.7 bei 1280x1024). Finde ich vernachlässigbar.

6. Ich finds gut. Quelltext hab ich mir jetzt nicht im Detail angeschaut (grad zu faul) aber so ein Design in validem XHTML strict ist schon ne Leistung. Schön!

7. Google, z.B. das hier.

[Xtremo]

Vielen Dank für die schnelle Antwort. So sieht es in FF1.5 aus.

http://www.anime-commando.de/ff1.5.jpg

So ungefähr in FF2.0

http://www.anime-commando.de/Haus_Bo...g2-Entwurf.jpg

Es geht halt nur um die Ausrichtung des Menüs.

Und du hast nicht zufällig ein Beispiel zu getElementById()? Hatte schon google danach durchforstet, aber nichts konkretes gefunden gehabt.

Update: Ich arbeite eigentlich nur mit nem Editor, aber es gibt Mitarbeiter die mit dem Dreamweaver arbeiten. Problem ist nur, wenn ich mal weg bin und an den Seiten was geändert werden muß, kommt der Mitarbeiter nicht zurecht, weil die Seiten im Dreamweaver nicht richtig dargestellt werden. Woran kann das liegen? In Dreamweaver MX z.b verschwindet das Messer weit recht. In Dreamweaver 2004 kann man die Seite kaum erkennen, so zerstückelt ist die.


Update: Ich arbeite eigentlich nur mit nem Editor, aber es gibt Mitarbeiter die mit dem Dreamweaver arbeiten, wofür ich eigentlich nicht wäre. Problem ist nur, wenn ich mal weg bin und an den Seiten was geändert werden muß, kommt der Mitarbeiter nicht zurecht, weil die Seiten im Dreamweaver gar nicht richtig angezeigt werden. Woran kann das liegen? In Dreamweaver MX z.b verschwindet das Messer weit recht. In Dreamweaver 2004 kann man die Seite kaum erkenne, so zerstückelt ist die. Poitionierungen sind durcheinander, aber ich denke mal, dass sie das überhaupt nicht vermeiden lässt, oder?

http://www.anime-commando.de/bdw.jpg

[Xtremo]

Sehr komisch. Auf der Arbeit habe ich auch Firefox 1.5, aber da ist das Menüproblem nicht zu sehen.

[pekka]

Original geschrieben von Xtremo
Sehr komisch. Auf der Arbeit habe ich auch Firefox 1.5, aber da ist das Menüproblem nicht zu sehen.

Da wird irgendwo etwas Platz fehlen, sodaß nicht alle in die Reihe passen. Da würde ich pauschal rechts und links ein paar Pixel zugeben und gut ist.

[Xtremo]

Hallo peka,

habe da ein paar Probleme mit der Darstellung.

www.anime-commando.de/ff1.5.jpg Firefox 1.5
www.anime-commando.de/ie-6.jpg Internet Explorer 6

Auf der Arbeit habe ich auch 1.5, selbe Auflösung und da wird das Menü problenlos ausgegeben.

Beim IE wird das Menü auch anders positioniert und was mich vorallem stört, dass der rechte Textinhalt nach links verschoben wird.

Noch mal danke für die Hilfe.

[TobiaZ]

Schau mal nach, ob du den schriftgrad im browser gändert hast.

Strg + 0 sollte alles in einer Zeile anzeigen.

[Xtremo]

Leider keine Änderung.

[TobiaZ]

Aber wenn du die schrift im browser kleiner machst, passt es in eine Zeile?

Und danach dann noch mal strg + 0

[Xtremo]

Ich kann sie schon kleiner machen, aber dann müßten die Benutzer das genauso tun. Die Schrift ist bei mir auf Originalgröße eingestellt. Browser habe ich zurück gesetzt und von der Schriftgröße passt es auch zum IE.

[TobiaZ]

Hmm, das ist natürlich suboptimal. Kanns mir auch gerade nicht erklären.
Habs grad noch mal mit dem IE 6.0... verglichen. Der verschieb die navi bei mir nach rechts. Aber schriftgrößen sind ähnlich.

[Xtremo]

Ich könnte natürlich die Navi entfernen, aber das wäre nicht im Sinne des Kunden. :>