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

[ERLEDIGT] Probleme mit Zeilenumbruch

Status
Für weitere Antworten geschlossen.
T

traab

Neues Mitglied
Hallo,
ich arbeite gerade an einer Übung und bin auf ein Problem gestoßen, das ich alleine nicht bewältigen kann.

Weiter unten findet ihr das Bild meines Formulares. Irgendwie rückt durch die TextArea aber ein Element weiter runter als das andere. Bitte entschuldigt meine Ausdrucksweise, ich bin noch am Anfang meiner CSS-Erfahrungen.


Unbenannt.PNG


Hier der CSS Code:
HTML: 
.label_form{
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
}

textarea{
    float:right;
    resize: none;
}

input[type=text]{
    float: right;
}

input[type=checkbox],select,.label_sub{
    float: left;
    margin-right:10px;
    margin-top: 30px;
}

Und der HTML-Code

HTML: 
<fieldset>
            <legend>Blogeintrag erfassen</legend>
            <label class="label_form" for="Vorname">Vorname:</label>
            <input type="text" id="Vorname">

            <label class="label_form" for="Nachname">Nachname:</label>
            <input type="text" id="Nachname">

            <label class="label_form" for="Email">E-Mail:</label>
            <input type="text" id="Email">

            <label class="label_form" for="Nachricht">Nachricht:</label>
            <textarea id="Nachricht" rows="3"></textarea>

            <label class="label_sub" for="Newsletter">Newsletter</label>
            <input type="checkbox" CHECKED id="Newsletter">

            <label class="label_sub" for="Prioritaet">Priorit&auml;t </label>
            <select id="Prioritaet">
                <option value="high">Hoch</option>
                <option value="mid">Mittel</option>
                <option selected value="low">Niedrig</option>
            </select>
        </fieldset>


Danke für eure Hilfe!

LG traab
 
Hallo Tronjer,
wenn ich den Inputs und TextAreas eine width gebe ist mein ganzes Formular zerschossen.

LG traab
 
Die Elemente haben ohnehin eine width. Sofern du nichts angibst, werden die vom UserAgent STylesheet übernommen.
 
Neben dem Tipp von Tronjer ist nach dem <textarea> ein clear:both vonnöten, um dessen float:right zu beenden, damit "Newsletter" nicht nach oben wandert.

Hier habe ich mal als möglichen Vorschlag die Formularelemente in einer unsortierten Liste gruppiert:
HTML: 
<fieldset>
  <legend>Blogeintrag erfassen</legend>
  <ul>
    <li>
      <label class="label_form" for="Vorname">Vorname:</label>
      <input type="text" id="Vorname">
    </li>
    <li>
      <label class="label_form" for="Nachname">Nachname:</label>
      <input type="text" id="Nachname">
    </li>
    <li>
      <label class="label_form" for="Email">E-Mail:</label>
      <input type="text" id="Email">
    </li>
    <li>
      <label class="label_form" for="Nachricht">Nachricht:</label>
      <textarea id="Nachricht" rows="3"></textarea>
    </li>
    <li>
      <label class="label_sub" for="Newsletter">Newsletter</label>
      <input type="checkbox" CHECKED id="Newsletter">
      <label class="label_sub" for="Prioritaet">Priorit&auml;t </label>
      <select id="Prioritaet">
        <option value="high">Hoch</option>
        <option value="mid">Mittel</option>
        <option selected value="low">Niedrig</option>
      </select>
    </li>
  </ul>
</fieldset>
Ergänzung im CSS:
CSS: 
fieldset {width:350px} /* Wert frei gewählt */
input[type=text],textarea {width:200px} /* Wert frei gewählt */
ul {list-style:none;margin:0;padding:0}
ul li:last-of-type {clear:both}
 
Hallo

Aktuell bietet sich an das Layout mit Flexbox zu erstellen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Formular Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
      fieldset {
         width: 600px;
         padding: 1rem 1rem 0 1rem;
      }
      input,
      textarea {
         font-family: sans-serif;
         font-size: 1rem;
      }
      fieldset div {
         display: flex;
         flex-wrap: wrap;
      }
      fieldset>div>* {
         flex: 1 1 100%;
      }
      fieldset>div>*>* {
         margin-bottom: 1rem;
      }
      fieldset>div>*>:nth-child(1) {
         flex: 1 1 33%;
      }
      fieldset>div>*>:nth-child(2) {
         flex: 1 1 65%;
      }
      .checkbox,
      .select {
         display: flex;
         justify-content: flex-start;
         align-items: center;
      }
      .checkbox>:nth-child(1) {
         margin-right: 0;
         flex: 1 1 40%;
      }
      .checkbox>:nth-child(2) {
         width: 0.5rem;
         flex: 1 1 10%;
      }
      .select>:nth-child(1) {
         margin-right: 0;
         flex: 1 1 38%;
      }
      .select>:nth-child(2) {
         font-size: 0.9rem;
         width: 0.5rem;
         flex: 1 1 60%;
      }
   }

   </style>
</head>
<body>
   <fieldset>

      <legend>Blogeintrag erfassen</legend>

      <div>

         <div>
            <label for="Vorname">Vorname:</label>
            <input id="Vorname" type="text">
         </div>
        
         <div>
            <label for="Nachname">Nachname:</label>
            <input id="Nachname" type="text">
         </div>
        
         <div>
            <label for="Email">E-Mail:</label>
            <input id="Email" type="text">
         </div>
        
         <div>
            <label for="Nachricht">Nachricht:</label>
            <textarea id="Nachricht" rows="5"></textarea>
         </div>
        
         <div>
            <div class="checkbox">
               <label for="Newsletter">Newsletter</label>
               <input id="Newsletter" type="checkbox" checked>
            </div>
          
            <div class="select">
               <label for="Prioritaet">Priorität</label>
               <select id="Prioritaet">
                  <option value="high">Hoch</option>
                  <option value="mid">Mittel</option>
                  <option selected value="low">Niedrig</option>
               </select>
            </div>

         </div>

      </div>

   </fieldset>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben