Beiträge von pega

pega

In deinem Vorschlag stehen die 3 Angaben untereinander. Bei breiten Bildschirmen sollten diese nebeneinander stehen, was zwar mit float:left bei dt und dd gelingt, aber die Breite müßte ich dann allgemeingültig vorgeben, damit ein Tabellencharkter entsteht. Mit meiner Lösung passen sich die Zellbreiten dem breitesten Inhalt an, allerdings mit dem bekannten Umbruchproblem

pega

Hi

ich habe mit css eine Tabellenstruktur gestaltet mit 3 Spalten wobei die 1. Spalte jeweils die Überschrift für die Zeile trägt. Ich hätte gerne folgendes Verhalten: Wenn die Tabelle nicht mehr in die Bildschirmbreite paßt, sollen die Zellen der Spalten 2 und Spalte 3 jeweils unter unterhalb ihrer Überschrift rutschen aber weiterhin nebeneinander stehen

von

Zeile1 a1 b1

Zeile2 a2 b2

in

Zeile1

a1 b1

Zeile2

a2 b2

HTML

<!DOCTYPE HTML>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        .table {
            display: table;
            overflow-x: auto;
            overflow-y: auto;
        }
        .table-cell {
            display: table-cell;
            padding: 5px;
        }
        .table-cell input {
            width: 120px;
        }
        .table-row {
            display: table-row;
        }
        .table-row-header {
            min-width: 200px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="table-cell table-row-header">Zeile1</div>
            <div class="table-cell"><input type="text" id="a1" value="a1"></div>
            <div class="table-cell"><input type="text" id="b1" value="b1"></div>
        </div>
        <div class="table-row">
            <div class="table-cell table-row-header">Zeile2</div>
            <div class="table-cell"><input type="text" id="a2" value="a2"></div>
            <div class="table-cell"><input type="text" id="b2" value="b2"></div>
        </div>
    </div>
</body></html>

Alles anzeigen

Hat jemand eine Idee was beim css oder in der Struktur geändert werden muss?

pega

Warum liefert dieser Regex bei Umlauten einen um jeweils ein Zeichen verschobenen Offset? Den Unicode-Modifier habe ich im Pattern.

PHP

function showWords() {
            echo "Treffer; Start; Länge<br />";
            $pattern = "~\b\w+\b~u";
            $text = "Kathe wurde gerne wahlen.";
            if (preg_match_all($pattern, $text, $matches, PREG_OFFSET_CAPTURE)) {
                foreach ($matches[0] as $m) {
                    echo $m[0]."; ".$m[1]."; ".mb_strlen($m[0], "utf-8")."<br />";
                }
            }
        }

Treffer; Start; Länge
Käthe; 0; 5
würde; 7; 5
gerne; 14; 5
wählen; 20; 6

Treffer; Start; Länge
Kathe; 0; 5
wurde; 6; 5
gerne; 12; 5
wahlen; 18; 6

pega

Habe die Lösung gefunden: mb_substr statt substr

pega

Warum wird durch die <span> Angabe der Text anscheinend nicht mehr in UTF-8 dargestellt?

Ausgabe 1: Dies könnte eine schöne Spaßübung sein
Ausgabe 2: Dies k��nnte eine sch��ne Spa��bung sein.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<?php
    $txtInput ="Dies könnte eine schöne Spaßübung sein.";
    echo "Ausgabe 1<br>";
    for ($i=0; $i<strlen($txtInput); $i++) {
        $char = substr($txtInput,$i,1);
        echo $char;
    }


    echo "<br><br>Ausgabe 2<br>";
    for ($i=0; $i<strlen($txtInput); $i++) {
        $char = substr($txtInput,$i,1);
        echo '<span>'.$char.'</span>';
    }
?>
</body>
</html>

Alles anzeigen

pega

Ich habe die Lösung gefunden. Mit der flex-Angabe hast du mich auf die Spur gebracht.

HTML

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"><!--
        .container{
            display: flex;
            flex-flow: row wrap;
            }
        .eingabe {flex: auto;}
        .einstellungen {}


        fieldset {background-color: #FFF8DC;}
        textarea { width: 100%;}
        --></style>
    </head>


<body style="background-color:#eee;">


<div class="container" style="width:70%; margin:0px auto; padding:10px; background-color: #E6E6FA;">


    <fieldset class="eingabe"><label>Eingabe</label>
        <textarea id="input" rows="6">Das ist ein Text, der sehr lang sein kann.</textarea><br>
    </fieldset>


    <fieldset class="einstellungen"><label>Einstellungen</label>
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
    </fieldset>


</div>


</body></html>

Alles anzeigen

pega

Leider nur fast richtig. Dein Vorschlag wäre aber zumindest die 2.beste Lösung.

Die rechte Div soll nur so breit werden, wie es erforderlich ist (also abhängig von der Breite eines Comboboxpaares) Damit ist diese auch fix allerdings mit einer unbekannten Breite. Die jetzt noch freie Breite -links innerhalb des Containers- soll dann durch die linke Div (mit dem Textfeld) eingenommen werden.

Ich möchte letztlich dem Textfeld den maximal möglichen Raum geben und dabei rechts vom Textfeld einige Einstellmöglichkeiten platzieren. Eine Änderung der Seitenbreite soll also nur Einfluss auf die Breite des Textfelds haben, die Einstellmöglichkeiten (Comboxen) sollen unverändert bleiben.

Was bei deinem Vorschlag wunschgemäß funktioniert ist die Responsibility, dass also nach Unterschreiten einer Mindestbreite die Comboboxen nach unten rutschen.

pega

Hallo
ich möchte ein Layout gestalten, bei dem 2 DIVs (bzw. Fieldsets) nebeneinanderliegen. Das rechte Fieldset besitzt mehrere Comboboxen, bei denen 2 Comboboxen ein nebeneinanderliegendes Paar bilden. Es gibt 3...5 untereinander angeordnete Paare. Die linken und rechten Comboboxen haben jeweils den gleichen Inhalt, dieser fällt abhängig vom Seitenaufruf per php unterschiedlich aus. Somit ist ein Comboboxenpaar und damit das rechte Fieldset abhängig vom Seitenaufruf unterschiedlich breit.

Das linke Fieldset soll eine Breite einnehmen, die den Container mit dem rechten Fieldset zu 100% in der Breite füllt.

Mit meinem bisherigen Versuchen kriege ich diese Varianz nicht hin, meinen letzten Versuch hab ich mit beigefügtem HTML-Code beendet.
PS: Idealerweise soll das rechte Fieldset nach Unterschreiten einer Mindestbreite unterhalb des linken FS positioniert sein, das linke dann 100% Seitenbreite bekommen (responsive). Aber erstmal das 1. Problem lösen.

Kann mit jemand einen Lösungshinweis geben?
Merci Peter

HTML

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"><!--
        .eingabe {
            float:left;
            width:60%;
            }
        .einstellungen {
            float:right;
            margin-left:10px;
            }
        fieldset {
            padding: 10px 15px 10px 10px;
            background-color: #FFF8DC;
            }
        textarea { width: 100%;}
        --></style>
    </head>


<body style="background-color:#eee;">
<div id="container" style="width:760px; margin:0px auto; padding:10px; background-color: #E6E6FA;">


    <fieldset class="eingabe"><legend>Eingabe</legend>
        <textarea id="input" rows="6">Das ist ein Text, der sehr lang sein kann.</textarea><br>
    </fieldset>


    <fieldset class="einstellungen"><legend>Einstellungen</legend>
        <div class="einstellung">
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
        <div class="einstellung">
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
        <div class="einstellung">
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
    </fieldset>
</div>
</body>
</html>
<!-- Zum Austesten, stattdessen 3x diese Combos nehmen. Bei Fieldsets müssen weiterhin auf einer Höhe liegen.
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
-->

Alles anzeigen

Beiträge von pega

Tabelle mit bestimmten Umbrucheigenschaften

Tabelle mit bestimmten Umbrucheigenschaften

Falscher Offset bei Wörtern mit Umlauten im Regex-Ergebnis

Darstellung der Umlaute mit <span> fehlerhaft

Darstellung der Umlaute mit <span> fehlerhaft

Linke DIV-Breite abhängig von rechte DIV-Breite gestalten

Linke DIV-Breite abhängig von rechte DIV-Breite gestalten

Linke DIV-Breite abhängig von rechte DIV-Breite gestalten