Gibt es eine Möglichkeit die Sprache zu (zwischen-)speichern?
Selbstverständlich, dafür gibt es zwei Möglichkeiten:
The flexyboxes page is fine for training purposes but it is not suitable for creating a nested layout like the one you require.
You write: "before i had normal boxes " - probably that HTML is suitable and needs new styling by flexlaout only. Show us that HTML so that we can check
BTW: These browser specific definitions like -ms-flex-item-align are no longer necessary, you can omit them.
Damit es funktioniert musst Du:
<style>
.textcontainer {
border: 2px solid lightblue;
}
</style>
<div class="textcontainer" id="textcontainer1"></div>
<div class="textcontainer" id="textcontainer2"></div>
<script>
// Text definieren
var thetext = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n\
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n\
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n\
sed diam voluptua.';
// Funktion definieren
function nl2br(str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
// Funktion aufrufen, um den Text umzuwandeln
var newtext = nl2br(thetext);
// Originalen und umgewandelten Text ausgeben
document.getElementById("textcontainer1").innerHTML = thetext;
document.getElementById("textcontainer2").innerHTML = newtext;
</script>Rufst Du dann die Seite auf, erkennst Du, dass der originale Text ohne Zeilenumbrüche dargestellt wird, aber der umgewandelte mit.
Ich hatte es bisher so verstanden: Der Benutzer wählt einen Ort im Select aus. Für diesen Ort sollen dann die Koordinaten lat und lng übertragen werden. Aber jetzt schreibst Du: "um für jeden Ort ein Hidden mit zu geben?" Also sollen für alle Orte in dem Select die Koordinaten übertragen werden?
PS: Andere Lösung ohne Javascript: lat und lang durch Semikolon getrennt zum value-Attribut der option hinzu fügen. Dann kannst du sie in PHP wieder zerlegen und benutzen.
value="ort;50.4300;12.10410"
Da musste ich einen Moment überlegen, aber jetzt verstehe ich, denke ich, was Du vor hast. Soweit ich das überblicke, geht das am einfachsten mit Javascript:
Die zwei hidden inputs außerhalb des Select und nur einmal anlegen.
Die Koordinaten lat und lang als data-Attribute jeweils bei den options hinzu fügen.
Eventlistener beim select für das change-Event. Darin die data-Attribute mit lat und lng der ausgewählten Option auslesen und als value in die beiden Inputs eintragen.
So, ich bin jetzt in das PHP von Stackoverflow eingestiegen und habe heraus gefunden, warum das automatische Umschalten nicht funktioniert:
Lautet das Kürzel z. B. en-gb, so werden beide Hälften getrennt ausgewertet. Das "gb" rechts vom Bindestrich bekommt eine höhere Priorität und wird deshalb als bevorzugte Sprache ausgewählt. Im HTML und CSS ist jedoch nur "en" vorhanden, so dass die Umschaltung nicht funktioniert.
Ich habe den Code so geändert, dass es funktionieren sollte. Die Funktion ist jetzt kürzer und das Array länger. Ich hoffe, aus meinen Kommentaren wird klar, wie es konfiguriert werden muss.
Bei der manuellen Umschaltung habe ich mich für die CSS-Lösung entschieden. Typisch dafür ist, dass es gewisse Einschränkungen gibt: Die Radiobuttons müssen ganz am Anfang des Body stehen und wenn man die Labels entspr. Zustand hervorheben will, muss man sie entspr. adressieren.
Allzu intensiv habe ich es nicht getestet. Wenn Du Fehler findest, melde dich wieder.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Test Sprachumschaltung</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<?php
function get_prefered_language(array $available_languages, $http_accept_language) {
$langs;
preg_match_all('~([\w-]+)(?:[^,\d]+([\d.]+))?~', strtolower($http_accept_language), $matches, PREG_SET_ORDER);
foreach($matches as $match) {
list($a, $b) = explode('-', $match[1]) + array('', '');
$value = isset($match[2]) ? (float) $match[2] : 1.0;
if(isset($available_languages[$match[1]])) {
$langs[$match[1]] = $value;
continue;
}
}
arsort($langs);
return $langs;
}
// Die folgende Zeile aktivieren zum Test fuer Englisch
// $_SERVER["HTTP_ACCEPT_LANGUAGE"] = 'en-us,en;q=0.8,es-cl;q=0.5,zh-cn;q=0.3';
// Languages we support
// Key: language from browser
// Value: language used in HTML/CSS class
$available_languages = array(
"de" => "de", "de-de" => "de", "de-at" => "de", "de-ch" => "de",
"en" => "en", "en-us" => "en", "en-gb" => "en", "en-ca" => "en"
);
$displayed_languages = array_unique($available_languages);
$langs = get_prefered_language($available_languages, $_SERVER["HTTP_ACCEPT_LANGUAGE"]);
if (count($langs) > 0) {
reset($langs);
$thelang = $available_languages[key($langs)];
} else $thelang = "de";
?>
<style>
input[value='de']:checked ~ *:not([class*='lang-de'])[class*='lang-'] {display: none;}
input[value='de']:checked ~ * *:not([class*='lang-de'])[class*='lang-'] {display: none;}
input[value='en']:checked ~ *:not([class*='lang-en'])[class*='lang-'] {display: none;}
input[value='en']:checked ~ * *:not([class*='lang-en'])[class*='lang-'] {display: none;}
input { display: none; border: 2px solid transparent;}
input[id='rdlang-de']:checked ~ label[for='rdlang-de'] {border: 2px solid grey;}
input[id='rdlang-en']:checked ~ label[for='rdlang-en'] {border: 2px solid grey;}
</style>
</head>
<body>
<!-- Die Inputs, die im folgenden generiert werden, muessen ganz am Anfang des Body stehen.
Die Labels können an beliebiger Stelle stehen. -->
<?php
foreach($displayed_languages as $acc_lang => $disp_lang) {
if ($disp_lang == $thelang) $rq = ' checked'; else $rq = '';
echo '<input type="radio" id="rdlang-' . $disp_lang . '" name ="rdlang" value="' . $disp_lang . '"' . $rq . '>';
}
?>
<label for="rdlang-de">Deutsch</label>
<label for="rdlang-en">English</label>
<p class="lang-de">Dies ist deutscher Text</p>
<p class="lang-de">Dies ist noch ein deutscher Text</p>
<div>
<p class="lang-de">Dies ist eingebetteter deutscher text</p>
</div>
<p class="lang-en">This is english text</p>
<p class="lang-en">This is another english text</p>
<div>
<p class="lang-en">This is nested english text</p>
</div>
<img src="images/sun.jpg">
</body>
</html>Wenn ich bei meinem Browser jetzt 'Englisch' einstelle kommt nicht englisch, wenn ich 'Englisch (Vereinigte Staaten)' einstelle klappt es. Das gleiche auch mit Deutsch.
Daran habe ich auch schon gedacht und ich habe dieses Problem erwartet. Es liegt daran, dass es bei einigen Sprachen regionale Ausprägungen gibt, z. B. en-US. Du hast das ja schon gefunden. Ich werde es mir ansehen und eine Lösung ausarbeiten. Muss mich erst Mal schlau machen wie man das in Opera umstellt.
Bei der Benutzerumschaltung tendiere ich dahin, es clientseitig zu machen, damit die Seite beim Umschalten nicht neu geladen wird und nicht flackert. Erst dachte ich an Javascript, aber dann habe ich einen Blick auf das Codepen in deinem ersten Posting geworfen und gesehen, dass es ohne weiteres auch mit reinem CSS geht, wenn auch die Selektoren etwas kompliziert würden. Hast Du da eine bestimmte Präferenz?
Dann können wir uns ja dem nächsten Schritt zuwenden: Manuelle Umschaltung durch den Benutzer.
Im Moment kommt bei mir noch folgendes:
Code
- 0) { reset($langs); $thelang = key($langs); } else $thelang = "de"; echo ''; ?>
- Dies ist deutscher Text
- This is english text
Da offenbar der PHP-Code angezeigt statt interpretiert wird, vermute ich, dass Du deiner Seite noch nicht die Endung .php gegeben hast?
Den Code hatte ich getestet und bei mir hat er einwandfrei funktioniert.
und zwar war darum ein div container der keine höhe hatte, also hat dieser eine höhe und breite von 0px und davon 100% ist genau NULL... richtig?
Genau, das war es, was ich oben gemeint hatte.
Wenn ich jedoch nur background-size: 100%; eingebe wird es wieder unten abgeschnitten. Warum?
Da musste ich selbst erst Mal genau nachlesen:
https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size
Sie schreiben:
Die erste Angabe spezifiziert die gewünschte Breite der Hintergrundgrafik, die zweite entsprechend die Höhe. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.
D. h. ist das Seitenverhältnis von Container und Hintergrundbild nicht gleich, wird etwas abgeschnitten, oder es bleibt freier Raum bzw. das Bild wiederholt sich, abhängig von background-repeat.
dann ist es auch unten abgeschnitten.
und auch bei
background-size: cover;
Das ist genau das Verhalten von cover: Das Bild wird so angepasst, dass es ohne Verzerrung den Container ausfüllt. Stimmen die Seitenverhältnisse nicht überein, führt das dazu, dass etwas abgeschnitten wird, entweder seitlich oder oben/unten.
etwas ausserhalb von meinen Möglichkeiten..
Keine Sorge, es geht auch einfacher.
Grundsätzlich möchte ich auch, weil es so wenig Text pro Seite ist, auch lieber nicht mehrere SeiteX_[Sprache].html haben
Auch das ist kein Problem. Versuche diesen Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Test Sprachumschaltung</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<?php
function prefered_language(array $available_languages, $http_accept_language) {
$available_languages = array_flip($available_languages);
$langs;
preg_match_all('~([\w-]+)(?:[^,\d]+([\d.]+))?~', strtolower($http_accept_language), $matches, PREG_SET_ORDER);
foreach($matches as $match) {
list($a, $b) = explode('-', $match[1]) + array('', '');
$value = isset($match[2]) ? (float) $match[2] : 1.0;
if(isset($available_languages[$match[1]])) {
$langs[$match[1]] = $value;
continue;
}
if(isset($available_languages[$a])) {
$langs[$a] = $value - 0.1;
}
}
arsort($langs);
return $langs;
}
// Die folgende Zeile aktivieren zum Test fuer Englisch
// $_SERVER["HTTP_ACCEPT_LANGUAGE"] = 'en-us,en;q=0.8,es-cl;q=0.5,zh-cn;q=0.3';
// Languages we support
$available_languages = array("en", "de");
$langs = prefered_language($available_languages, $_SERVER["HTTP_ACCEPT_LANGUAGE"]);
if (count($langs) > 0) {
reset($langs);
$thelang = key($langs);
} else $thelang = "de";
echo '<style>:not([class*=\'lang-' . $thelang . '\'])[class*=\'lang-\'] {display: none;}</style>';
?>
</head>
<body>
<p class="lang-de">Dies ist deutscher Text</p>
<p class="lang-en">This is english text</p>
<img src="images/sun.jpg">
</body>
</html>Du brauchst dann nur die Klasse lang-de oder lang-en usw. zu den HTML-Tags hinzufügen. Ist keine dieser Klassen vorhanden, wie in dem Beispiel beim img-Tag, wird das Element unabhängig von der Sprche angezeigt.
Das PHP ist im Wesentlichen von hier:
https://stackoverflow.com/questions/3770…language-in-php
Nächster Schritt: Das PHP auslagern, damit die Seiten übersichtlicher werden.
Übernächster Schritt: Umschaltung durch Benutzer hinzu fügen.
Im Video funktioniert das, was Du oben gepostet hast, auch nicht, denn Du hast das Gleichheitszeichen hier vergessen:
punkte(name1 + name2).length;
Richtig wäre:
punkte = (name1 + name2).length;
Mir scheint, dass dieser Kurs weniger zu empfehlen ist: Ziemlich nachlässig gemacht, da wird zunächst Code hingeschrieben, der nicht funktioniert, z. b. length() und dann schnell korrigiert und die Verwendung von document.write ist eher nicht zu empfehlen.
Ich empfehle, lieber das Tutorial hier bei html-seminar durchzuarbeiten:
dann verschwindet das Bild komplett.
Hast Du da vielleicht width und height weg gelassen?
An dieser Stelle kann es angebracht sein, zusätzlich zur Validierung durch PHP bereits clientseitig eine mit dem Pattern-Attribut durchzuführen:
Beachte jedoch, dass diese Befehle zzt. weder von IE noch von Edge unterstützt werden:
Wenn man dieses CSS verwendet, füllt das Bild das Browserfenster aus. Ausnahme ist ein schmaler Rand darum herum, den man mit body {margin: 0;} weg bekommt. Dann wird das Bild ohne Scrollbalken angezeigt. Wenn Du nach rechts scrollen kannst, muss das an anderem Inhalt auf deiner Seite liegen.
welches den unteren Teil des Bildes nicht zeigt
Das ist ein generelles Problem, wenn man ein Bild in einem vorgegebenen Rahmen anzeigt: Will man das Seitenverhältnis beibehalten, muss man in Kauf nehmen, dass oben oder seitlich abgeschnitten wird. Will man dagegen das Abschneiden verhindern, muss man in Kauf nehmen, dass sich das Seitenverhältnis ändert und das Bild verzerrt wird. Möchtest Du letzteres, musst Du background-size: 100% 100%; verwenden.
Und wie wäre es wenn ich die Größe des Bildes prozentual verändern möchte. Sprich vom eigentlichen Bild zb 10% oder 110% usw?
Ich glaube, das hatten wir schon in einem anderen Thread. Wenn Du z. B. 10% vom Bild haben willst, musst Du transform: scale(0.1); verwenden.
Wie Du die divs anordnest kannst Du in dem Link in Posting #3 nachlesen. Gleich am Anfang wird es beschrieben.
Dann informiere dich über background-color mit rgba, damit kannst Du ein halb transparente Hintergrundfarbe einstellen:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-color