• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Input = Text ausgeben

Wie im 17# nur wie das obere Bild, egal welche Monitorgröße.

Probier ich aus mit "meta".

Ja Unordnung kann sein, freue mich schon, wenn alles so läuft wie es soll :D:D.

Denke wenn sich ein Profi die ganze Webseite anschaut, wir er mit den Händen am Kopf fassen.
 
Code: 
<html>
    <meta charset="utf-8">
    <head>
        
        <title>Gefahrgut</title>

        <style>
            h1 {font-size:80}
            h1 {color: white;}
            h1 {margin-left: 50px}
            h1 {margin-top: 10px}
            h1 {text-shadow: rgb(0, 119, 255) 5px 5px 5px}
        </style>
        <h1>Gefahrgut Länderliste</h1>
        
        <style>
            .test {
                font-size: 25px;
                width: 160px;
                height: 50px;
                
            }
        </style>
        
        <style>
            .label{
                font-size: 40px;
            }
        
        </style>
        
        <style>
            .box {
                max-width: 50%;
                margin-left: 0px;
                border:1px solid black;
                border-radius:10px;
                height:150px;
                padding:10px;
                display:flex;
                box-shadow:3px 3px 3px grey;
              }
              .right{
                flex:2;
                flex-direction:column;
                border-right:2px solid rgb(255, 255, 255);
                font-size: 50px;
                color: rgb(255, 255, 255);
                text-align:left;
              }
            </style>

<style>
    .button {
      display:flex;
      align-items:center;
      margin:-0px 0px;
      }
    
    .button > div {
      background-color: rgba(0, 0, 40, 0.4);
      width: 400px;
      height: 350px;
      margin: 25px;
      font-style: italic;
      font-family: Georgia, 'Arial', Times, serif;
      text-align: center;
      line-height: 300px;
      font-size: 50px;
      color: #fff;
      border-width: 1px;
      border-color: rgba(255, 255, 255, 0);
      border-style:solid;
    }
    </style>

    </head>
    <body style= "background-image:linear-gradient(360deg, #000028 0%, #009999 100%)"></body>

<label>
    <input type="search" list="laender" class="label" placeholder="Länderkürzel">
    <datalist id="laender">
    </datalist>
    <div>
        <div class="box right">
          <div id="output">
          </div>
        </div>
      </div>

</label>
<script>
    const laendertexte = [
['AD', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AE', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AF', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AG', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AI', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AL', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AM', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AN', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AO', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AR', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AS', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AT', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AU', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AW', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AZ', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BA', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BB', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BD', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BE', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BF', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BG', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BH', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BI', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BJ', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BL', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BM', 'bitte ans Outbound oder Teamleiter wenden'],
['BN', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['ZW', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg']]
    const liste = document.getElementById('laender'),
        inp = document.querySelector('input[type="search"]'),
        out = document.getElementById('output');
    inp.addEventListener('input', event => {
        const kuerzel = event.target.value.toUpperCase();
        event.target.value = kuerzel;
        if (kuerzel.length == 2,3) {
            let txt = '';
            laendertexte.some(item => {
                console.log('cyc')
                if (item[0] == kuerzel) {
                    txt = item[1];
                    return true;
                }
            });
            out.textContent = txt;
        }
    });
    laendertexte.forEach(item => {
        let opt = document.createElement('option');
        opt.textContent = item[0];
        liste.appendChild(opt);
    });
</script>

INFO:
Hi zusammen,

habe es alles nach oben gemacht, mache ich auf den anderen Seiten dann auch.

"max-width" und "text-aligne" habe ich geändert. Sieht jetzt schon viel besser aus, auf beiden Bildschirmen.

Vielen Dank für eure Hilfe.
 
<h1> hab ich verschoben und hab jetzt em genommen.



Code: 
<style>
            .box {
                max-width: 25em;
                margin-left: 0px;
                border:1px solid black;
                border-radius:10px;
                height:150px;
                padding:10px;
                display:flex;
                box-shadow:3px 3px 3px grey;
              }
              .right{
                flex:2;
                flex-direction:column;
                border-right:2px solid rgb(255, 255, 255);
                font-size: 50px;
                color: rgb(255, 255, 255);
              }
            </style>
 
Noch was.
Code: 
<body style= "background-image:linear-gradient(360deg, #000028 0%, #009999 100%)"></body>
Fällt dir was auf ?
Wo ist der Inhalt des body`s ?
Deine ganzen Style angaben kannst du auch alles in ein <style> packen, wurde aber schon mal gesagt.
<meta> angaben müssen auch in den <head>,
h1 font-size:80; fehlen die größen Einheiten,
Für das
Code: 
      border-width: 1px;
      border-color: rgba(255, 255, 255, 0);
      border-style:solid;
gibt es auch eine kurze schreibweise
Code: 
      border: 1px solid rgba(255, 255, 255, 0);
oder das
Code: 
     margin:-0px 0px;
minus 0 ergibt für mich kein sinn, mach da einfach margin:0; raus , oder schreib oben in der Css
Code: 
*{
margin:0;
padding:0;
}
Nicht benutzte Css ,kann gelöscht werden ( .test , button > div usw ).
Falls ich jetzt alles richtig gemacht habe , sollte dein Code sortiert so aussehen
HTML: 
<!doctype html>
<html lang='de'>
<head>
<meta charset="utf-8">
<title>Gefahrgut</title>
<style>
*{
  margin:0;
  padding:0;
}
body{
     background-image:linear-gradient(360deg, #000028 0%, #009999 100%);
}
h1 {
  font-size:20px;
  color: white;
  margin-left: 50px;
  margin-top: 10px;
  text-shadow: rgb(0, 119, 255) 5px 5px 5px;
}

.box {
    display:flex;
    flex-direction:column;
    max-width: 25em;
    border:1px solid black;
    border-radius:10px;
    min-height:150px;
    padding:10px;
    box-shadow:3px 3px 3px grey;
    border-right:2px solid rgb(255, 255, 255);
    font-size: 50px;
    color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>Gefahrgut Länderliste</h1>
<label>
    <input type="search" list="laender" class="label" placeholder="Länderkürzel">
    <datalist id="laender">
    </datalist>
    <div>
        <div class="box right">
             <div id="output"></div>
        </div>
      </div>
</label>
<script>
// script code
</script>
</body>
</html>
Dein label Container gefällt mir auch nicht so ganz,
bin mir gerade nicht sicher ob der da falsch angewendet wird?
Muß ich aber auch erst googeln
 
Zuletzt bearbeitet:
Hallo Basti,

Body ist so korrekt soll ja nur die Hintergrundfarbe sein und das wird angezeigt.

h1 font-size:80; fehlen die größen Einheiten = wurde hinzugefügt ^^.

"border" hab ich die gekürzte Variante drin.

"margin", "test" ist raus.

"box" hab ich angepasst, klappt auch alles.

"button" hab ich umbenannt in "bild", da ein Bild an fester stelle angezeigt werden soll.

"label" hab ich raus und die Schriftgröße direkt bei "input" mit eingetragen.

So sieht jetzt der Code aus.

Danke nochmals und sorry für die Späte meldung.


Code: 
<html>
    <meta charset="utf-8">
    <body style= "background-image:linear-gradient(360deg, #000028 0%, #009999 100%)"></body>
    <head>
        
        <title>Gefahrgut</title>

        <style>
            h1 {font-size: 80px;
                color: white;
                margin-left: 50px;
                margin-top: 10px;
                text-shadow: rgb(0, 119, 255) 5px 5px 5px;
            }

            .box {
                max-width: 25em;
                border: 1px solid black;
                border-radius: 10px;
                height: 150px;
                padding: 10px;
                display: flex;
                box-shadow: 3px 3px 3px grey;
                flex-direction: column;
                min-height: 150px;
                border-right: 2px solid rgba(255, 255, 255,);
                font-size: 50px;
                color: rgb(255, 255, 255);
            }

            .bild {
                display:flex;
                align-items:center;
            }
    
            .bild > div {
                background-color: rgba(0, 0, 40, 0.4);
                width: 400px;
                height: 350px;
                margin: 25px;
                font-style: italic;
                font-family: Georgia, 'Arial', Times, serif;
                text-align: center;
                line-height: 300px;
                font-size: 50px;
                color: #fff;
                border: 1px solid rgba(255, 255, 255, 0);
            }
    </style>

    </head>
 
Du verwirrst mich gerade:smile:
Dein Code aus 28# sollte so aussehen

Code: 
<!doctype html>
<html lang="de">
    <meta charset="utf-8">
    <title>Gefahrgut</title>
        <style>
            body{
                background-image:linear-gradient(360deg, #000028 0%, #009999 100%);
            }
            h1 {font-size: 80px;
                color: white;
                margin-left: 50px;
                margin-top: 10px;
                text-shadow: rgb(0, 119, 255) 5px 5px 5px;
            }

            .box {
                max-width: 25em;
                border: 1px solid black;
                border-radius: 10px;
                height: 150px;
                padding: 10px;
                display: flex;
                box-shadow: 3px 3px 3px grey;
                flex-direction: column;
                min-height: 150px;
                border-right: 2px solid rgba(255, 255, 255,);
                font-size: 50px;
                color: rgb(255, 255, 255);
            }

            .bild {
                display:flex;
                align-items:center;
            }
    
            .bild > div {
                background-color: rgba(0, 0, 40, 0.4);
                width: 400px;
                height: 350px;
                margin: 25px;
                font-style: italic;
                font-family: Georgia, 'Arial', Times, serif;
                text-align: center;
                line-height: 300px;
                font-size: 50px;
                color: #fff;
                border: 1px solid rgba(255, 255, 255, 0);
            }
    </style>
</head>
<body>
// hier weiter label,input,div, h1 usw...
</body>
</html>
im head haben nur meta ,title,script,style und link Elemente zu suchen.
alles andere soll im body.
Ein Html Dokument ohne body , sollte meiner meinung nach auch nicht Valide sein.
 
Hallo Basti,

sorry für die Verwirrung :)

Es klappt alles soweit und wurde für gut befunden.

Danke für eure Hilfe.

Jetzt kann ich mich ums nächste Problem kümmern, was keine einfache Aufgabe sein wird. Wie ich das so gelesen habe. :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben