• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Layout wird bei zu langem text zerschossen

Junkee[]

Junkee[]

Lounge-Member
Wenn man ein zu langes Wort oder eine unbrechbaren Zeile hat (hier ist es das pre-Tag) hat die rechte Spalte zu wenig Platz und schiebt sich nach unten. Ich will das aber irgendwie unterbinden. Habe auf dem pre-Tag schon mit overflow:scroll; versucht aber das pre-Tag wird je nicht größer als das Elternelement und ist deshalb nutzlos. Tips?
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>Test pre Tags</title>
    <style type="text/css">
      #n1 {
        margin-right: 350px;
        float: left;
      }
      
      #n2 {
        float:right;
        margin-left: -350px;
        width: 300px;
      }
      code {
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <div id="n1">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <code>
        <pre>dasisteineganzlangefunktion(mit,verdammt,vielen,parametern,und).komischenrueckgabewerten(dieauchfunktionensind,und,wieder,parameter,haben);</pre>
      </code>
      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.
    </div>
    <div id="n2">
      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.
    </div>
  </body>
</html>
 
1. ein <pre> im <code> ist invalide.
2. In welchem Browser wird das rechte nach unten verschoben? Bei mir im IE8 und FF ist es rechts daneben.
 
Zu 1.: o.0 wie würdest du den Code darstellen?
2.: chrome. Sehe gerade, dass es im ff nach rechts verschoben wird (der Code muss aber lang genug sein [auf meinem netbook hats gereicht])
 
Zu 1.:
Code: 
code {
	white-space: pre
}

Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>Test pre Tags</title>
    <style type="text/css">
      #n1 {
        padding-right: 350px;
      }
      
      #n2 {
        float:right;
        margin-left: -350px;
        width: 300px;
      }
      code {
        overflow: scroll;
        	display: block;
		white-space: pre;
      }
    </style>
  </head>
  <body>
    <div id="n2">
      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.
    </div>
    <div id="n1">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <code>
        dasisteineganzlangefunktion(mit,verdammt,vielen,parametern,und).komischenrueckgabewerten(dieauchfunktionensind,und,wieder,parameter,haben);
      </code>
      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.
    </div>
  </body>
</html>
- ist hald wieder in falscher Reihenfolge...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben