Schmale Webseite auf breitem Bildschirm mittig platzieren - seltsamer Farbeffekt

[Hannebambel]

Hallo,

ich bin absoluter newbie auf dem Gebiet des Webdesigns. Seit ein paar Wochen versuche ich mich an der Umstellung einer ursprünglich in TYPO3 vor vielen vielen Jahren erstellten Webseite auf WordPress. Dazu habe ich LocalWP installiert und VSCode. Wenn ich glaube ein Problemchen gelöst zu haben, bekomme ich das nächste... Aufgrund meiner Unkenntnis der Materie komme ich offensichtlich nicht dahinter woran das ein oder andere liegt...

Die Homepage hat auf allen Seiten grundsätzlich am oberen Rand ein horizontales Navi-Menü und ein weiteres vertikales linksseitig angedordnet. Das habe ich soweit hinbekommen. Allerdings funktionierte das noch nicht so wie ich wollte hinsichtlich der Anzeige auf Desktop, Smartphone usw. Auf meinem S24 passt die Seite von der Breite her nicht ganz auf den Bildschirm. Das versuche ich gerade zu lösen... Aus dem Code der ursprünglichen Seite konnte ich entnehmen, dass dort im Stylecss unter den Tags page und head der width-wert auf 980px festgelegt wurde. Bei mir liegen alle Elemente im body. Als ich nun dem body tag einen max-width von 980px mitgegeben habe, wurde der Bereich entsprechend begrenzt. Allerdings wanderte der auf meinem (ich glaube 32Zoll) Bildschirm komplett an den linken Rand. Nach etwas Googeln fand ich einen Hinweis in dieser Art:

html {
width:980px;
align-content: center;
position:absolute;
left:50%;
margin-left:-490px;
}

Tatsächlich wurde die Seite damit mittig auf meinem Bildschirm ausgerichtet. Allerdings zeigte sich dabei ein unerwünschter Nebeneffekt. Wenn ich nun mit der Maus irgendwo auf den Seitenhintergrund (also egal wohin - nur nicht auf die Menü-Buttons) klicke, bekommen die Menüpunkte der Firefox-Wordpress-Leiste einen blauen Hintergrund. Ebenfalls wird ein solcher blauer Hintergrund zwischen den Buttons des horizontalen NavMenüs sichtbar. Dabei ist es egal, ob ich im body ein Hintergrundbild einsetze oder nicht (siehe Anhang). Wenn ich hier jedoch anstatt "absolute" "relativ" verwende, besteht das Problem nicht mehr. Könnte mir zwar jetzt egal sein, wenn das Problem damit gelöst wird, frage mich aber trotzdem nach dem Grund dafür...

Hat da jemand eine Erklärung für mich? Ich verwende ja momentan auch bei den Buttons und den Flexboxen usw. manchmal "absolute". Das hatte aber keine derartigen Auswirkungen auf die Seite...

Danke!!!


Hannebambel

 

[tk1234]

Nach etwas Googeln fand ich einen Hinweis in dieser Art:

Der Hinweis taugt nichts, es gibt da bessere Methoden, bei Selfhtml steht auch warum Pixel als Einheit falsch ist. Mehr lässt sich zu deinem Problem anhand des gezeigten Codes nicht sagen - das sinnvollste wäre die Seite zu verlinken bzw. ein Fiddle zu nennen auf dem man sich das Problem anschauen kann.

 

[Hannebambel]

Stimmt... gibt besseres.
Habe jetzt in html

max-width: 61.25em;
margin: 1em auto;

eingesetzt. Seite wird so auf meine breiten Bildschirm zentriert und absolut/relative usw. ist nicht mehr notwendig.

Danke für den Tipp. Der Link ist Gold wert.

Hätte noch eine Frage zur Höhe eines Bereichs. Ich werde mehrere Seiten auf der Homepage erstellen. Bei manchen ist die Gesamthöhe durch die vorhandenen Elemente "fix". Diese Seiten sollen im oberen Bereich einen Slider bekommen, der immer gleich groß ist nur halt verschiedenen Bilder zeigt. Darunter kommt ein unterschiedlicher Text. Die Seitenhöhe bleibt aber immer unverändert.

Bei anderen Seiten werden im unteren Bereich eine unterschiedliche Menge an Bildern eingefügt. Die Höhe dieser Seiten ist also immer abweichend. Mal sind dort 5 Bilder, mal 20 usw.

Die eigentlichen Seiten habe ich noch nicht angefangen. Ich bin aktuell noch am Grundcode der für alle Seiten gelten soll. Also die Navigation am oberen Rand, die Navigation auf der linken Seite und der Footer.

Bevor ich diese "Fixen Seiten" erstelle, bin ich jetzt dabei, deren zusätzlichen Code (also für den Slider und den Text darunter und den Footer) erstmal hier im Grundcode zu versuchen, damit ich sehen kann, ob es so funktioniert, wie ich es möchte.

