Seite beim Aufruf zentriert darstellen

[DoNe]

Hey liebe ATler,

ich möchte eine Website im Singlepage-Stil bauen und zwar soll sie ein Panorama im horizontalen, sowie im vertikalen zeigen...
__________ __________ __________
¡ ¡ ¡ ¡
¡ ¡ 1 ¡ ¡
¡__________¡__________¡__________¡
¡ ¡ ¡ ¡
¡ 2 ¡ 3 ¡ 4 ¡
¡__________¡__________¡__________¡
¡ ¡ ¡ ¡
¡ ¡ 5 ¡ ¡
¡__________¡__________¡__________¡

Beim Aufrufen der Website soll die Box mit der Nummer 3 angezeigt werden.

Zu den restlichen Boxen soll man mittels JavaScript Scrollfunktion gelangen und die leeren Boxen bleiben ohne Inhalt und man wird sie auch nciht erreichen.

Ich habe jetzt einen Div mit einer Breite von 4500px und einer Höhe von 3000px definiert, welcher die anderen 9 Divs mit Breite 1500px und Höhe 1000px enthält.

Was muss ich nun tun, damit der Div in der mitte beim Aufrufen der Website als erstes angezeigt wird?

LG,
Done

 

[DubiDuh]

CSS auf das äußere DIV:

position: absolute:
top: -1000px
left: - 1500px;

Hab dir mal im Maßstab 1:10 was gebaut:

Anhang anzeigen apfeltalk.div.htm.zip

 

[DoNe]

http://www.megaupload.com/?d=7Q4PIWZY

Hilf mir mal bitte in meinem Quelltext...

Es funktioniert mit der CSS-Angabe nicht so 100%ig!

 

[hokage]

Ich verstehe dein Problem nicht so ganz. Hast du vll. eine Seite auf der dein Problem bereits erfolgreich umgesetzt wurde? Kannst du evtl. eine Bilddatei pisten, die dein Endergebnis zeigt. Mit dem bisherigen kann ich leider nichts anfangen.
Allgemein sei nur gesagt, dass man in 99% aller Fälle keine absoluten Positionierungen zum positionieren braucht. Der Browser positioniert die Elemente bereits automatisch. Den Rest macht man mit float, margin, passing und display.

 

[DoNe]

Also ich kenne bisher nur Seiten auf denen entweder horizontal oder vertikal gescrollt werden kann.
In der Kombination, so wie ich es jetzt vorhabe habe ich das bisher noch nicht gesehen...
Wenn ich jetzt für den allesumfassenden div nur die höhe und breite definiere und dann mit margin-top und margin-left arbeite wird das dann von jedem browser 100% gleich interpretiert?

 

[_linx_]

Eine ganz dumme Frage... Was machst du, wenn jemand eine Auflösung von 1024x768 hat und der nächste 2000x1300? Einfach so viel leerer Raum dazwischen...?

Und dumme Frage, aber wieso fängst du nicht in der Ecke oben links an? Wäre doch am Einfachsten?
Bzw für zum Scrollen - so wie ich das verstehe - benötigst du so oder so JS, wieso also nicht gleich mit JS positionieren?

 

[DoNe]

Die Fragen kann ich dir gern beantworten:

Die Auflösung des jeweiligen Users ist relativ egal.
Die gesamte Seite hat zwar eine Breite von 4500 PX und eine Höhe von 3000 PX und jede Box eine Breite von 1500 Px und eine Höhe von 1000 Px, aber der in den Boxen enthaltene Content wird eine maximale Breite von 700 Px haben. Der Zwischenraum dient nur dazu, dass man die nebenstehenden Contents noch nicht vorher einsehen kann.
Zusätzlich wird auf der Seite ja nur durch Buttons und dazugehörigem Javascript (Scrollto) navigiert.

Warum ich nicht oben Links anfange?
Weil ich insgesamt für diese Seite nur 5 Contents brauche und diese sich besser in "Kreuzform" anordnen lassen als irgendwie anders. Die Ecken sind sozusagen einfach leer (Weswegen icha uch eigenständiges scrollen deaktiviere).

LG,
Done

 

[_linx_]

Nagut, ich würde da sagen, die Boxen sind etwas zu klein, denke da an etwas höhere Auflösung bei 24 Zoll Bildschirmen... Aber das ist ja deine Sache.

Ich verstehe dein Problem noch nicht ganz. Wenn ich dich wäre, würde ich da jQuery verwenden, und mit CSS arbeiten. So etwa in diesem Stil (von mir ): http://weyermann-productions.com/ . Und das sollte wohl umzusetzen sein, oder?

 

[DoNe]

Die Größe sollte passen...
Ich arbeite ja am 27er iMac

Die Seite beim Aufrufen zentriert darzustellen würde im CSS EIGENTLICH mit top und left funktionieren, doch da ist das Problem, dass das ja dann in jedem Browserfenster etwas anders aussieht, wegen der verschiedenen Auflösungen der User.

Deshalb möchte ich die Seite genau zentriert starten lassen. Also so, dass die mittlere Koordinate 2250/1500 auch genau in der MItte des jeweiligen Browserfensters steht.

Und dazu fehlt mir ein befehl im CSS und wie das mit JavaScript geeht weiß ich net...

 

[_linx_]

Ich habe dir den Code ja dazu geliefert, wenn du dir die Seite angesehen hättest, die ich verlinkt habe. Und ausserdem ist das hier kein Wunschkonzert Für 20 oder 30 Euronen liefere ich dir auch den fertigen Code, ansonsten musst du das ja schon selber zusammenbasteln...

Mit diesem Code wird ein Bild zentriert dargestellt. Höhe und Breite des Bildes musst du selber angeben - könnte man aber auch erkennen... Du müsstest da vermutlich die Breite und Höhe deines divs eintragen.

var imgWidth = 800;
            var imgHeight = 225;
            var imgOldPos = $('#logo').position();
            var winWidth = $(window).width();
            var winHeight = $(window).height();


            /* calculate new img position */
            var newX = winWidth / 2 - imgWidth / 2;
            var newY = winHeight / 2 - imgHeight / 2;
            
            /* refactor anything */
            $('#logo').css({ 'left': newX + 'px', 'top': newY + 'px', 'width': imgWidth});

Viel Spass beim probieren

 

[C64]

Du bist zu günstig _linx_ oder lieferst dann nur unsauberen Code Im ernst: Wenn du sowieso schon auf JS setzt, dann solltest wirklich alles mit JS positionieren und wie im Beispielcode die Browserhöhe und -breite abfragen (und übrigens bei einem .resize() alles wieder anpassen!).

Damit ist es wirklich relativ einfach zu erstellen, weil du alle Boxen von der Größer her an die ausgelesene Browsergröße anpasst. Dann nur noch das Scrollto über Navigationselemente lösen und fertig. Solche Seite habe ich übrigens schon viele gesehen

 

[_linx_]

Nagut, zu günstig... Ich denke für 30 Euronen hätte ich eher einen Auftrag bekommen als für 300 und ich will ja nicht meine Lebensunterhalt damit finanzieren, ist nur ein Hobby...

Ist die Kritik an meinen Code gerichtet? Der ist drum vielleicht nich perfekt, war aber auch für eine zack-zack-Seite von einem Kollegen, die nur funktionieren musste und überhauot nicht perfekt sein muss