Friedel: CSS-Problem

0 19

CSS-Problem

Friedel
  • css
  1. 0
    MudGuard
    1. 0
      Friedel
      1. 1
        Der Martin
        1. 0
          Friedel
      2. 0
        Henry
  2. 1
    Matthias Apsel
    1. 0
      Henry
      1. 1
        Matthias Apsel
        1. 0
          Henry
          1. 0
            marctrix
    2. 0
      Friedel
      1. 0
        Rolf B
        1. 0
          Henry
      2. 0
        Gunnar Bittersmann
  3. 2
    Gunnar Bittersmann
    • html
    • php
    1. 1
      Henry
  4. 0
    Gunnar Bittersmann
    • performance
    1. 0
      marctrix
SELF-Forum

CSS-Problem

Friedel (Versionen)
– Informationen zu den Bewertungsregeln

Hallo, ich habe mal wieder Frust pur. Ich habe gerade erst angefangen, wie neue Seite zu schreiben, und schon kommt das erste Problem. Dabei ist die Seite noch fast leer.

Hier der Quellcode der Seite:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Adressen</title>
    <?php
      $dateiname = basename($_SERVER['SCRIPT_NAME'],".php");
      if (file_exists($dateiname.".css")) echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"".$dateiname.".css\">";
      if (file_exists($dateiname.".js")) echo "<script src=\"".$dateiname.".js\"></script>";
    ?>
  </head>
  <body>

      <h1>Adressen</h1>

  </body>
</html>

Das ist also ein Grundgerüst für eine leere Seite, die nur eine h1-Überschrift enthält. Im Php-Teil wird geprüft, ob es zu dieser index.php eine index.css und eine index.js gibt, und wenn es diese Dateien gibt werden sie eingebunden. Die index.css gibt es und sie hat folgenden Inhalt:

*               {padding:0; margin:0;}
html, body      {height:100%;}

body            {color: #100; background-color: #ffe;
                font-family: Arial, Helvetica, Sans-Serif;
                }