Meine Seiten haben alle einen Hintergrund, der den gesamten Bildschirm bedeckt. So ein Tapetenmuster (kann man auf dem Bild in meinem ersten Post sehen). Der eigentliche Inhaltsbereich ist auf 980px in der Breite begrenzt (hab ich vom ursprünglichen Layout übernommen). Dieser soll einen weißen Hintergrund bekommen. Die Seiten haben also alle sozusagen mittig einen 980px breiten weißen Streifen, auf dem dann der eigentliche Inhalt platziert werden soll.

Neben dem Umstand, dass ich noch nicht so richtig geblickt habe, wie es sich mit der Hierachie der einzelnen Elemente untereinander verhält, komme ich nicht dahinter, wie ich den Footer ganz unten korrekt positioneren kann. Ich dachte ich verwende dazu für den eigentlichen weißen Hintergrund-Bereich (habe ich page genannt)
display: flex
Height: 100%;

Auf meinen Bildschirm ist der Footer (nur zwei Zeilen Text) dann aber nur etwa zur Hälfte zu sehen.
Der Footer ist ebenfalls ein "Display Flex" Bereich. Wenn ich den mit margin-top: auto; ausstatte, wandert der nach unten. Aber:

Warum sind 100% mehr als der Anzeigebereich meines Bildschirms? Dachte 100% ist der untere Bildschirmrand. Offensichtlich nicht. Verwende ich im page height 95% hört der weiße Bereich etwa 5mm vom unteren Bildschirmrand entfernt auf und der Footer ist vollständig zu sehen. Ich hätte es aber doch gerne so wie beispielsweise hier auf der Forumsseite. Tippe ja gerade meinen Post und sehe hier ganz unten am Bildschirmrand das kleine Forums-Navi (Startseite > Foren usw.).

Was passiert mit Seiten, die viele Bilder unten bekommen (da muss man ja scrollen, um die zu erreichen)? Geht das dann überhaupt, wenn ich nur 95% verwende (falls nicht, würde es bei 100% funktionieren)?

Danke und LG

 

[MrMurphy]

Mit deinen bisheringen Angaben können wir dir nicht konkret helfen. Wir können dir nur allgemeine Infos geben und müssen dabei auch noch viel raten und vermuten. Wir wissen auch nicht, ob du die Seite nur für dich erstellst oder auch Besucher erwartest, die also veröffentlichen willst.

Meine Meinung aus deinen bisherigen Angaben:

Du hast HTML und CSS grundsätzlich überhaupt noch nicht verstanden. Zudem hast du nicht mal ansatzweise versucht die Regel zu lernen.

Aktuell machst du die Seite nur für dich. Du siehst dich als Idealperson und deine Vorstellungen müssen auch die Besucher deiner Seite super finden. Deine "ästhetischen" Vorstellungen sind das weltweite Ideal. Eine Grundursache für schlechte Webseiten.

Feste Größen (Breite und Höhe) von Webseiten sind eines der schlimmsten Übel für Besucher. Deren Browserfenstergröße stimmt mit deiner meist überhaupt nicht überein.

Bei der Höhe von Webseiten gilt deshalb der Grundsatz, das sie so hoch werden wie der Inhalt es erfordert. Wenn sie schmaler werden, werden sie gleichzeitig höher. Wichtig: Besucher wollen und sollen nur senkrecht scrollen müssen, nicht waagerecht. Bilder am Ende unterzubringen ist also kein Problem.

Allerdings sollen Webseiten nicht unnötig schmal werden, weil sonst unnötig viel gescrollt werden muss. Bestimmte Webseitenbreiten (wie 980px) waren und sind unsinnig. Die Webseite sollte so breit sein, wie sinnvoll und erforderlich. Das hängt allein vom Inhalt ab (den wir in deinem Fall nicht kennen). Kurz: Die Breite einer Webseite hängt vom Inhalt ab, nicht von irgendwelchen unsinnigen Zahlen, die leider immer noch verbreitet werden.

Du verwendest eventuell "flex" obwohl wahrscheinlich andere Möglichkeiten sinnvoller sind.

Die Auswirkungen von Prozentangaben auf unterschiedliche HTML-Elemente füllen ganze Buchkapitel. Dahinter steckt keine Logik, sondern die sind zu Beginn von CSS entstanden und wurden beibehalten, damit auch alte Webseiten in aktuellen Browsern korrekt angezeigt werden. Stichwort: Abwärtskompatibilität. Das gilt auch für viele andere CSS-Angaben. Das alles aufzuzählen sprengt die Möglichkeiten eines Forums.

Soweit meine persönliche unsachliche Meinung.

Für das Erstellen von Webseiten hat sich folgendes Vorgehen bewährt:

Zunächst wird der komplette HTML-Quelltext (das ist genau wie CSS kein Code) erstellt. Dafür gibt es feste Regeln, ähnlich wie Rechtschreibung und Grammatik. Dabei werden nur wenige (sehr wenige) CSS-Angaben verwendet, die grundsätzlich sinnvoll sind. Dabei ist Divitis (unnötige oder nur div-Elemte als Container) oder unnötiger, aufblähender HTML-Quelltext vermeinden.

