Website mittig anzeigen

Latta schrieb am 30.11.2012 um 15:12 Uhr

Hallo,

ich möchte gerne das meine Website immer mittig angezeigt wird - egal was für eine auflösung der jeweilige Betrachter hat.

Leider wird meine Website (natürlich momentan nur der Anfang) immer "links oben" angezeigt, dass geht aber nicht gut bei meiner Seite und deshalb hoffe ich auf Hilfe von euch.

Gerne könnt Ihr mal schauen unter http://www.gestuet-fuerstenhof.de/magix/

Danke

Kommentare

BeRo schrieb am 30.11.2012 um 19:14 Uhr

[...] ich möchte gerne das meine Website immer mittig angezeigt wird [...]

Meinst Du horizontal mittig oder absolut mittig, also horizontal und vertikal?

Im ersten Fall musst Du nichts tun. Der WD sorgt automatisch dafür, dass Webseiten horizontal mittig dargestellt werden. Vorausgesetzt, die Größe des vom Betrachter verwendeten Browserfensters ist mindestens genaus so breit, wie die anzuzeigende Website.

Dass Deine Beispielseite evtl. nicht in der horizontalen Mitte angezeigt wird, liegt an der unüblichen Breite von 1400 Pixeln (s. o.).
Wenn Du die Breite auf z. B. 1000 Pixel reduzierst, klappt das auch.

Solltest Du Deine Seite in der absoluten Mitte des Browserfensters anzeigen wollen, geht das auch.

Um die komplette Website auch vertikal zu zentrieren ist lediglich eine Codezeile nötig.

Nach dem Export der Website findet sich im Verzeichnis "index_htm_files" eine CSS Datei, mit dem Namen "xr_main.css"

Die Datei kann mit einem beliebigen Texteditor geöffnet werden.
Am Ende muss dann folgende Codezeile eingefügt werden:

-------------------
html {text-align: center; position: absolute; width: 100%; top: 50%; left: 0px; margin-top: -355px;}
--------------------

Der Wert für margin-top (hier -355px) sollte 50% der tatsächlichen Seitenlänge betragen, zzgl. einem evtl. gewünschten oberen Rand.

Die Funktion arbeitet mit dem FF und mit neueren Versionen des IE (ab Ver. 7), andere Browser habe ich noch nicht getestet.

Werden unterschiedlich lange Seiten im Projekt verwendet, kann die Funktion nicht sauber arbeiten.
Dann sollte alternativ der u. a. Code als CSS Code in den Head Bereich jeder einzelnen Seite eingefügt werden:

-----------------------
<style type="text/css">
html {text-align: center; position: absolute; width: 100%; top: 50%; left: 0px; margin-top: -355px;}
</style>

-----------------------

Auch dann gilt:
Der Wert für margin-top (hier -355px) sollte 50% der tatsächlichen Seitenlänge betragen, zzgl. einem evtl. gewünschten oberen Rand.

Nachteil der letzten Variante: Die Seite wird zunächst oben angezeigt und erst danach mittig zentriert. Abhängig von der Downloadgeschwindigkeit wird der Vorgang als "springen" der Seite wahrgenommen.
Wird die CSS Datei angepasst, tritt der Effekt nicht auf.

Viel Erfolg

Zuletzt geändert von BeRo am 30.11.2012, 19:14, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Latta schrieb am 01.12.2012 um 09:50 Uhr

Hallo BeRo,

danke für deine Antwort.

Verstehe ich das richtig, ich kann "horizontal" nur mittig sein wenn ich die seite verkleinere ?  "vertikal" soll die Seite oben sein - also nicht mittig !

Es muss doch möglich sein das die Seite immer auf allen Bildschirmgrößen mittig dargestellt wird, hoffe noch immer das ich etwas überlesen habe, würde ungern meine seite auf 1000 Pixel reduzieren.

Na vielleicht hast du ja noch einen Tipp ....

Ach ja, schau mal bitte hier, http://www.sportpferdeplatz.de/ daran habe ich mich orientiert und finde die Seite echt gelungen und dort geht es ja auch mit der "mittigen" Darstellung und diese Seite ist auch größer wie 1000 Pixel.

BeRo schrieb am 01.12.2012 um 21:08 Uhr

