uwe gutwirth: Inhalt geht über css box hinaus

problematische Seite

Hallo Experten,

ich bin Lehrer und das erste mal mit einer profanen Frage hier. Möchte mit Schülern eine Box machen, die ca 90% des screens füllt aber mit dem Inhalt wächst. Habe im Beispiel eine Tabelle (ich weiß es ist verpönt, ging aber schneller) verwendet. Wenn ich die kommentierten Reihen aktiviere, schaut die Tabelle über die Box hinaus, was gräßlich aussieht. Hab schon vieles probiert aber noch keine Lösung gefunden. Hat da wer einen Rat? Box mit Tabelle Herzlichen Dank aus Salzburg.

  1. problematische Seite

    Hallo,

    Hat da wer einen Rat?

    Ein Fehler ist offensichtlich: du hast den Styleabschnitt zwischen head und body gesetzt, er gehört aber in den head!

    Gruß
    Kalk

    1. problematische Seite

      Oh danke,das ging aber schnell, hat aber keinerlei Auswirkung. Style ist jetzt im Head, wenn ich aber das Kommentar entferne, schauen die Zeilen immer noch über die Box hinaus.

      1. problematische Seite

        Hallo,

        da würde z.B. ein overflow:scroll helfen.

        Gruß
        Kalk

      2. problematische Seite

        Hallo

        Oh danke,das ging aber schnell, hat aber keinerlei Auswirkung. Style ist jetzt im Head, wenn ich aber das Kommentar entferne, schauen die Zeilen immer noch über die Box hinaus.

        Eine Tabelle wächst mit ihrem Inhalt [1]. Nun hat deine Tabelle keinen Nutzinhalt, aber in jeder Zelle steht ein Leerzeichen. Wenn der Kommentar entfernt wird, werden also diverse zusätzliche Zeilen dargestellt, die durch die Leerzeichen halt jeweils so hoch sind, wie ein einzeiliger Text.

        Dabei ragt die Tabelle bei (Höhen)-Bedarf auch über das umgebende Element hinaus, wenn dies eine harte Höhenbeschränkung hat. Das ist mit deinen CSS-Angaben gegeben.

        body {
          height:100%;
        }
        #info{  
          height:90%;
        }
        

        Soll #info mit dem potentiellen Inhalt der Tabelle mitwachsen, darf es nicht diese feste Höhe haben. Abstände nach oben und unten (außen wie innen) müssen dann mit margin und padding für das Element und/oder die außen und innen liegenden Elemente (body bzw. table) geregelt werden.

        Soll die Box nicht mitwachsen, braucht sie die vorhandene feste Höhe und eine Angabe, mit der bei Bedarf Scrollbalken erzeugt werden. Das wäre dann overflow mit dem Wert auto. Um die Scrollbalken dauerhaft aber mit zu wenig Inhalt funktionslos anzuzeigen, wird der Wert scroll benötigt.

        Tschö, Auge

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett

        1. Das gilt natürlich auch für jedes anderre blockbildende Element. ↩︎

        1. problematische Seite

          Herzlichen Dank, overflow:auto ist die Lösung. Liebe grüße aus Salzburg

    2. problematische Seite

      @@Tabellenkalk

      Ein Fehler ist offensichtlich: du hast den Styleabschnitt zwischen head und body gesetzt, er gehört aber in den head!

      <style> in <body> is just a conformance error. It's required to be supported, and every browser does and will do so forever.” —Tab Atkins

      s.a. Bestrebungen

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        Hallo,

        <style> in <body> is just a conformance error.

        Und? Nur weil du alles schlecht reden musst, ist es ja nicht so, dass du auch alles schlecht lesen musst ... 😉

        Gruß
        Kalk

        1. problematische Seite

          @@Tabellenkalk

          Und? Nur weil du alles schlecht reden musst, ist es ja nicht so, dass du auch alles schlecht lesen musst ... 😉

          Touché. 😅

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. problematische Seite

    Servus!

    Hallo Experten,

    ich bin Lehrer und das erste mal mit einer profanen Frage hier. Möchte mit Schülern eine Box machen, die ca 90% des screens füllt aber mit dem Inhalt wächst. Habe im Beispiel eine Tabelle (ich weiß es ist verpönt, ging aber schneller) verwendet. Wenn ich die kommentierten Reihen aktiviere, schaut die Tabelle über die Box hinaus, was gräßlich aussieht.

    Deine Box hat eine feste Höhe von 90%. Warum?

    Wenn Du ihr eine min-height gibst, nimmt sie den gewünschten Raum ein, wächst, wenn nötig, aber mit.

    #info {  
      min-height:90%;
      margin: 2em;
      padding: 1em;
      background-color: #666666;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      box-shadow: 2px 3px 5px rgba(255, 0, 0, .6),  
                  0 2px 9px rgba(255, 255, 255, 0.2) inset, 
                  0 -2px 9px rgba(0, 0, 0, 0.3) inset;
      color: #FFFFFF;
    }
    

    PS: Die Box ist unnötig, mach das gleich im body. Die feste Höhe von 100% ist auch nicht optimal, wenn du auf dem Handy nicht nach unten scrollen kannst, besser min-height: 100%?

    Hab schon vieles probiert aber noch keine Lösung gefunden. Hat da wer einen Rat?

    Hast Du schon einmal überlegt mit Grid Layout zu arbeiten?

    Herzlichen Dank aus Salzburg.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. problematische Seite

      Danke, auch dieser tipp ist super. Komme eher von der Softwareentwicklung und taste mich autodidaktisch in die Welt des HTML. Auf Grid css bin ich auch schon gestoßen, dachte aber, dass das wegen einer Box mit Kanonen auf Spatzen schießen sei. Vielleicht lieg ich da falsch und sollte mich mit diesem Thema weiter beschäftigen.

      1. problematische Seite

        Hallo uwe gutwirth,

        ich bin Lehrer

        Komme eher von der Softwareentwicklung

        Seiteneinsteiger?

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. problematische Seite

          Ja sozusagen. Eigentlich Betriebswirt aber Softwareentwicklung ist ein spannendes Hobby und hält den Geist rege(bin schon 67). Und es ist einfach toll, dass man gleich hilfreiche Tipps erhält. Bin echt begeistert!

  3. problematische Seite

    @@uwe gutwirth

    Inhalt geht über css box hinaus

    CSS is awesome 😉

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      CSS is awesome 😉

      Wollte ich auch gerade verlinken 😂