• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schmale Webseite auf breitem Bildschirm mittig platzieren - seltsamer Farbeffekt

Hannebambel

Neues Mitglied
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
 

Anhänge

  • blau.png
    blau.png
    728 KB · Aufrufe: 7
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
 
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.
 
@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.
 
@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;
Code:
<!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>
 
2. Indem der main-Container scrollbar gemacht wird:
Code:
<!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.
 
@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.
Sorry, wenn ich hier etwas weiter aushole... muss das erst vielleicht etwas erklären...

Ich bin ja nicht mehr der Jüngste (1963) und habe mit Webdesign/Programmieren überhaupt nichts zu tun. Es ist mir schon öfter mal passiert, dass ich (vermute ich jedenfalls) aufgrund meines Alters und Erfahrungen möglicherweise viel zu kompliziert denke und einfach nicht glauben kann, dass manche Dinge vielleicht einfach nur "so einfach" sein können, wie sie es eventuell sind (oder auch nicht :cool:)...egal

Da ich momentan etwas "Luft" im Job habe aber jetzt nicht nur auf der Coach vor der Glotze herumsitzen wollte (wer rastet der rostet), bin ich auf die Idee gekommen, mich "endlich" mal mit diesem Thema hier zu beschäftigen.

Vorneweg: Grundsätzlich versuche ich immer erst einmal alles alleine hinzubekommen. Und da versuche ich mich dann schon eine ganze Weile dran bevor ich überhaupt auf die Idee komme, um Hilfe zu bitten. Ich bin an diesem Thema jetzt inzwischen etwa 14 Tage täglich bestimmt 8-10 Stunden am knobeln...

Die alte Seite in Typo3 hatte mit Wordpress nichts zu tun; wurde bei IONOS gehostet. Die Seite wurde sicherlich schon vor 15 Jahren oder mehr erstellt. Die wurde m. w. eigentlich nie gewartet. Auch schon vor ein,, zwei Jahren bin ich da das erste mal zufällig drüber gestolpert, als ich bei meiner Schwiegermutter zufällig im Büro eine Rechnung von Ionos in die Finger bekam. Da wurde für einen "erweiterten PHP-Support" monatlich 40 oder 50 Euro berechnet. Ich habe damals dann mal dort nachgefragt was es damit auf sich hat. Da sagte man mir, die Seite sei halt uralt und liefe ich meine noch mit PHP 4.x oder so ähnlich. Inzwischen wäre 7.x aktuell und dafür, dass die eben -eingeschränkt- noch am Laufen gehalten würde, kostet das eben entsprechend... Außerdem wäre auch der Inhalt total veraltet, Datenschutz usw. wäre nicht auf dem Stand und könnte Abmahnungen zur Folge haben. Wie schon mal erwähnt, ist das Ding eigentlich schon seit ein paar Jahren nur noch Hobby und ein Verlustgeschäft. Wir bringen das einfach nicht übers Herz, den Laden dichtzumachen, solange Schwiegermutter das noch mitbekommen würde.... vertreibt mir also nur meine Zeit und kostet mich Nerven...

Von Ionos gab es auch schon vor ein, zwei Jahren mal eine Werbung, von wegen Hosting/Webseite mit Wordpress - sehr günstig. - usw. usw. Über die bin ich zufällig gestoßen und habe mal mit denen telefoniert. Die sagten mir dann, ich könne Wordpress dort kostenlos aktivieren und dann selbst "basteln/versuchen/" die Seite dort umzubauen. Erst wenn sie dann sozusagen fertig ist, könnte ich sie "wieder" veröffentlichen. So ging das ganze dann los....

Zum Thema:

Erst nach und nach beim Googeln, habe ich gemerkt, dass der Aufbau mit Wordpress wohl vollkommen unterschiedlich zum Aufbau nur mit HTML/CSS ist. Ich tanze also tatsächlich (noch) auf zwei Hochzeiten.

Ich habe erstmal WPLocal laufen: Dort habe ich Wordpress installiert, ein frei verfügbares Thema nach einer Anleitung heruntergeladen und dort aufgesetzt. Dazu fand ich eine Anleitung, wie man dieses Theme für Wordpress "umbaut". Das habe ich gemacht und dort nun ausschließlich in den Dateien index.php, meiner eigenen Style.css und einer eigenen .js herumprobiert. Dabei bin ich dann auf die besagten Probleme gestoßen... (blauer Hintergrund der Menüleiste....)

Zuvor habe ich aber erstmal direkt bei Ionos versucht, die Seite offline aufzubauen. Dort habe ich Elementor eingesetzt und merkte jetzt erst (Asche auf mein Haupt), dass das dann wohl eine völlig andere Sache ist....

In der WPLocal Version hatte ich bisher die Seitennavigation soweit erstellt, dass der Button-Hintergrund ein Bild verwendet, das bei hover und active wechselt. Auch ist es mir dort gelungen, dass der zuletzt geklickte Button den Aktiv-Status behält.

Nun wollte ich das bei der Ionos Version einbauen (weil ich da bereits verschiedene Seiten teilweise erstellt hatte).

Und jetzt merke ich langsam, dass die dortigen Elementor-Elemente völlig unabhängig von den rein mit html/css erstellten Buttons sind. Da bin ich beim Versuch, den Elementor-Buttons dieses Hintergrundbild zuzuweisen, drauf gekommen. Dort kann man ja auch "zusätzliches CSS" einbauen. Das habe ich versucht und dachte... warum wird mir dort dieser Button-Hintergrund nicht angezeigt. Bis ich gemerkt habe, dass der zwar da ist, aber vom Elementor-Button-Hintergrund überlagert wird. Nachdem ich diesen Hintergrund "durchsichtig" eingestellt habe, sehe ich jetzt das Hintergrundbild.

