Webseite im Browser zentrieren.

  • Hallo!

    Habe mir mit Wordpress eine Webseite gebastelt und hatte dafür einen responsive Theme etwas angepasst.
    Nun wollte ich aber, dass die Seite kleiner und zentriert im Browser dargestellt wird.

    kleiner ist sie nun, aber leider jedoch linksbündig, wie kann ich sie nun zentrieren??

    MFG

    Erik

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ach, dass mit dem kleiner machen hat nun irgendwie doch nicht funktioniert.
    Habe nun die alte Style.css wieder in den Ordner kopiert.
    Nun ist wieder alles beim Alten, die Seite passt sich dem Browser an.

    Könnte mir mal jemand step by step erklären, wie ich die komplette Page nun auf meinetwegen 900px Größe reduziere und dann im Browser zentriere?

    Das wäre sehr nett :-)

  • Dann genügt es wohl nicht nur Deine CSS zu sehen, ohne die Seite dazu. Oder einfacher, Du kannst in der CSS auch #katzenfutter {} schreiben, doch wird das nur einer Katze schmecken, die in der Seite enthalten ist und die nicht durch einen übergeordneten Hund um den Genuss gebracht wird.

  • Es könnte auch am .layout-full #page-wrapper liegen, da steht bei width 100%. Aber wie Melewo und pixelig schon gesagt haben, ohne Link sehr schwierig.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • So...dann hab ich die Seite jetzt mal auf einen Server geladen, damit ihr mir bestmöglich helfen könnt.

    Aber nicht lachen, ist noch hässlich, besteht noch aus Platzhaltern und ist noch nicht fertig.

    Also mein Anliegen:
    Seite verkleinern und zentrieren.

    die URL: http://flug-ka106.de

  • Kommt mir etwas doppelt gemoppelt vor, doch wenn ich den ersten nur entferne, wird es auch nur linksbündig ausgerichtet.

    Code
    body.responsive.layout-full #page-wrapper {
        max-width: 100%;
    }
    
    
    body.responsive.layout-full #page-wrapper .full-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 1080px;
    }

    Tausche ich da aber dann die max-width: 100% gegen diese beiden Zeilen aus, wird es korrekt angezeigt.

    Füge ich dann Kommas hinter full und wrapper ein, so klappt es auch mit einem Eintrag und den ersten für body.... kann ich löschen:

    Code
    body.responsive.layout-full, #page-wrapper, .full-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 1080px;
    }
  • Geil!

    Absolut geil!

    Man, ich will das auch so drauf haben, hab mir direkt erstmal n Buch bestellt, über HTML und CSS....ich glaub ich muss da nochmal von grund auf anfangen. "Little Boxes" heißt das.


    Aber vielen Dank!

    Eine Frage noch....Der Farbwert rechts und links im Browser, wo steht der?

  • So, jetzt hab ich die Seite kleiner und im Browser zentriert.
    Jedoch kommt nun das nächste Problem:

    Ich möchte nicht, dass sich die Page dem Smartphone anpasst.
    Dass heisst, wenn ich mit dem Smartphone draufgehe, soll sie bitte so in der Form bleiben wie sie ist, nur eben kleiner. So dass ich dann reinzoomen kann usw.

    Wie funktioniert das?

  • Das wird wohl mit CSS Media Queries und mit responsiven Webdesign zusammenhängen und damit, dass unter einer gewissen Mindestbreite von Screen andere Stylesheets verwendet werden. Wenn Du mit Deinen bisher nicht vorhandenen Erfahrungen da eingreifen würdest, könntest Du Dein ganzes Design in eine Trümmerwüste verwandeln.
    Verstehe auch nicht den Sinn Deines Anliegens, warum sollte da auf kleineren Screens noch eine Auffüllung mit einem Hintergrund stattfinden, der doch nicht mehr als ein formatfüllendes Zugeständnis an größere Screens ist.

  • Also, ich glaube du hast mich falsch verstanden bzw. Hab ich mich falsch ausgedrückt.

    Hast du ein Smartphone zur Hand?
    Geh mal bitte Auf meine Seite http://flug-ka106.de

    Ich hätte aber gerne eine Darstellung wie beispielsweise diese:
    http://maniac-labs.com

    Vielleicht such ich mir auch einfach ein neues theme, welches schonmal so dargestellt wird und ich pass es wieder an.
    Wäre evtl. die einfachere Variante, oder?

  • Dass heisst, wenn ich mit dem Smartphone draufgehe, soll sie bitte so in der Form bleiben wie sie ist, nur eben kleiner.


    Und wenn sich die Webseite dabei anpasst und nicht so bleibt wie sie auf größeren Geräten dargestellt wird, nennt es sich responsive(s) Webdesign. Die meisten sind zufrieden und glücklich, endlich eine Webseite mit responsiven Webdesign zu haben, weil dadurch eine Browserweiche entfallen kann, die zwischen einer example.com und einer mobile.example.com je nach Screen oder Endgerät wechselt, nur Du möchtest wieder zurück zu einem starren Design.

    Ist doch ganz einfach, Du wirfst alle CSS Styles, die dafür verantwortlich sind und Media Queries hinaus und tauscht Prozentangaben gegen Pixel aus oder so.

    Und nein, ich habe kein Smartphone zur Hand. Dennoch kenne ich mich so halbwegs aus. In der Kurzfassung:

    http://de.wikipedia.org/wiki/Responsive_Webdesign

  • Das ist bei Deiner Seite noch viel schlimmer. Ich meine ich habe zwar kein Smartphone zur Hand, weil ich ja auch keins zur Hand habe, doch ab und an benutze ich mal dieses Ding:

    http://www.opera.com/de/developer/mobile-emulator

    Könnte sein, dass ich da nicht mehr die neusten Modelle zur Auswahl habe und wenn ich da ein älteres Nokia auswähle, dann sieht das irgendwie gar nicht perfekt aus, selbst wenn ich da zoome um mehr zu sehen. Siehe Screenshot.

  • Gut, meine Seite sieht nicht besser aus, wenn ich die Ansicht nicht drehe, wie ich gerade sah. Was aber wirklich gut geworden zu sein scheint, das sind die Angebote von Amazon, an denen ich zwei Tage wegen dieser responsiven Darstellung saß. Schaue Dir die Tabelle mit den 3 Büchern unten auf der Seite mal an und schiebe dabei ganz langsam Dein Browserfenster zusammen, die müssten eigentlich immer die richtige Breite haben:


    http://www.coder-welten.com/ausgewaehlte-a…h-onload-laden/

    Ähnlich könntest Du das bei Dir auch machen, wobei ein Wechsel von Tabelle auf einfache Listung erfolgt, wenn der Platz für eine Tabelle nicht mehr ausreicht.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!