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

Verschiebung von Tabellendaten berichtigen

MelMel3

Neues Mitglied
Hi, bei einem Kontaktformular hat die zweite Zeile der Tabelle aus irgendeinem Grund verursacht, dass die Daten der ersten Zeile nach rechts verschoben wurden. Weiß einer warum? Ich komme beim besten Willen nicht drauf. Hier erst mal der Code. Ganz unten ein Bild.
HTML:
<form>
        <fieldset style="border:white">
         
            <table>
                <tr>
                    <td>
            <label><p class="schiebe">Anrede<img id="schiebestern" src=sternchen.png></p>
           
            <select id="anrede">
                <option>Herr</option>
                <option>Frau</option>
            </select>
        </label>
    </td>

      <td>
            <label><p class="schiebe">Vorname<img id="schiebestern" src=sternchen.png></p>
                <input id="vorname" type="text" placeholder="Vorname" >
            </label>
        </td>

        <td>
            <label><p class="schiebe">Nachname<img id="schiebestern" src=sternchen.png></p>
            <input id=nachname type="text" placeholder="Nachname">
        </label>
        </td>
        </tr>
       
        <tr>
            <td>
                <label> <p class="schiebe">Straße/Nr.<img id="schiebestern" src=sternchen.png></p>
                    <input id="straße" type="text" placeholder="Straße/Nr">
                    <label>
            </td>
        </tr>
        </table>
        </fieldset>
    </form>
CSS:
.schiebe{
    color:rgb(94, 94, 94);
    font-size:small;
    line-height:  2em;
    margin-bottom:-3px;
}

#anrede{
    width: 150px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
}

#vorname{
    width: 300px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
}

#nachname{
    width: 300px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
   
}

#straße{
    width: 750px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
   
}

1640783576567.png
Viele Grüße :)
 

m.scatello

Senior HTML'ler
Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.
 

MelMel3

Neues Mitglied
Okay ja, ich verstehe deinen Punkt, aber hier geht es doch um verschiedene Themen. Im ersten Post war meine Frage, wie man Eingabefelder nebeneinander anreiht, das Problem hat sich mittlerweile durch die Verwendung von einer Tabelle lösen lassen. In diesem Post geht es doch aber darum, dass sich ein Element der Tabelle aus mir unbekannten Gründen verschoben hat und wie man das beheben kann. Ich sehe deutlich, dass ich es nächstes Mal besser formulieren muss. Dass das Crossposting ist, war mir wirklich nicht bewusst.
 

MrMurphy

Senior HTML'ler
Wie m.scatello bereits schrieb ist die Verwendung des table-Elements bei Formularen nach den HTML-Regel verkehrt und damit sachlich falsch. Spätestens wenn du dein Formular an unterschiedliche Bildschirmbreiten anpassen willst hast du komplett verloren.

Weiß einer warum?

Ja. Dazu solltest du per CSS die Zellrahmen der td-Elemente einblenden.

Bei einer Tabelle sind alle Spalten gleich breit. Auch wenn du in der zweiten Zeile nur eine Tabellenzelle einträgst, gilt die nur für die erste Spalte. Damit wird auch die direkt darüber liegende Tabellenzelle auf die gleiche Breite gebracht. Die breiteste Zelle bestimmt die Breite der gesamten Spalte. Damit werden die beiden daneben liegenden Zellen entsprechend nach rechts verschoben.

Das ist das normale Tabellenverhalten. Daran können auch deine Breitenangaben nichts ändern.
 
Zuletzt bearbeitet:

MelMel3

Neues Mitglied
Verwendung des table-Elements bei Formularen nach den HTML-Regel verkehrt und damit sachlich falsch.
Hat mein Lehrer auch gesagt, nach dem ich es anders nicht geschafft habe, ist mir der table-Tag eingefallen. Du hast aber völlig recht, danke für die Erklärung. Was wäre denn deiner Meinung nach eine bessere Methode? Mit div hat es auch nicht funktioniert.
 

Sempervivum

Senior HTML'ler
Hat mein Lehrer auch gesagt
Das ist ja immerhin etwas Positives - mitunter liest man Fragen wo offenbar wird, dass der Lehrer nicht ganz auf dem neuesten Stand ist.
Mit div hat es auch nicht funktioniert.
Allein mit den Hinzufügen von Containern lässt sich das Problem nicht lösen. Wenn Du Gridlayout verwendest wird es jedoch relativ einfach:
Dein Layout kannst Du dann z. B. so erreichen:
HTML:
    <form>
        <label>
            <div>Anrede<img class="schiebestern" src=sternchen.png></div>
            <select id="anrede">
                <option>Herr</option>
                <option>Frau</option>
            </select>
        </label>
        <label>
            <div>Vorname<img class="schiebestern" src=sternchen.png></div>
            <input id="vorname" type="text" placeholder="Vorname">
        </label>
        <label>
            <div>Nachname<img class="schiebestern" src=sternchen.png></div>
            <input id=nachname type="text" placeholder="Nachname">
        </label>
        <label>
            <div>Straße/Nr.<img class="schiebestern" src=sternchen.png></div>
            <input id="strasse" type="text" placeholder="Straße/Nr">
        </label>
    </form>
CSS:
        form {
            display: grid;
            /* Wir erzeugen drei Spalten mit gleicher Breite: */
            grid-template-columns: 1fr 1fr 1fr;
        }

        form label {
            display: flex;
            /* innerhalb eines Labels ordnen wir die Elemente untereinander an: */
            flex-direction: column;
        }

        /* Mit last-of-type adressieren wir das letzte Element: */
        form label:last-of-type {
            /* das Element soll alle drei Spalten überspannen: */
            grid-column: 1/4;
        }

BTW: Du hattest da noch einen Fehler in der Form, dass Du allen Sternchen die selbe ID gegeben hast. Eine ID darf es jedoch nur einmal geben. Statt dessen eine Klasse verwenden.
 

Sempervivum

Senior HTML'ler
Ups, mit span beschwert sich der Validator nicht mehr:
HTML:
    <form>
        <label>
            <span>Anrede<img class="schiebestern" src=sternchen.png></span>
            <select id="anrede">
                <option>Herr</option>
                <option>Frau</option>
            </select>
        </label>
        <label>
            <span>Vorname<img class="schiebestern" src=sternchen.png></span>
            <input id="vorname" type="text" placeholder="Vorname">
        </label>
        <label>
            <span>Nachname<img class="schiebestern" src=sternchen.png></span>
            <input id=nachname type="text" placeholder="Nachname">
        </label>
        <label>
            <span>Straße/Nr.<img class="schiebestern" src=sternchen.png></span>
            <input id="strasse" type="text" placeholder="Straße/Nr">
        </label>
    </form>
 
Werbung:
Oben