Problem mit Contentseite <> Abstand von oben

Thema wurde von FlorianR, 22. Februar 2024 erstellt.

  1. FlorianR

    FlorianR Erfahrener Benutzer

    Registriert seit:
    20. November 2015
    Beiträge:
    1.370
    Danke erhalten:
    256
    Danke vergeben:
    993
    Hallo,

    ich würde mich tierisch freuen, wenn mir jemand verraten könnte, warum diese Seite: https://www.matchashop.de/de/info/matchaguide.html

    am Anfang diesen Bereich braucht:

    Code:
    <br />
    <br />
    <br />
    &nbsp;
    <h2>Der matchashop.....
    Klar, ich hab den selbst hinzugefügt, aber ohne diese vielen Linebreaks taucht meine H2 hinter der Kategorieleiste auf. Auch fängt auf der oben genannten Seite die linke Seite mit den Boxen viel zu hoch an ..... was hab ich da bloß wieder getan :-D

    Danke für die Hilfe vorab.

    Florian
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    404
    Danke erhalten:
    172
    Danke vergeben:
    137
    #2 Anonymous, 23. Februar 2024
    Zuletzt bearbeitet: 24. Februar 2024
    1. Schriftart
    Problemseite: Arial, sans-serif
    Andere Contentseiten: maven-pro-v11, sans-serif

    2. Unterschiedliche Padding-Werte
    body.page-shop-content auf der Problemseite: padding-top: 20px
    body.page-shop-content auf anderen Contenseiten: padding-top: 150px;

    Deswegen ist nicht nur deine H2 hinter der Kategorieleiste sondern auch die Boxen auf der linken Seite. Ebenso deine Breadcrumb etc. Logisch.

    3. div.navbar-search.collapse form hat Padding-Werte und Box-Shadow, die es auf anderen Seiten nicht gibt. Hier macht Padding den Header auch nochmal höher. Außerdem überdeckt die Suchleiste im Sticky die Kategorieleiste.

    Ich sehe im Seitenquelltext auf der Problem-Contentseite CSS Codes in einer Content Box, die auf anderen Seiten nicht vorhanden sind. Und genau das Ding verursacht die Probleme. Direkt hinter dem <hr /> unter deiner Überschrift.
    Ich vermute, dass Du damit das Formular hübsch machen wolltest oder Du hast es ausversehen copy/paste reingehauen, als Du das Formular reingehauen hast.

    Lösung
    Lösche folgenden Inhalt (unter dem <hr> bzw. über deinem Formular)
    Dann wird übrigens das Formular nicht so schön, aber dann muss Du eben die CSS-Pfade spezifischer schreiben, sodass dein CSS-Code bspw. nicht gleich Auswirkung auf alle Selektoren wie <form> hat und dadurch dein Stylesheet überschrieben wird.

    Code:
    <style type="text/css">
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
      }
      form {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      .form-group {
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      input[type="text"],
      input[type="email"],
      select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      input[type="submit"]:hover {
        background-color: #45a049;
      }
      .checkbox-group {
        margin-bottom: 20px;
      }</style>
    Übrigens:
    Dabei kannst Du auch gleich das </p> (Quelltext Zeile 316) löschen, weil davor überhaupt kein Eröffnungstag steht, was nicht schon geschlossen ist.
     
  3. FlorianR

    FlorianR Erfahrener Benutzer

    Registriert seit:
    20. November 2015
    Beiträge:
    1.370
    Danke erhalten:
    256
    Danke vergeben:
    993
    Vielen, vielen Dank für diese unglaublich hilfreiche Unterstützung. Dank Deiner Hinweise und meinen Umbauten sieht die Seite nun super aus.

    Tausend Dank!