Ankündigung

Einklappen
Keine Ankündigung bisher.

pre zerhaut layout - bitte löschen, ich versuche es auf einer anderen Seite...

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • pre zerhaut layout - bitte löschen, ich versuche es auf einer anderen Seite...

    ich versuche es mal bei html.de..

    Kann mir hier bitte einer bei meinem Problem helfen und mich auf meine Denkfehler hinweisen?

    Pre stört sich nicht an der Breite des übergeordneten Elements. Ich habe es extra auf 200px gesetzt, damit man es sofort sieht.

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link type="text/css" href="problem.css" rel="stylesheet">
    
    </head>
    <body>
      <header><p>Header</p></header>
      <nav>Navigation</nav>
      <main>
        <h1>Main</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia esse recusandae id enim, porro explicabo maiores minima sapiente numquam. Quo?
        </p>
        <pre><code>&lt;script&gt;
      alert('Diese Zeile zerhaut das Layout komlett, eigentlich sollte alles maximal 200px breit sein');
    &lt;/script&gt;</code>
        </pre>
      </main>
      <footer><p>footer</p></footer>
    </body>
    </html>
    passende css.
    Code:
    *{
      font-family: system-ui;
      box-sizing:border-box;
    }
    html{
      width:90%;
      max-width: 200px;
      min-height:100vh;
      margin:0 auto;
     padding:0;
      background:#eee;
    }
    body{
      min-height:100vh;
      max-width: 100%;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
    }
    pre{
      width:100%;
      margin: 2em 0;
      background: #fafafa;
      overflow-x: auto;
      padding: 0 1em;
    }
    https://jsfiddle.net/bxk5dmw2/

    Bei kurzen Zeilen ist es OK

    https://jsfiddle.net/ebz0gv5s/

  • #2
    Falls Du es doch nochmal liest.

    Du musst dem übergeordneten Element, in diesem Fall "main" ein
    HTML-Code:
    min-width:0;
    verpassen.

    Kommentar

    Lädt...
    X