Wenn der HTML-Quelltext fertig ist wird die Optik (um die es dir wahrscheinlich nur geht) mittels CSS für die Besucher (also nicht dich) verbessert.

Danach können Webseitenersteller ihre persönliche Note einbringen. Aber nur insofern, als sich die Darstellung für Besucher nicht verschlechtert, also ganz dezent.

Wenn du von deinen Besuchern etwas erwartest oder gar forderst (zum Beispiel: Optimiert für Vollbild oder ähnlichen Unsinn) ist deine Webseite Schrott.

Wenn du Content-Management-Systeme (CMS) und deren Zusatzprogramme verwendest musst du die zusätzlich zum HTML und CSS gut lernen. Das sind keine Programme um Wissenslücken in HTML und CSS auszugleichen.

 

[Sempervivum]

@Hannebambel Frage von meiner Seite: Du schreibst anfangs, dass Du die Seite in Wordpress erstellst. Dein zweites Posting #3 liest sich jedoch, als ob Du sie von Hand mit HTML und CSS erstellst / erstellen willst? Wordpress verstehe ich so, dass man ein Template hat, das die grundlegende Struktur bereit stellt und wo man dann nur noch die Inhalte ändert.

 

[Sempervivum]

@Hannebambel

komme ich nicht dahinter, wie ich den Footer ganz unten korrekt positioneren kann.

Das ist eine Standardaufgabe beim Layout und ich kenne im wesentlichen zwei Muster, mit denen man das erreichen kann:

1. Mit position: sticky;

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Layout Footer Bottom Sticky</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            /* Die Elemente sollen mit Flex unter einander
            angeordnet werden: */
            display: flex;
            flex-direction: column;
        }

        main {
            /* Der Container soll nach unten wachsen,
            so dass er den freien Platz ausfüllt: */
            margin-bottom: auto;
        }

        footer {
            /* Der Container soll am unteren Rand des
            Browserfensters kleben ohne aus dem
            Textfluss heraus zu fallen: */
            position: sticky;
            bottom: 0;
            /* Der Hintergrund (main) soll nicht sichtbar sein: */
            background-color: white;
            font-size: 1.5em;
        }
    </style>
</head>

<body>
    <main>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
        augue duis
        dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
        commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
        dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
        delenit
        augue duis dolore te feugait nulla facilisi.

        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
        possim
        assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
        laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit
        lobortis nisl ut aliquip ex ea commodo consequat.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat
        nulla facilisis.

        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem
        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur
        sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et
        invidunt
        justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est
        Lorem ipsum
        dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    </main>
    <footer>
        This is the footer
    </footer>
</body>

</html>

 

[Sempervivum]

2. Indem der main-Container scrollbar gemacht wird:

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Layout Footer Bottom Flex</title>
    <style>
        html,
        body {
            /* html und body sollen das Browserfenster
            in der Höhe ausfüllen */
            height: 100%;
        }

        body {
            margin: 0;
            /* Die Elemente sollen mit Flex unter einander
            angeordnet werden: */
            display: flex;
            flex-direction: column;
        }

        main {
            /* Dieser Container soll die
            freie Höhe vollständig ausfüllen: */
            flex: 1;
            /* Passt der Inhalt nicht hinein, soll der Container
            in y-Richtung scrollbar werden: */
            overflow-y: auto;
        }

        footer {
            font-size: 1.5em;
        }
    </style>
</head>

<body>
    <main>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
        augue duis
        dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
        commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
        dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
        delenit
        augue duis dolore te feugait nulla facilisi.

        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
        possim
        assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
        laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit
        lobortis nisl ut aliquip ex ea commodo consequat.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat
        nulla facilisis.

        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem
        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur
        sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et
        invidunt
        justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est
        Lorem ipsum
        dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    </main>
    <footer>
        This is the footer
    </footer>
</body>

</html>

Was passiert mit Seiten, die viele Bilder unten bekommen (da muss man ja scrollen, um die zu erreichen)? Geht das dann überhaupt, wenn ich nur 95% verwende (falls nicht, würde es bei 100% funktionieren)?

Das geht und wird von meinen Beispielen korrekt gehandhabt: Passt der Inhalt des main-Containers nicht mehr in den verbleibenden Bereich des Browserfensters, wird entweder die ganze Seite oder der main-Container scrollbar gemacht.

Warum sind 100% mehr als der Anzeigebereich meines Bildschirms?

Häufig liegt das daran, dass height: 100%; die Höhe ohne padding und border fest legt. Padding und border kommen hinzu, so dass der Container größer wird als die Höhe des Browserfensters.

Aber genau kann man deine Fragen nur beantworten, wenn man das vollständige HTML und CSS sieht. Wenn die Seite online ist, dann poste die URL.