Beim Versuch, das ganze jetzt auch noch für kleinere Bildschirme anzupassen, bin ich aufs nächste Problem gestossen. Die Buttons haben keinerlei Border. Man sieht einfach nur dieses Hintergrundbild (was vermutlich mit dem eigentlichen Button-Element nix zu tun hat). Bei Elementor kann man ja die Ansicht auf diverse "Geräte" einstellen (Desktop/Tablet/Smartphone). Die Elementor-Buttons habe ich mit durchsichtigem Hintergrund/ohne Rahmen/durchsichtigem Hover Hintergrund und auch zudem noch durchsichtiger Rahmenfarbe eingestellt.

Hintergrund/Buttonbreite/Höhe und hover/active/focus werden über die CSS gesteuert.

In der Desktop-Ansicht wird bei hover die Schriftfarbe korrekt gewechselt und nach dem klick wechselt die Schriftfarbe nochmal und bleibt auch so.

Wenn ich das ganze dann in der Smartphone-Ansicht anzeigen lassen, zeigt sich dort mitten auf dem geklickten Button (hab mal Bild angehängt) ein kleiner Rahmen hinter dem Text in der gleichen Farbe, wie der Text. Wie gesagt, in keiner der Button-Einstellungen ist ein Border aktiviert. Woher kommt also das Ding? Im CSS code ist auch nix davon enthalten.

Das sind dann die Momente, an denen ich denke, lass es einfach... du bist zu blöd dafür....






Grundsätzlich hier auch eine Frage hinsichtlich "Seite nur mit Code vs. Seite mit Wordpress(/Elementor)":

Könnte ich die Elementor-Buttons löschen und dafür die HTML/CSS Buttons einbauen und den Rest über Elementor-Elemente bauen (wie gesagt, der Seiten-Grundaufbau ist ja immer gleich)?


Nochmal Entschuldigung, wenn ich hier soviel labere...
 

Anhänge

  • Rahmen.jpg
    Rahmen.jpg
    7,8 KB · Aufrufe: 3
2. Indem der main-Container scrollbar gemacht wird:
Code:
<!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>

[/QUOTE]
Verständnisfrage Seite mit reinem Code vs. Wordpress/Elementor
Ich baue ja (zumindest noch) mit Wordpress
In Wordpress gibt es ja (nur) .php Dateien (Header/Index/footer usw). Und wenn ich es richtig verstanden habe, steht ausser in der Index.php in den anderen nur was mit get.... header/footer. Ich vermute jetzt mal, dass header/footer irgendwo in den Seiteneinstellungen erstellt werden und dann alles zusammengefügt wird, richtig?
Was den o. g. Code anbelangt: main habe ich jetzt schon in verschiedenen Projekten gesehen. Ist das ein fester Begriff wie body/footer oder frei gewählt?

Bei CSS-Klassen steht vor dem Tag ein Punkt davor, bei ID-Verwendung ein #. Hier steht nichts davor.
Den o.g. Code kann man so nur in einer .html Datei verwenden? Oder geht das auch in einer .php? 



[QUOTE="Sempervivum, post: 414142, member: 36153"]
<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>


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.


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.
 
In Wordpress gibt es ja (nur) .php Dateien
Nein, das ist falsch. Auch bei WordPress gibt es CSS-Dateien.
Das habe ich gemacht und dort nun ausschließlich in den Dateien index.php, meiner eigenen Style.css und einer eigenen .js herumprobiert
Das solltest du auf keinen Fall machen. Jede Änderung, die du in den Core-Dateien von WordPress machst, gehen beim nächsten Update verloren. Wenn man kleinere CSS-Änderungen in WordPress durchführen will, dann schreibt man diese im Custom-CSS im Backend von WordPress. Bei größeren Änderungen sollte man dann besser ein Child-Theme anlegen. Hört sich erst mal kompliziert an, ist es aber nicht.
Und warum so viele Leute Elementor benutzen, verstehe ich auch nicht. Denn wenn man in WordPress-Foren liest, dann wird man sehr schnell feststellen, dass der Elementor sehr leistungsfähig ist, aber die ganze Sache auch verkomplizieren kann und daher auch zu Problemen führt. Als Anfänger mit WordPress solltest du daher besser erst mal auf Elementor verzichten.
 
Wenn ich das ganze dann in der Smartphone-Ansicht anzeigen lassen, zeigt sich dort mitten auf dem geklickten Button (hab mal Bild angehängt) ein kleiner Rahmen hinter dem Text in der gleichen Farbe, wie der Text. Wie gesagt, in keiner der Button-Einstellungen ist ein Border aktiviert. Woher kommt also das Ding? Im CSS code ist auch nix davon enthalten.
Wie oft muss man dir eigentlich noch schreiben dass sich ohne den Code zu kennen dazu nichts sagen lässt? Ohne einen Link zu der Seite wird das nichts, und nein, auch Bilder helfen da nichts.
 
main habe ich jetzt schon in verschiedenen Projekten gesehen. Ist das ein fester Begriff wie body/footer oder frei gewählt?
Das ist ein fester Begriff, es gibt eine ganze Reihe solcher semantischer Tags, siehe z. B. hier:

Bei CSS-Klassen steht vor dem Tag ein Punkt davor, bei ID-Verwendung ein #. Hier steht nichts davor.
Das wird hier erklärt:

Den o.g. Code kann man so nur in einer .html Datei verwenden? Oder geht das auch in einer .php?
Dieses HTML und CSS kannst Du auch in einer PHP-Datei verwenden.
 
Zurück
Oben