[...] dort geht es ja auch mit der "mittigen" Darstellung und diese Seite ist auch größer wie 1000 Pixel. [...]

Die Seite wurde mit einem anderen Editor erstellt, nicht mit dem Web Designer.

Klar, dass die Möglichkeiten mit einem echten HTML Editor vielfältiger sind. Allerdings nur, wenn Du profunde Kenntnisse in HTML-, CSS-, JavaScript-, PHP-, etc. mitbringst.

Auch der Web Designer lässt Dir Freiräume für Manipulationen, wenn Du zumindest einen Teil der o. a. Kenntnisse mitbringst.

Für Dein aktuelles Problem ist die automatische Ausrichtung auf die horizontale Mitte des Bildschirms allerdings so definiert, wie schon beschrieben.

Anpassungen sind möglich, mit entsprechendem Programmieraufwand.

Melde Dich bei Interesse gerne noch einmal. Ich bin sicher, dass sich dann eine Lösung (z., B. ein Script) finden lässt, mit dem Du klar kommen kannst

Zuletzt geändert von BeRo am 01.12.2012, 21:08, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Latta schrieb am 01.12.2012 um 22:56 Uhr

 

Hallo BeRo,

klar habe ich Interesse.

Man stelle sich mal vor man könnte Scripten, dann würde ich doch wahrscheinlich nicht auf ein solches Programm zurückgreifen müssen !

Ich würde es gerne so machen, weil ich finde wer eine größere Auflösung hat, der hat auch das Recht mehr zu sehen (hoffe du verstehst wie ich es meine) und wenn es dann mittig ist ist das eben gut zu lösen.

Dennoch finde ich es schade das ein solches Programm (denke mal an die Werbung - und als Anfänger glaubt man ja noch an Werbung) das nicht kann oder einen unterstützt.

Wenn ich nur mit Vorlagen arbeiten wollte, könnte ich das doch günstiger über 1&1 usw. günstiger.

Also ich habe interesse und wahrscheinlich noch andere auch !

Danke bis hierhin :-)

BeRo schrieb am 02.12.2012 um 22:24 Uhr

[...] Also ich habe interesse und wahrscheinlich noch andere auch ! [...]

Dann kommst Du um ein keines "Studium" nicht herum.

Die möglichen Lösungen sind mit so vielen Wenn und Aber versehen, dass man nicht nur mit einem kleinen Script ans Ziel kommt.

Wo die Probleme liegen ist auf etlichen Seiten im WWW z., T. sehr ausführlich beschrieben. Da findest Du auch genügende Codebeispiele zum Ausprobieren.

Klick mal hier und hier und auch hier, für eine erste Auswahl.

Wenn Du eine Suchmaschine mit dem Suchstring "Website horizontal zentrieren" fütterst, siehst Du schnell, was ich meine...

Nichts desto trotz, gerne viel Erfolg

Zuletzt geändert von BeRo am 02.12.2012, 22:24, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Latta schrieb am 03.12.2012 um 09:32 Uhr

Ok. ich glaube ich habe verstanden.

Schade nur das bei der im Beispiel aufgeführten Seite es scheinbar geht aber hier hast du ja schon geschrieben

Die Seite wurde mit einem anderen Editor erstellt, nicht mit dem Web Designer.

Nun denn, dann werde ich mal sehen was ich noch finden kann was mir gefallen könnte und eben die 1000er nicht überschreitet

Dennoch Danke 

Latta schrieb am 03.12.2012 um 11:39 Uhr

So, habe nun einiges versucht aber bin wohl doch zu ungeschickt, bei mir bleibt alles immer links egal was ich bei Body/Head eingebe - hast du noch nen Tipp ?

BeRo schrieb am 03.12.2012 um 23:47 Uhr

[...] bei mir bleibt alles immer links egal was ich bei Body/Head eingebe [...]

Es tut mir leid, dass Du nicht weiter gekommen bist.

Wie schon gesagt, die Problematik ist so vielschichtig, dass die Universallösung (noch) nicht gibt. Das echte Zentrieren einer Website ist mit Einschränkungen möglich. Es wird aber immer eine Kompromisslösung sein müssen, da eine dafür programmierte Funktion nicht in jedem Browser- bei jeder Bildschirmauflösung- bei jeder Größe des Browserfensters zuverlässig funktionieren wird.

