[GELOEST] Input = Text ausgeben

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

basti1012

Senior HTML'ler
26 November 2017
1.442
150
63
39
Minden
sebastian1012.bplaced.net
Du hast da einige Fehler in html und Css drinn, und etwas unordnung
Wie soll das eigentlich aussehen ?
Wie im ersten Beitrag , oder wie in beitrag 17# ?

Sowas &auml; , &ouml; usw ist blödsinn, benutze <meta charset="utf-8"> , dann kannst du ganz normal ä,ö usw nutzen
 
Zuletzt bearbeitet:

Senco Snifler

Neues Mitglied
3 September 2020
17
0
1
34
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Dass das so komisch aussieht liegt daran, dass Du text-align: justify; eingestellt hast, das bewirkt, dass der Text im Blocksatz dargestellt wird, was sich für ein schmales Fenster und wenig Text nicht eignet.
Außerdem hast Du dem Container eine feste Höhe gegeben, dadurch läuft der Text aus dem Container heraus, wenn das Browserfenster schmal ist.
Und width: 70%; ist ungünstig, weil Du bei schmalem Browserfenster Platz verschenkst. Besser mit max-width arbeiten.
Im übrigen stimme ich basti1012 zu: Das CSS besser in einen Block zusammen fassen und im Head platzieren. So ist es doch sehr unübersichtlich.
 

Senco Snifler

Neues Mitglied
3 September 2020
17
0
1
34
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.084
404
83
67
Da liegt jetzt das <h1> im head.
Und das mit max-width war anders gedacht: Einen festen Wert, px oder em, statt Prozent verwenden, dann wird die Box nicht beliebig breit aber bei schmalem Bildschirm füllt sie die Breite vollständig aus und es ist mehr Platz für den Text.
 

Senco Snifler

Neues Mitglied
3 September 2020
17
0
1
34
<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>
 

basti1012

Senior HTML'ler
26 November 2017
1.442
150
63
39
Minden
sebastian1012.bplaced.net
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:

Senco Snifler

Neues Mitglied
3 September 2020
17
0
1
34
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>
 

basti1012

Senior HTML'ler
26 November 2017
1.442
150
63
39
Minden
sebastian1012.bplaced.net
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.
 
  • Like
Reaktionen: Senco Snifler

Senco Snifler

Neues Mitglied
3 September 2020
17
0
1
34
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
 
Werbung:

Neueste Beiträge