h1              {text-align:center; background-color: #ffc; margin-top:5em;}

Mein Problem: Sobald ich der Überschrift ein margin-top gebe, erscheint eine Scrollbar und die Seite verlängert sich um den margin.

Warum????? Unter der Überschrift ist doch jede Menge Platz? Woher kommt die Scrollbar??? Wenn ich den margin entferne, verschwindet die Scrollbar.

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. CSS-Problem

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Mein Problem: Sobald ich der Überschrift ein margin-top gebe, erscheint eine Scrollbar und die Seite verlängert sich um den margin.

    Stichwort: collapsing margins.

    cu,
    Andreas a/k/a MudGuard

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Problem

      Friedel
      – Informationen zu den Bewertungsregeln

      ??? Ich sehe keinen Bezug zwischen „collapsing margins“ und meinem Problem. Ich habe mit * {padding:0; margin:0;} alle margins entfernt Außerdem gibt es im Body nur ein einziges Element. Und selbst wenn der Rahmen davon mit irgend etwas „collapsen“ würde, sollte das nur Auswirkungen auf diesen margin haben. Mit diesem Stichwort komme ich nicht weiter.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Problem

        Der Martin
        +1 Informationen zu den Bewertungsregeln

        Hallo,

        ??? Ich sehe keinen Bezug zwischen „collapsing margins“ und meinem Problem.

        dann lies nochmal nach, wie collapsing margins funktionieren.

        Du setzt zunächst alle margins und paddings auf 0, okay. Dann gibst du dem h1-Element ein margin-top von 5em. Da der obere Rand des h1 mit body zusammenfällt, fallen auch die margins zusammen - mit dem Ergebnis, dass body auch ein margin-top von 5em bekommt (zusätzlich zu seiner Höhe von 100%), das aber mit dem des h1 zusammenfällt.

        Ob das Konzept der collapsing margins prinzipiell sinnvoll ist, sei dahingestellt. Ich bin nicht der Meinung, bisher konnte mich noch niemand überzeugen. Aber es ist halt so im CSS-Standard drin.

        Ciao,
         Martin

        --
        Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. CSS-Problem

          Friedel
          – Informationen zu den Bewertungsregeln

          Da hab ich wohl nicht weit genug gelesen.

          Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.

          Alles klar. Ist zwar Mist, erklärt aber das komische Verhalten.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. CSS-Problem

        Henry (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo Friedel,
        overflow:auto;

        Gruss
        Henry

        --
        Meine Meinung zu DSGVO & Co:
        „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. CSS-Problem

    Matthias Apsel Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hallo Friedel,

    *               {padding:0; margin:0;}
html, body      {height:100%;}

body            {color: #100; background-color: #ffe;
                font-family: Arial, Helvetica, Sans-Serif;
                }
h1              {text-align:center; background-color: #ffc; margin-top:5em;}

    Du gibst html und body eine feste Höhe. Ohne Grund. Ich vermute, du möchtest für die gesamte Seite einen #ffe-Hintergrund haben.

    html {background-color: #ffe;}

    * {margin: 0; padding: 0;}

    Das Normalisieren aller Abstände ist keine gute Idee. Die meisten Default-Einstellungen sind sinnvoll. Du veränderst besser erst einen Abstand, wenn du mit der Default-Angabe nicht zufrieden bist, Friedel.

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. CSS-Problem

      Henry (Versionen)
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      * {margin: 0; padding: 0;}

      Das Normalisieren aller Abstände ist keine gute Idee. Die meisten Default-Einstellungen sind sinnvoll. Du veränderst besser erst einen Abstand, wenn du mit der Default-Angabe nicht zufrieden bist, Friedel.

      Das streiten sich die Gelehrten bis heute drüber. Der einzig plausible Grund bisher, der dagegen sprechen könnte, dass das Rendering damit extrem beansprucht wird. Ob das wahr ist oder nicht, kann ich nicht sagen, konnte selbst keine Unterschiede feststellen.

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Problem

        Matthias Apsel Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        Hallo Henry,

        Der einzig plausible Grund bisher, der dagegen sprechen könnte, dass das Rendering damit extrem beansprucht wird.

        Das glaube ich nicht. Meiner Meinung nach macht man es sich auf diese Weise nur unnötig kompliziert.

        Bis demnächst
        Matthias

        --
        Pantoffeltierchen haben keine Hobbys.
        ¯\_(ツ)_/¯
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. CSS-Problem

          Henry
          – Informationen zu den Bewertungsregeln

          Hallo Matthias,

          Das glaube ich nicht. Meiner Meinung nach macht man es sich auf diese Weise nur unnötig kompliziert.

          https://css-tricks.com/margin-0-padding-0-no-longer-cool/

          Ich habe die Erfahrung gemacht, dass es für mich, muss jeder für sich selbst entscheiden, besser so ist. Ich möchte mein Design nicht dem System, Browser überlassen, da ist mir zuwenig Verlass drauf.

          Gruss
          Henry

          --
          Meine Meinung zu DSGVO & Co:
          „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS-Problem

            marctrix Homepage des Autors (Versionen)
            – Informationen zu den Bewertungsregeln

            Hej Henry,

            Ich habe die Erfahrung gemacht, dass es für mich, muss jeder für sich selbst entscheiden, besser so ist. Ich möchte mein Design nicht dem System, Browser überlassen, da ist mir zuwenig Verlass drauf.

            Das wäre mir zu viel Arbeit. Ich nutze die Kaskade und ändere nur die Dinge, die nicht passen.

            Auch ist ein Standard-Abstand besser, als kein Abstand (siehe auch CSS Tricks). Das passiert dir leicht, wenn du nicht sämtliche Kombinationen von Elementen durchgetestet hast. Redakteure haben die dumme Angewohntheit immer noch auf eine Idee zu kommen, die du noch nicht hattest…

            Aber wie du schon sagtest: muss jeder für sich entscheiden.

            Marc

            --
            Ceterum censeo Google esse delendam
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    2. CSS-Problem

      Friedel
      – Informationen zu den Bewertungsregeln

      Ich habe die margins und paddings entfernt, um die Ursache für das komische Verhalten zu finden. So kann ich viele Ursachen für das Verhalten ausschließen. Wenn ich die Ursache gefunden habe, entferne ich die Zeile natürlich wieder. Auch die Hintergrundfarben habe ich nur eingefügt, damit ich die Elemente sehen kann. So weiß ich sicher, dass das h1-Element so hoch und so breit ist, wie es sein soll. Natürlich entferne ich auch das, wenn ich den Fehler gefunden habe wieder.

      Du gibst html und body eine feste Höhe. Ohne Grund.

      Wie kommst du darauf? Das mache ich natürlich nicht ohne Grund. Außerdem ist das keine feste Höhe.

      Aber diese Behauptung hat mich auf eine Idee gebracht. Ich habe probehalber mal eine feste Höhe vergeben.

      Ich habe jetzt also

      *               {padding:0; margin:0;}
html, body      {height:1000px;}
body            {color: #100; background-color: #ffe;
                font-family: Arial, Helvetica, Sans-Serif;
                }
h1              {text-align:center; background-color: #ffc; margin-top:800px;}

      Ohne margin-top:800px ist der Body 100px hoch, mit margin-top:800px ist er fast doppelt so hoch. Der gelbe Streifen der Überschrift ist 34px hoch. Wenn darüber 800px margin sind, müssten darunter also noch 166px frei sein.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Problem

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo Friedel,

        nein, der Body ist nach wie vor 1000px hoch, aber wegen des margin um 800px nach unten verschoben.

        Das html Element ist ebenfalls 1000px hoch. 800px davon sind frei (Margin des body), dann kommt das h1, dann 166px bis zum Ende des html Elements.

        Mich wundert allerdings gerade, warum man dem body nicht mit overflow:hidden - wie bei anderen Elementen - einen block formatting context zuweisen kann. Der BFC sorgt dafür, dass der Margin nicht collapsed. Gebe ich dem body ein float:left (was fachlich Blödsinn ist, aber ebenfalls einen BFC erzeugt), dann bleibt der Margin im Body. Das experimentelle Element contain:layout tut's auch. Aber warum nicht overflow:hidden (oder overflow:auto)? Laut spec entsteht ein BFC für alle Block Elemente mit einem overflow-Wert ungleich "visible".

        Rolf

        --
        sumpsi - posui - clusi
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS-Problem

          Henry (Versionen)
          – Informationen zu den Bewertungsregeln

          Hallo Rolf,

          Mich wundert allerdings gerade, warum man dem body nicht mit overflow:hidden - wie bei anderen Elementen - einen block formatting context zuweisen kann.

          Warum hidden, auto reicht völlig.

          Gruss
          Henry

          --
          Meine Meinung zu DSGVO & Co:
          „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. CSS-Problem

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Friedel

        Du gibst html und body eine feste Höhe. Ohne Grund. Wie kommst du darauf? Das mache ich natürlich nicht ohne Grund.

        Aber vermutlich nicht richtig™. Du willst body keine Höhe, sondern eine Mindesthöhe geben. Und wenn du diese in vh angibst, musst du für html nichts tun.

        Also nicht html, body { height:100% },
        sondern body { min-height: 100vh }.

        body { font-family: Arial, Helvetica, Sans-Serif }

        Ugh! Wenn ich sowohl Arial als auch Helvetica auf meinem System habe, wird Arial genommen? Warum? Und warum nicht die Neue Helvetica?

        So rum wird ein Schuh draus:
        body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif }

        Helvetica/Arial sind aber keine besonders gut geeigneten Schriften für Text.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
        —Marc-Uwe Kling
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. CSS-Problem

    Gunnar Bittersmann Homepage des Autors (Versionen)
    +2 Informationen zu den Bewertungsregeln

    @@Friedel

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Adressen</title>
    <?php
      $dateiname = basename($_SERVER['SCRIPT_NAME'],".php");
      if (file_exists($dateiname.".css")) echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"".$dateiname.".css\">";
      if (file_exists($dateiname.".js")) echo "<script src=\"".$dateiname.".js\"></script>";
    ?>
  </head>

    Schlecht lesbar. Meine Regel lautet: niemals Markup (HTML-Tags) mit echo ausgeben.

    <?php $dateiname = basename($_SERVER['SCRIPT_NAME'],".php"); ?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Adressen</title>
<?php if (file_exists($dateiname.".css")): ?>
    <link rel="stylesheet" type="text/css" href="<?php echo $dateiname ?>.css"/>
<?php endif; ?>
<?php if (file_exists($dateiname.".js")):?>
    <script src="<?php echo $dateiname ?>.js"></script>
<?php endif; ?>
  </head>

    Kürzer:

    <?php $dateiname = basename($_SERVER['SCRIPT_NAME'],'.php'); ?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Adressen</title>
<?php if (file_exists($dateiname.'.css')): ?>
    <link rel="stylesheet" href="<?= $dateiname ?>.css"/>
<?php endif; ?>
<?php if (file_exists($dateiname.'.js')):?>
    <script src="<?= $dateiname ?>.js"></script>
<?php endif; ?>
  </head>

    type="text/css" brauchst du nicht; in PHP solltest du einfache Anführungszeichen verwenden, wenn das darin nicht nach Variablen geparst werden muss.

    Das ist also ein Grundgerüst für eine leere Seite

    Zum Grundgerüst fehlen noch zwei Dinge:

    • die Angabe der Sprache des Seiteninhalts, hier also <html lang="de">

    • die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
    —Marc-Uwe Kling
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. CSS-Problem

      Henry (Versionen)
      +1 Informationen zu den Bewertungsregeln

      Hallo Gunnar,

      Schlecht lesbar. Meine Regel lautet: niemals Markup (HTML-Tags) mit echo ausgeben.

      Das Thema und deine Ansicht dazu, hatten wir ja schon öfter. Es mag vielleicht auch an meiner, durch Prosopagnosie hervorgerufene, andere Wahrnehmung der Dinge liegen, doch an deine Schreibweise konnte ich mich noch nie gewöhnen. Habe es aber durchaus hin und wieder probiert. Gerade deine endlosen Verschachtelungen machen es für mich viel schlechter lesbar, als die Friedel-Schreibweise (na ja ich würde es nicht ganz so machen, aber so ähnlich), das schafft für mich eine bessere Trennung zwischen PHP und HTML und damit besser lesbar.

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

  4. CSS-Problem

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@Friedel

          $dateiname = basename($_SERVER['SCRIPT_NAME'],".php");
      if (file_exists($dateiname.".css")) echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"".$dateiname.".css\">";
      if (file_exists($dateiname.".js")) echo "<script src=\"".$dateiname.".js\"></script>";

    Von der Schreibweise mal abgesehen: du willst für jede deiner Seiten eine eigene Stylesheet-Datei und eine eigene Script-Datei laden?

    Macht für mich keinen Sinn. Dinge, die auf der ganzen Website einheitlich aussehen sollen, sollten in einem Stylesheet angegeben werden, welches einmal geladen beim Aufruf einer anderen Seite schon im Browsercache ist.

    Wenn einzelne Seiten zusätzlich Stile brauchen:

        <link rel="stylesheet" href="default.css"/>
<?php if (file_exists($dateiname.'.css')): ?>
    <link rel="stylesheet" href="<?= $dateiname ?>.css"/>
<?php endif; ?>

    Aber auch das macht wenig Sinn. Die zusätzlichen Stile und Scripte müssen wohl nicht gecachet werden. Stattdessen kann man sie gleich ins HTML-Dokument schreiben und so HTTP-Requests sparen:

        <link rel="stylesheet" href="default.css"/>
<?php if (file_exists($dateiname.'.css')): ?>
    <style><?php readfile($dateiname.'css'); ?></style>
<?php endif; ?>
<?php if (file_exists($dateiname.'.js')): ?>
    <script><?php readfile($dateiname.'js'); ?></script>
<?php endif; ?>

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
    —Marc-Uwe Kling
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Problem

      marctrix Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hej Gunnar, @@Friedel

      Wenn einzelne Seiten zusätzlich Stile brauchen…

      … lässt sich das vermutlich auch über eine Klasse im ˋhtmlˋ-Element machen...

      Marc

      --
      Ceterum censeo Google esse delendam
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln