Ausrichtung der Webseite im Browserfenster

Hallo winelady,

winelady schrieb:
Für die internationale Navi schwanke ich zwischen zwei Möglichkeiten, nämlich sie entweder ganz oben an den Rand des Browserfensters zu packen oder sie wie im Entwurf oben rechts neben das eigentliche Fenster zu stellen. Diese Möglichkeit finde ich übersichtlicher. Der Haken dabei ist, daß ich damit die Symmetrie aufgebe, denn rechts von der optischen Mitte ist die Sprachübersicht, links ist allenfalls das Mobilsymbol.

Es gäbe auch noch die Möglichkeit, den Herr Fuchs etwas nach links zu schieben (schlank genug sieht er ja aus) und rechts davon die internationale Navi zu platzieren.

winelady schrieb:
Welcher Meinung seid Ihr: unbedingt mittig ausrichten, oder vom linken Rand aus arbeiten? Und warum?

Mittig - damit hat der Besucher auch mit Favoriten-Leiste die Seite mittig im vorhanden Fenster. Bei einem erzwungenen Abstand müssten Sie, je nach Breite der Favoriten-Leiste eventuell nach rechts scrollen.

Gruß
hansen

Hallo Hildegard

Wirkt auf jeden Fall edler als das alte Design.

Die Frage die ich mir zusätzlich stelle ob statt des grauen Hintergrundes nicht besser euer Grün und sei es in transparenten Werten also als rgba Werte geeigneter wäre.

Das header Bild sehe ich als mögliche Variante an. die beiden Bilder im Wechsel per CSS Animation Deinen Schriftzug um die Linien kürzen etwas nach unten verschieben und neben das Bild.

Damit wäre links daneben noch genug Platz für die Sprachen und das mobil Symbol.
Bei dem mobil Symbol würde ich die Farben noch austauschen.

Ältere Browser die CSS Animation nicht verstehen sehen dann eben nur das eine Bild oder du müsstest mit etwas Javascript nachhelfen.

Gruß
Jörg

Hallo allerseits,

danke für die ersten Antworten.

@hansen:
danke, daß Du mich an den IE erinnerst, denn da ich ihn nie verwende, vergesse ich leider auch dessen Fav-Leiste.
Wenn ich unseren Boss nach links schiebe, gilt das auch für alle anderen Bilder auf anderen Seiten. Werd\'s ausprobieren.

@Jörg:
danke für Deine Ideen.
Mit den Farben spiele ich noch rum; im Moment geht es primär um die Anordnung der Elemente im Kopf, der des Kontrastes zu den Bildern wegen schwarz werden soll.
CSS-Animation? Wieder was gelernt! Muß ich 1. ausprobieren und 2. schauen, wieviele Besucher mit welchen Browsern unterwegs sind. Ab welchen Versionen funktioniert das denn? JS würde ich gerne vermeiden, allein schon weil ich keine Ahnung davon habe.
Das Mobilsymbol werde ich auf jeden Fall farblich anpassen, eventuell lasse ich das Wort "mobil" auch weg und vergrößere das Symbol etwas. Es muß links oben stehen, damit Mobilnutzer, die nicht automatisch weitergeleitet werden, es gleich finden können.

Gruß
winelady

Hallo winelady,

winelady schrieb:
danke, daß Du mich an den IE erinnerst, denn da ich ihn nie verwende, vergesse ich leider auch dessen Fav-Leiste.

das ist nicht nur beim IE so, zumindest bei FF und Opera auch. Bei Safari und Chrome habe ich das noch nicht probiert.

Gruß
hansen

Hallo zusammen,

@hansen: aha – ich nutze diese Seitenleisten nie, daher laufen sie völlig an mir vorbei… Danke für den Hinweis! Umso wichtiger, sie für die gute Darstellung im Auge zu halten.

Zur Browserkompatibilität für CSS3 habe ich eine Übersicht gefunden:

caniuse.com/css-animation

Hallo Winelady,

1. Ich finde der schwarze Hintergrund sieht hinter den Weinfotos edel aus, ich würde ihn aber bis zur schwarzen Linkleiste herunterziehen so das beide auf einer Höhe enden.
2. Bei den Links würde ich bei einer Farbe bleiben (grün), die Sprache und das Mobilsymbol also auch.
3. Der Balken rechts und links vom Schriftzug fuchs ist mir zu trennend, ich würde ihn dünner machen oder weglassen.
4. Ach ja, die Ausrichtung - für mich nur Mittig.

Viel Spaß beim Basteln

MfG KlausO

Hallo Hildegard

Versuche das mal auf den body zu legen

[css]body{background: linear-gradient(rgba(0, 51, 0, 0.3), rgba(0, 51, 0, 0.7)) #000000;}[/css]

Sollte meiner Ansicht nach noch besser wirken.

Im Grunde baut man für IE8 und IE9 bevor man die CSS Animationen anwendet eh schon eine Fallbacklösung. Man sieht dann halt eben nur eines von mehreren Bildern.

Falls die PN zu den Beispielseiten nicht ankommt wegen der CSS Animationen kannst du dich ja nochmal melden.

Halbfertige Seiten möchte ich nicht offen vorstellen.

Gruß
Jörg

Hallo zusammen,

danke für die weiteren Kommentare und Ideen. Eine neue, leicht angepaßte Version habe ich hochgeladen. Das Mobilsymbol ist nun leicht cremefarben, aber ich überlege noch, ob ich ihm nicht die 25 Pixel Rand gönne, damit es nicht in die Adresse läuft, wenn man das Browserfenster schmaler zieht.
Hintergrund unten gefällt mir mit Grün ganz gut; es nimmt dem Schwarz-Weiß-Kontrast etwas die Härte.

@KlausO: 1 und 3 hatte ich bereits ausprobiert; gefällt mir nicht so gut. Die Links sind grün geblieben, nur etwas dunkler geworden, besuchte Links sind schon immer blau.

@Jörg: welche Farben sollten denn bei dem Verlauf rauskommen? Lokal bleibt bei mir der ganze Hintergrund schwarz…

Beispiellink ist angekommen – danke – aber diese Form des Bildwechsels wirkt auf mich zu unruhig. Hier findest Du einige Beispiele, wie mit einem fading-Effekt gearbeitet wird: css3.bradshawenterprises.com/cfimg/

Hallo Hildegard

Sollte zumindest im Firefox vom einem dunklerem Grün nach unten einen Farbverlauf zu einem helleren Grün geben. Okay ich verzichte wohl besser darauf zu fragen in welchem Browser du testest.

Durch den schwarzen Hintergrund und den transparenten Grüntönen würde ich sagen es geht in Richtung Weinflasche.

Puh was deine Beispiele angeht ich weiss nicht ob ich das echt mit absoluter Positionierung umsetzen würde. Dann doch eher mit einer SVG wo ich 2 Bilder übereinander legen würde.
So richtig gefällt mir keine der Demos von der Umsetzung her gesehen.

Gruß
Jörg

Hallo Jörg,

joerg schrieb:
Okay ich verzichte wohl besser darauf zu fragen in welchem Browser du testest.

:mrgreen:
Aber: sobald die Seite im Prinzip steht, teste ich natürlich mit allem, was ich in die Finger kriege, sogar auf\'m PC.

Nachtrag: hab den Verlauf, auch im FF hingekriegt. Problem ist, daß die Seiten sehr unterschiedlich lang ausfallen, wodurch der Verlauf auf jeder Seite anders aussieht.

Puh was deine Beispiele angeht ich weiss nicht ob ich das echt mit absoluter Positionierung umsetzen würde. Dann doch eher mit einer SVG wo ich 2 Bilder übereinander legen würde.
So richtig gefällt mir keine der Demos von der Umsetzung her gesehen.

Hier verstehst Du mich anscheinend falsch: im Moment geht es ausschließlich (!) um die Optik, nicht um die technische Umsetzung. Die optimiere ich erst dann, wenn ich weiß, was ich optisch wirklich erreichen will.
Die neue Optik muß und soll auch nicht responsiv werden – eine eigene Mobilversion habe ich ja längst.

Gruß
winelady