Anordnung von Radio- und Chechboxen

Padawan

Erfahrenes Mitglied
Hallo Leute,

ich hab folgenden code geschrieben:

HTML:
<div id="content">Content
   <form method="post" action="Auswahl_Validation.php">
     <fieldset> <!-- Zeit Auswählen -->
       <input type="radio" id="zeitraum" name="Zahlmethode" value="Mastercard">
       <label for="mc"> Mastercard</label><br>
      
       <input type="radio" id="aktuell" name="Zahlmethode" value="Visa">
       <label for="vi"> Visa</label><br>
     </fieldset>
    
     <fieldset>   <!-- Kanal Auswählen -->
       <legend>Verbrauchskanal auswählen:</legend>
      
       <input name="zaeler" type="checkbox" value="1" id="KanalA" />              
       <label for="KanalA">Kanal 1</label><br />
      
       <input name="zaeler" type="checkbox" value="2" id="KanalB" />          
       <label for="KanalB">Kanal 2</label><br />
      
       <input name="zaeler" type="checkbox" value="3" id="KanalC" />
       <label for="KanalC">Kanal 3</label><br />
      
       <input name="zaeler" type="checkbox" value="4" id="KanalD" />
       <label for="KanalD">Kanal 4</label><br />
      
     </fieldset>
    
     <fieldset>
       <legend>Zeitraum</legend>
      
       <label for="beginDatum">Begin</label><br />
       <input type="text" name="zeitraumBegin" id="beginDatum" />
      
       <label for="lastname">Ende</label><br />
       <input type="text" name="zeitraumEnde" id="enddatum" />
     </fieldset>
    
     <p>
       <input type="submit" name="action" value="Register" />
       <input type="reset" value="Reset Form" />
       <input type="hidden" name="session" value="A398DF991" />
     </p>
   </form>

</div>

Hier der CSS-Code:
Code:
div#navi a {
display:block;
margin-top:10px;
margin-left:5px;
margin-right:5px;
background:silver;
color:black;
text-decoration:none;
text-align:left;
}
a:hover{
  background-color: #0efdf4;
}
div#navi a:hover {
display:block;
background:green;
color:yellow;
text-align:center;
}

/************* Content *******/
div#content {
background:papayawhip;
width:650px;
height:400px;
text-align: left;
float:left;
}
/************* Marginal *******/
div#marginal {
background-color:silver;
width:160px;
height:400px;
float:right;
}

/************* Fußbereich *******/
div#footer {
background:lightsteelblue;
height:80px;
clear:right;
}

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
 
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?
Beispielsweise mittels float:left für die <fieldset>-Elemente.

Demo: http://jsfiddle.net/spicelab/xgc0qtg3/
Wie kann man die 2 Text"flächen", in Abhängigkeit von der Auswahl der Radiobuttons "ein- und ausschalten"?
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:
Zurück