CSS/Perl Umbruchkontrolle

[Bernhard Heuvel]

Hallo an alle,

das Umbruchproblem meines letzten Beitrages konnte ich lösen. Allerdings kam jetzt in einer anderen Box was völlig anderes raus. Ich komm einfach nicht dahinter und wäre dankbar für ein weiteres prüfendes Auge ;o)

#======================================================================
Hier mal ein Screenshot von der Seite:

http://home.arcor.de/bernhard_downunder/textumbruch.png

Wie man sieht wird der Text in einer schmalen Spalte gehalten. Es sei denn, das Wort ist sehr lang - dann wird die Spalte überragt. Vielleicht liegt es an den zwei Knöppen rechts oben im Beitrag...

#======================================================================
Hier die CSS-Datei:

body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

h1 {
    display:block;
    font-size: 2em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: lightblue;
    background-image: url(fox.gif);
    background-repeat: no-repeat;
    background-position: right;
    border: 2px ridge silver;
  }

h1:hover { background-image:url(foxyylupe.gif); }

html>body h1 {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: black; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black;
    background-color: white;
    background-image: url(foxyeyes.gif);
    background-repeat: no-repeat;
    background-position:right;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
  }

div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {

}

div#Info ol {
  list-style-type:circle;
  list-style-position: outside;
  font-size: 1em;
  }

div#Info a:link {color:black; text-decoration:none;}
  div#Info a:visited { color:silver; text-decoration:none;}
  div#Info a:focus { color:red; text-decoration:underline;}
  div#Info a:hover { color:red; text-decoration:underline;}
  div#Info a:active { color:lime; text-decoration:underline;}

div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    text-align: justify;
    font-size: 0.9em;
    margin: 1em 0;
  }

div#Inhalt a:link {color: #000080; font-weight: bold;}

div#Inhalt form { float: right; position: relative; margin-top:1px; margin-right:1px; }

p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: lightblue; border: 1px solid silver;
  }

div#Edit {
    margin: 0 1em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  * html div#Edit {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Edit h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Edit p {
    text-align: justify;
    font-size: 0.9em;
    margin: 1em 0;
  }

form { padding:5px; }
  td, input, select, textarea {font-size:13px;}
   .Bereich, .Feld { background-color:#ffa; width:500px; border:1px solid #ddd; }
   .Bereich2, .Feld2 { background-color:#ffa; border:1px solid #ddd; border-top-color: red; white-space:pre;}
   .Bereich3, .Feld3 { background-color:#ffa; border:1px solid #ddd; border-top-color: green; }
   .Auswahl { background-color:#dff; width:300px; border:1px solid #ddd; color:#00c;}
   .Check, .Radio { background-color:#ddff; border:1px solid #ddd; }
   .Button { background-color:#aaa; color:#fff; width:200px; border:6px solid #ddd; }

#======================================================================
Hier das Perlskript (Achtung: Augenkrebs...):

print "Content-Type: text/html; charset=iso-8859-15\n\n";

print << "eof";
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title></title>
    <link rel="stylesheet" type="text/css" href="/Wikiformate.css">
  </head>
<body>

<FORM action="/cgi-bin/FBSERVER/suche.pl" method="post" enctype="multipart/form-data">
 <h1>KosyWiki
   <input type="text" size="20" maxlength="50" name="suchsuch" value="Suchwort">
   <input type="submit" value="Suchen"></FORM>
  </h1>

<ul id="Navigation">
    <li><a href="/cgi-bin/some.pl">Kosy</a>
     <ul>
      <li><a href="/cgi-bin/some.pl">Kosy-KK</a></li>
         <li><a href="/cgi-bin/some.pl">Kosy-IL</a></li>
    <li><a href="/cgi-bin/some.pl">Kosy-DP</a></li>
    <li><a href="/cgi-bin/some.pl">Kosy-KT</a></li>
    <li><a href="/cgi-bin/some.pl">Kosy-KS</a></li>
    <li><a href="/cgi-bin/some.pl">Kosy-NN</a></li>
     </li></ul>
    <li><a href="/cgi-bin/some.pl">HappyHour</a></li>
  </ul>

<div id="Info">

<h2>Neue Artikel</h2>
    <ol>
eof
    my $aref = $dbh->selectall_arrayref("SQL-Anweisung")
      or die $dbh->errstr();
    $i=0;
    for my $go (@$aref){
        my ($news) = @$go;
           if ($i < 2){
             print '<li><a href="#' . $news . '">';

my $sth = $dbh->prepare ('select TITLE blah') or die $dbh->errstr;
              $sth->execute($news) or die $sth->errstr;

my ($tit) = $sth->fetchrow_array();

print $tit . '</a></li><br>';
             $i++;
      }
     }

print << "eof";
    </ol>
  </div>

<div id="Inhalt">
  <h2><a name="">Überschrift</a></h2>
  <FORM action="/cgi-bin/some.pl" method="post" enctype="multipart/form-data" style="text-align:right">
   <input type="hidden" value="KosyKK">
   <input type="image" src="/edit2.gif"></FORM>
    <p></p>
eof

my $aref = $dbh->selectall_arrayref("SQL");

for my $query (@$aref){
   my ($WREF) = @$query;

my $aref = $dbh->selectall_arrayref("SQL") or die $dbh->errstr();

for my $los (@$aref){ my ($ID,$INSERTDATE,$INSERTUREF,$TITLE,$MEMO) = @$los;
      print '<fieldset class="Bereich2"><legend><b>';
      print '<a name="' . $ID . '">';
      printf "$ID.) $TITLE";
      print '</a></b></legend><form action="/cgi-bin/some.pl" method="post" style="text-align:right"><input type="hidden" name="eintrag"';
      print ' value="' . $ID . '"><input type="image" src="/kill.gif"></form>';

print '<form action="/cgi-bin/some.pl" method="post" style="text-align:right"><input type="hidden" name="eintrag"';
      print ' value="' . $ID . '"><input type="image" src="/edit.gif"></form>';

print "<p>$MEMO" . '<br><br>';

if ($PICTURE1NAME ne ''){
        print '<a href="/'. $PICTURE1NAME . '" target="new">BILD</a><br>';
                       } else {print '<br>';}
      if ($FILENAME ne ''){
        print '<a href="/' . $FILENAME . '" target="new" align="right">DATEI</a><br><br>';
            }  else {print '<br>';}

my $sth = $dbh->prepare ('SQL') or die "Verbindung fehlgeschlagen:" . $dbh->errstr;
       $sth->execute($INSERTUREF) or die "Aufruf fehlgeschlagen!:" . $sth->errstr;
      my ($user) = $sth->fetchrow_array();

print "<b>$user ($INSERTDATE)</b>";
      print '</p></fieldset> <br>';
}

print << "eof";
  </div>

<p id="Fusszeile">Blah!</p>

</body>
</html>
eof

#===================================================================

Danke im voraus!

Bernhard Heuvel

[Cheatah]

Hi,

das Umbruchproblem meines letzten Beitrages konnte ich lösen. Allerdings kam jetzt in einer anderen Box was völlig anderes raus. Ich komm einfach nicht dahinter und wäre dankbar für ein weiteres prüfendes Auge ;o)

zunächst einmal: Es ist absolut undenkbar, dass ein clientseitiges Problem an einer serverseitigen Technik liegt. Das "Perl" im Subject ist also ebenso bedeutungsfrei wie jedweder serverseitiger Code. Eliminiere diesen bitte *immer* *vollständig*, da er niemals helfen, wohl aber eine Hilfe unmöglich machen kann.

Hier mal ein Screenshot von der Seite:
http://home.arcor.de/bernhard_downunder/textumbruch.png

</hilfe/bedienung.htm#verweise-einbinden>, danke.

Wie man sieht wird der Text in einer schmalen Spalte gehalten. Es sei denn, das Wort ist sehr lang - dann wird die Spalte überragt. Vielleicht liegt es an den zwei Knöppen rechts oben im Beitrag...

Mir ist aus diesen Worten nicht klar, wie das Verhalten sein _soll_, und ebenfalls fehlt Deine Analyse, warum das im Screenshot sichtbare Verhalten so _ist_. Dafür ist der von Dir gepostete Code viel zu viel zu (viel zu) viel - er sollte ca. 10 Zeilen im Umfang nicht überschreiten. Minimiere Dein Problem so, dass kein nicht damit verbundener Code mehr vorhanden ist, und poste einen Link(!) auf die Testseite.

Cheatah

[Sven Rautenberg]

Moin!

Mir ist aus diesen Worten nicht klar, wie das Verhalten sein _soll_, und ebenfalls fehlt Deine Analyse, warum das im Screenshot sichtbare Verhalten so _ist_. Dafür ist der von Dir gepostete Code viel zu viel zu (viel zu) viel - er sollte ca. 10 Zeilen im Umfang nicht überschreiten. Minimiere Dein Problem so, dass kein nicht damit verbundener Code mehr vorhanden ist, und poste einen Link(!) auf die Testseite.

Oder anders formuliert: Speichere den Quelltext, den dein Skript erzeugt, in einer HTML-Datei und schneide solange HTML- und dann CSS-Quelltext weg, bis das Problem noch auftritt, aber sonst nichts mehr vorhanden ist.

Oftmals ergibt sich dadurch schon, dass der Groschen bei dir selbst fällt, aber wenn nicht: Seite mit CSS hochladen und Link posten.

- Sven Rautenberg

[Bernhard Heuvel]

Oder anders formuliert: Speichere den Quelltext, den dein Skript erzeugt, in einer HTML-Datei und schneide solange HTML- und dann CSS-Quelltext weg, bis das Problem noch auftritt, aber sonst nichts mehr vorhanden ist.

Das habe ich gemacht und festgestellt, daß ich für das <fieldset> noch einen eigenen Bereich eröffnet hatte *patsch*
Dort habe ich dann white-space:pre; eingestellt. Jetzt wo ich das wieder rausgenommen habe, geht justify wieder.

Hmm, das Problem ist jetzt aber nur zum Teil gelöst: ich würde gerne die Umbrüche aus der Eingabe übernehmen und trotzdem das Blockformat verwenden...wie mache ich denn das?

In der Beschreibung für white-space:pre steht:

#======================================================================
pre = Zeilenumbruch wie im Editor eingegeben (so wie beim pre-Element).
#======================================================================

Das war aber bei der Ausgabe nicht der Fall, sondern eben vorher schon umgebrochen....

Oh! Weiter unten steht:

#======================================================================
Beachten Sie:

Diese Angabe gehört zur CSS-Version 2.0. Der Internet Explorer interpretiert nur den Wert nowrap und diesen erst ab Version 5.5, nicht den Wert pre. Netscape 4.x interpretiert den Wert pre, nicht aber nowrap. Erst Netscape 6.x beherrscht alle Angaben.
#======================================================================

Ich habe bisher nur mit dem Firefox getestet. Liegt's am Browser?

Wie kann man das man mal - das man watt sitt? *grins* Ich meine, wie bekomme ich das denn in schön hin? Ich möchte, daß die Umbrüche wie vom Anwender eingegeben angezeigt werden. Blockschrift wäre noch schön dazu! Möglichst Browser-unabhängig darf es auch sein ;o)

Vielen Dank für Anregungen (ich lese auch gerne was nach) und Hinweise!

Bernhard Heuvel

[Sven Rautenberg]

Moin!

Oder anders formuliert: Speichere den Quelltext, den dein Skript erzeugt, in einer HTML-Datei und schneide solange HTML- und dann CSS-Quelltext weg, bis das Problem noch auftritt, aber sonst nichts mehr vorhanden ist.

Das habe ich gemacht und festgestellt, daß ich für das <fieldset> noch einen eigenen Bereich eröffnet hatte *patsch*
Dort habe ich dann white-space:pre; eingestellt. Jetzt wo ich das wieder rausgenommen habe, geht justify wieder.

Jaja, manchmal sind's die einfachsten Sachen. Das hat schon seinen Sinn, dass hier im Forum gewisse Verhaltensregeln für das Posten von Quelltext gelten (*anspracheandieanderenricht*). :)

Hmm, das Problem ist jetzt aber nur zum Teil gelöst: ich würde gerne die Umbrüche aus der Eingabe übernehmen und trotzdem das Blockformat verwenden...wie mache ich denn das?

Ich weiß nicht, ob das so schlau ist. white-space:pre bzw. auch <pre> können dazu führen, dass Zeilen unendlich lang werden und dir das gesamte Layout sprengen, sofern du nicht drauf vorbereitet bist.

Wie kann man das man mal - das man watt sitt? *grins* Ich meine, wie bekomme ich das denn in schön hin? Ich möchte, daß die Umbrüche wie vom Anwender eingegeben angezeigt werden. Blockschrift wäre noch schön dazu! Möglichst Browser-unabhängig darf es auch sein ;o)

Wandle alle Zeilenschaltungen in <br> um. In PHP gibts dafür nl2br(), eine Stringersatzfunktion, die aus "\n" ein "<br />\n" macht.

Perl kennt sowas vorgefertigt-praktisches nicht, da mußt du die zu findenden und ersetzenden Stringteile selbst angeben in der generischen Stringersatzfunktion.

Vielleicht willst du auch einen regulären Ausdruck auf den String loslassen, denn Zeilenschaltungen sind ja zwischen den Systemen unterschiedlich, es gibt \n, \r und \r\n.

- Sven Rautenberg

[Bernhard Heuvel]

Hi,

danke - der Tipp mit dem \n war der Kniff ;o)

Perl kennt sowas vorgefertigt-praktisches nicht, da mußt du die zu findenden und ersetzenden Stringteile selbst angeben in der generischen Stringersatzfunktion.

Naja - warum man " $var =~ s/\n/<br>/g; " mit einer kompletten Methode ersetzen muß... kürzer geht's doch nimmer. Ich weiß nicht. [Du merkst, ich liebe mein Perl ;o) -  und lasse nichts drauf kommen ]

Danke nochmals und einen schönen Frühlingstag!

Bernhard Heuvel

[Bernhard Heuvel]

Hmm, Ok - deine Kritik ist berechtigt.

Verlinken kann ich die Testseite leider nicht nach außen, da ich keinen Testserver außerhalb zur Verfügung habe.

Soll: der Text soll möglichst die ganze mittlere Box ausfüllen, und das  im Blockformat.

Hier nochmal der Screenshot: Textumbruch vor dem Ende der Box

Meine Fehleranalyse ist nicht sehr ausgereift. Ich vermute, daß aber die beiden "Buttons" oben rechts innerhalb der Textbox das Problem sind. Hinter diesen Buttons sind zwei <form>-Elemente versteckt.

#==================================Auszug
<form action="/cgi-bin/FBSERVER/loeschen.pl" method="post" style="text-align:right"> <input type="hidden" name="eintrag" value="46592"><input type="image" src="/loeschen.gif"></form>

<form action="/cgi-bin/FBSERVER/wedit.pl" method="post" style="text-align:right"><input type="hidden" name="eintrag" value="46592"><input type="image" src="/edit.gif"></form>
#=================================

Diese sind eingeschlossen durch:

#==================================Auszug
<div id="Inhalt"> </div>
#=================================

Das CSS dazu lautet:

#==================================Auszug
div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
* html div#Inhalt {
    height: 1em;  /* Workaround geg. 3-Pixel-Bug des IE */
  }
div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
div#Inhalt p {
    text-align: justify;
    font-size: 0.9em;
    margin: 1em 0;
  }

div#Inhalt a:link {color: #000080; font-weight: bold;}

div#Inhalt form { float: right; position: relative; margin-top:1px;
                  margin-right:1px; }
#=================================

Der Text ist in <p></p> eingeschlossen. Nochmal die Reihenfolge:

<div id="Inhalt"> <form></form> <p> TEXT </p> </div>

Meine Vermutung ist, daß es an "div#Inhalt p" oder vielleicht an den <form>-Tags liegt...aber ich komme durch Probieren nicht dahinter. Für die tiefere Analyse fehlt mir das Verständnis. Leider habe ich keine Zeit bekommen, daß Thema zunächst gründlich zu studieren.
Lernen und runterschreiben on-the-fly.

Vielen Dank,

Bernhard Heuvel

[Cheatah]

Hi,

Hmm, Ok - deine Kritik ist berechtigt.

ganz ernsthaft: Freut mich, dass Du es so siehst. Es gibt weit aus weniger produktive Reaktionen darauf.

Verlinken kann ich die Testseite leider nicht nach außen, da ich keinen Testserver außerhalb zur Verfügung habe.

Kannst Du irgendwo einen billig-Webspace anmelden? Solange der ausgelieferte Code nicht durch Werbung, Frames etc. manipuliert wird, ist das ausreichend.

Meine Fehleranalyse ist nicht sehr ausgereift.

Verwende den DOM-Inspector von Mozilla/Firefox (Strg+Shift+I). Manipuliere Eigenschaften wie border; vergleiche den Computed Style mit dem, was Du gerne hättest; ermittle aus den Style Rules die Herkunft der Unterschiede.

Ich vermute, daß aber die beiden "Buttons" oben rechts innerhalb der Textbox das Problem sind. Hinter diesen Buttons sind zwei <form>-Elemente versteckt.

Das alleine ist ganz sicher kein Problem.

Cheatah