1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Anordnung von Radio- und Chechboxen

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von Padawan, 9. August 2015.

  1. Padawan

    Padawan Erfahrenes Mitglied

    Hallo Leute,

    ich hab folgenden code geschrieben:

    HTML:
    1. <div id="content">Content
    2.    <form method="post" action="Auswahl_Validation.php">
    3.      <fieldset> <!-- Zeit Auswählen -->
    4.        <input type="radio" id="zeitraum" name="Zahlmethode" value="Mastercard">
    5.        <label for="mc"> Mastercard</label><br>
    6.      
    7.        <input type="radio" id="aktuell" name="Zahlmethode" value="Visa">
    8.        <label for="vi"> Visa</label><br>
    9.      </fieldset>
    10.    
    11.      <fieldset>   <!-- Kanal Auswählen -->
    12.        <legend>Verbrauchskanal auswählen:</legend>
    13.      
    14.        <input name="zaeler" type="checkbox" value="1" id="KanalA" />              
    15.        <label for="KanalA">Kanal 1</label><br />
    16.      
    17.        <input name="zaeler" type="checkbox" value="2" id="KanalB" />          
    18.        <label for="KanalB">Kanal 2</label><br />
    19.      
    20.        <input name="zaeler" type="checkbox" value="3" id="KanalC" />
    21.        <label for="KanalC">Kanal 3</label><br />
    22.      
    23.        <input name="zaeler" type="checkbox" value="4" id="KanalD" />
    24.        <label for="KanalD">Kanal 4</label><br />
    25.      
    26.      </fieldset>
    27.    
    28.      <fieldset>
    29.        <legend>Zeitraum</legend>
    30.      
    31.        <label for="beginDatum">Begin</label><br />
    32.        <input type="text" name="zeitraumBegin" id="beginDatum" />
    33.      
    34.        <label for="lastname">Ende</label><br />
    35.        <input type="text" name="zeitraumEnde" id="enddatum" />
    36.      </fieldset>
    37.    
    38.      <p>
    39.        <input type="submit" name="action" value="Register" />
    40.        <input type="reset" value="Reset Form" />
    41.        <input type="hidden" name="session" value="A398DF991" />
    42.      </p>
    43.    </form>
    44.  
    45. </div>
    Hier der CSS-Code:
    Code (Text):
    1. div#navi a {
    2. display:block;
    3. margin-top:10px;
    4. margin-left:5px;
    5. margin-right:5px;
    6. background:silver;
    7. color:black;
    8. text-decoration:none;
    9. text-align:left;
    10. }
    11. a:hover{
    12.   background-color: #0efdf4;
    13. }
    14. div#navi a:hover {
    15. display:block;
    16. background:green;
    17. color:yellow;
    18. text-align:center;
    19. }
    20.  
    21. /************* Content *******/
    22. div#content {
    23. background:papayawhip;
    24. width:650px;
    25. height:400px;
    26. text-align: left;
    27. float:left;
    28. }
    29. /************* Marginal *******/
    30. div#marginal {
    31. background-color:silver;
    32. width:160px;
    33. height:400px;
    34. float:right;
    35. }
    36.  
    37. /************* Fußbereich *******/
    38. div#footer {
    39. background:lightsteelblue;
    40. height:80px;
    41. clear:right;
    42. }
    Die Sache ist, dass ich ein Radio-Button, ein Checkbox-Group und 2 Text"flächen" für Datumseingaben habe.
    in der aktuellen Darstellung ist es so, dass diese 3 Gruppen untereinander dargestellt werden. Wie kriegt man das so hin, dass diese 3 Gruppen nebeneinander dargestellt werden? Wie kann man die 2 Text"flächen", in Abhängigkeit von der Auswahl der Radiobuttons "ein- und ausschalten"?

    Ich würde mich um eure Hilfe freuen.

    Viele Grüße
    Padawan
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Beispielsweise mittels float:left für die <fieldset>-Elemente.

    Demo: http://jsfiddle.net/spicelab/xgc0qtg3/
    Mit JavaScript.

    Dazu dürftest du im hiesigen JS-Fachforum genügend Lösungsansätze finden, da diese Frage hier nicht zum ersten mal auftaucht ;)
     
    Zuletzt bearbeitet: 9. August 2015
    Hanno77 und Padawan gefällt das.
  3. Padawan

    Padawan Erfahrenes Mitglied

Die Seite wird geladen...