Logo zwischen Website & Browserrand zentrieren

[lu87]

Hallo zusammen

Ich bin noch blutiger HTML-Anfänger und habe mal ne Frage:
Ich möchte gerne eine Homepage bauen, (siehe Bild)
Nun soll der Inhalt der Website (Breite 1000px) im Browserrand zentriert werden,
und das Logo (150x150px) soll jeweils immer in der Mitte zwischen Website und
Browserrand sein.

Hat jemand eine Ahnung wie ich mit HTML/CSS das Logo platzieren kann,
damit es stets in der Mitte ist?

 

[Cheffchen]

Hallo,
und was machst bei 1024 oder 800 auflösung?

Die Idee ist nicht gut und für das logo die fast ungünstigste position.
Wenn das dann zu groß ist hast horizontalen scroll was auch wieder misst ist.
also überlege dir das mal richtig.

Cheffchen

 

[lu87]

Ich habe für verschiedene Auflösungen CSS-Dateien gemacht,
damit sich das Layout jeweils anpasst.
Das Problem ist ich möchte ein Layout machen,
für Auflösungen ab 1300px, und für diese hätte ich gerne
das Logo rechts zentriert...

 

[threadi]

Webseiten interessieren sich nicht für Auflösungen sondern für Viewports. Denn jemand mit einer 1900er-Auflösung könnte auch mit einem Browserfenster surfen welches nur 800 Pixel klein ist.

Wenn Du Viewport-abhängige Ansichten haben willst, schau dir mal media-queries an.

Moderation: Verschoben von HTML zu CSS, da es eindeutig um Gestaltung geht.

 

[lu87]

Genau das habe ich gemacht.
So das sich das Layout automatisch an die Browsergrösse anpasst.
Nun aber mein Problem ist, dass ich für alle, welche ein grösseren Viewport wie 1300px
haben, ein Layout machen möchte, bei welchem sich das Logo zwischen dem 1000px
breiten Inhalt und dem Browserrand zentriert...

hat jemand eine Idee wie ich das am besten hin bekomme?

 

[Trüffelkrieger]

Hängt das Logo dann bei großen Viewports nicht ziemlich frei im Raum? Was spricht gegen einen festen Abstand zur restlichen Seite? (soll heißen: wieso unnötig kompliziert?)

 

[lu87]

Es ist eben vom design her, dass das Logo dort sein muss.
Gibt es überhaupt eine Möglichkeit das in CSS zu realisieren?

 

[threadi]

Positioniere das was Du so weit rechts haben willst absolut, ausgehend von der Box mit der festen Breite die immer zu sehen sein soll. Problem dabei könnte nur sein, dass sich dadurch dann auf kleineren Viewports ein horizontaler Scrollbalken ergibt. Den könnte man aber auch unterdrücken, auch wenn es für noch kleinere Viewports nicht optimal wäre (könnten nicht scrollen um alles zu sehen).

 

[lu87]

Hmm, hab ich nicht hingekriegt, das es schön dazwischen zentriert ist.
Ich habe mir überlegt ob eine Lösung per Javascript nicht einfacher wäre,
Wenn ich den Abstand vom Rechten Browserrand zum Logo errechne?
(z.B. Abstand = (Browserbreite 100% - 1000px) / 4)
so sollte ich ja zum Abstand kommen oder?

Hat jemand eine Idee, habe leider noch keine Erfahrung mit Javascript...