Die akzeptable Kompromisslösung heißt: Zentrieren ja, aber nur wenn das Browserfenster breit genug ist. Andernfalls wird linksbündig ausgerichtet, damit der Betrachter mit dem eingeblendeten, horizontalen Scrollbalken, den Rest der Seite ansehen kann.
Das ist vermutlich der von Dir beobachtete Effekt, den Du als "bei mir bleibt alles immer links" bezeichnet hast.

Auch die von Dir als Beispiel angegebene Website wird linksbündig (nicht mittig) dargestellt, wenn das Browserfenster schmaler wird als die Seite.

Die kompromisslose, mittige Ausrichtung würde bei einem zu kleinen Browserfenster dazu führen, dass links von der Mitte aus dem Fenster gedrückte Objekte für den Betrachter nicht mehr erreichbar wären.

Also, vielleicht überdenkst Du Dein Projekt vor diesem Hintergrund noch einmal...

Gerne Viel Erfolg und einen schönen Start in die Woche

 

Zuletzt geändert von BeRo am 03.12.2012, 23:47, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Latta schrieb am 04.12.2012 um 09:17 Uhr

Hallo Bero,

ich hänge dir mal ein Bild an in dem du sehen kannst das ich die Seite zweimal aufegrufen habe.

Einmal mit 1024X768 und einmal mit 1920X .....

So sollte es sich dann darstellen, beim großen Fenster ist alles zu sehen und beim kleinen wird nur der wichtige Teil (der umfasst ja alle wichtigen Btn usw) mit 1024X768 gezeigt

Dann gibt es noch 800X600 da wird mir dann immer noch das wichtigste angezeigt nur das Bild ist eben nur noch halb so groß hmmmmm - getestet mit IE und Opera - und wer eine größere Auflösung hat sollte doch dann eh alles sehen können ??? oder bin ich deppert ??? must net darauf antworten ;-)


 

Latta schrieb am 05.12.2012 um 11:30 Uhr

Hallo,

ich habe heirzu nochmals eine Nachfrage.

Wo muss ich eigentlich deas Script einfügen welches es mir ermöglichen soll meine Seite mittig anzeigen zu lassen?

In der HTML oder unter "Webeigenschaften - Website - HTML-Code(body/head)" ?

Würde mir echt helfen wenn da mal jemand hilfreich aufklären könnte !

DANKE

BeRo schrieb am 05.12.2012 um 18:44 Uhr

[...] Wo muss ich eigentlich deas Script einfügen [...]

Das ist in erster Linie davon abhängig, welche Methode Du benutzt, um die Website auszurichten.

Es gibt Scripte, die Du direkt (manuell) in die xr_main.css Datei einbauen kannst.

Andere Scripte sind eventuell 2-teilig angelegt (CSS und JavaScript). Dann wird ein Teil in den Head Bereich- der andere in den Body gelegt.

Wieder andere, einfachere Scripte können direkt in den HeadBereich einer Seite eingebaut werden.

Idealerweise sollte der Anbieter des jeweiligen Scripts eine Info mitgeliefert haben, aus der hervorgeht, wie das Script zu verwenden ist. Wenn das nicht so ist, probier's zunächst im Head Bereich...

Viel Erfolg

Zuletzt geändert von BeRo am 05.12.2012, 18:44, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Sportpferde schrieb am 05.12.2012 um 21:44 Uhr

Ich springe hier gleich im Dreieck!!! Meine Seite mal eben nachbauen, die ich mir teuer ab erstellen lassen!

Latta schrieb am 05.12.2012 um 21:48 Uhr

Das dreieck kannste behalten und brasuchst keine angst haben, ich finde die Seite echt gelungen aber ich werde sie so nicht machen.

Ich wüsste zwar nicht was dagegen spricht, denn ich mache sie ja schließlich selbst aber ich habe verständniss für dein anliegen.

Ich bin rein Privat und habe nicht vor damit Geld zu verdienen und die Seite zu verkaufen oder oder oder 

Ach ja so sollte meine Seite eigentlich werden 

http://www.gestuet-fuerstenhof.de/endfassung/