Ergebnis 1 bis 2 von 2

Thema: Checkboxen in zwei Spalten anordnen

  1. #1
    HTML Newbie
    Registriert seit
    06.04.2015
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Checkboxen in zwei Spalten anordnen

    Hi,

    hab ein kleines Problem und zwar habe ich sechs Checkboxen die ich wie im folgenden Bild anordnen muss(also in zwei Spalten)

    book_entry.jpg

    Ich habe etliches versucht komme aber einfach nicht auf die Lösung...
    Ich dachte mir mit float könnte man dafür sorgen, dass sich die Elemente richtig anorden aber Pustekuchen

    Vllt könnt ihr mir auf die Sprünge helfen.

    Code:
    <label class="boxdescr" for="check1">Horror<input class="box" id="check1" type="checkbox" name="horror"></label>
    
    <label class="boxdescr" for="check2">Psycho<input class="box" id="check2" type="checkbox" name="psycho"></label>
    
    <label class="boxdescr" for="check3">Krimi<input class="box" id="check3" type="checkbox" name="krimi"></label>
    
    <label class="boxdescr" for="check4">Doku<input class="box" id="check4" type="checkbox" name="doku"></label>
    
    <label class="boxdescr" for="check5">Komödie<input class="box" id="check5" type="checkbox" name="komödie"></label>
    
    <label class="boxdescr" for="check6">Romanze<input class="box" id="check6" type="checkbox" name="romanze"></label>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Checkboxen in zwei Spalten anordnen

    Hallo,

    grundsätzlich solltest du erst mal deinen HTML-Quelltext ändern. Also label und input nicht verschachteln. Danach die input vor die label setzen, so wie sie auch erscheinen sollen. Zum Schluß das ganze noch in ein form-Element packen: Das sieht dann so aus:

    Code:
       <form id="formular" action="#" method="post">
    
          <input class="box" id="check1" type="checkbox" name="horror">
          <label class="boxdescr" for="check1">Horror</label>
    
          <input class="box" id="check2" type="checkbox" name="psycho">
          <label class="boxdescr" for="check2">Psycho</label>
    
          <input class="box" id="check3" type="checkbox" name="krimi">
          <label class="boxdescr" for="check3">Krimi</label>
    
          <input class="box" id="check4" type="checkbox" name="doku">
          <label class="boxdescr" for="check4">Doku</label>
    
          <input class="box" id="check5" type="checkbox" name="komödie">
          <label class="boxdescr" for="check5">Komödie</label>
    
          <input class="box" id="check6" type="checkbox" name="romanze">
          <label class="boxdescr" for="check6">Romanze</label>
    
       </form>
    Aktuell bietet sich zur Anordnung dann das Flexbox-Modell an, das CSS könnte dann so aussehen:

    Code:
    * {
       -moz-box-sizing: border-box;
       box-sizing: border-box;
    }
    html {
       font-size: 100%;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
    }
    body {
       padding: 0;
    }
    input,
    select {
       font-size: 1rem;
       padding: 0;
       margin: 0;
    }
    form {
       width: 50%;
       padding: 0;
       margin: 0;
       display: block;
       display: flex;
       flex-wrap: wrap;
    }
    input {
       width: 4%;
    }
    label {
       width: 45%;
    }
    Die Werte sind natürlich nur Vorschläge, die müsstest du dann noch deinen Erfordernissen anpassen.

    Wenn du den HTML-Quelltext wie vorgeschlagen geändert hast kannst du natürlich auch auf float zurückgreifen, dabei wie immer das clear nicht vergessen.

    Gruss

    MrMurphy

Ähnliche Themen

  1. Mehrere Checkboxen in unterschiedliche Spalten der Datenbank eintragen lassen
    Von Marcese im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 23.03.2012, 12:45
  2. CSS Spaltenlayout zwei Spalten gleiche Länge mit float
    Von Josifine im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.12.2011, 02:20
  3. Dreispalten-Layout (zwei Spalten sind zu kurz)
    Von anagramm im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 23.12.2010, 22:45
  4. Zwei Buttons zwei funktionen
    Von Gimminy im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 03.08.2010, 10:49
  5. Checkboxen mit $GET
    Von CHoTlMaL im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 12.04.2007, 20:39

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •