attribuut width voor span of label?

Door El Grimbo op 13-08-2008 14:26

308 views

Hi

Ik wil mijn radio buttons met css uitlijnen zodat ze netjes onder elkaar staan. Ik dacht aan het opgeven van width voor het label (die in lengte verschillen afh van de tekst) of een span om de tekst en daar de breedte van vastleggen.

Onder valt te testen (door commentaar in de style sheet weg te halen) dat beide niet werken. Ook een span om label en input of input of radio een width geven hielp niet.

Hoe moet het wel? (ik kon op google niet echt wat vinden)

b.v.d.

grt i.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
/*.radio_label{
	width: 200px;
	border: 1px solid silver;
}*/
/*.spatie{
	width: 200px;
	border: 1px solid navy;
}*/
</style>

</head>

<body>

			<div >
			<input type="radio" name="nb" value="1">
						<label class ="radio_label"><span class="spatie">netto</span></label>
	    		<input type="radio" name="nb" value="2">
	    				<label class ="radio_label"><span class="spatie">bruto</span></label>
	    		<input type="radio" name="nb" value="3">
	    				<label class ="radio_label"><span class="spatie">n.v.t.</span></label>
			</div>
			<div >
			 <input type="radio" name="btw" value="2" class="radio">
    				<label class ="radio_label" ><span class="spatie">incl</span></label>
			<input type="radio" name="btw" value="3" class="radio">
	    			<label class ="radio_label" ><span class="spatie">excl</span></label>
			<input type="radio" name="btw" value="1" class="radio">
					<label class ="radio_label" ><span class="spatie">n.v.t.</span></label>
			</div>
			<div >
			    <input type="radio" name="betaald" value="2">
					<label class="radio_label"><span class="spatie">ja</span></label>
			<input type="radio" name="betaald" value="1">
					<label class="radio_label"><span class="spatie">nee</span></label>
			<input type="radio" name="betaald" value="3">
			    	<label class="radio_label"><span class="spatie">deel</span></label>
			</div>
</body>
</html>

Emmanuel Delay

13-08-2008 23:43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
.radio_container
{
float: left;
width: 80px;
}
.clear_div
{
clear: both;
}
</style>
</head>
  <body>
    <div class="radio_container">
      <input type="radio" name="nb" value="1">
      <label class ="radio_label">netto</label>
    </div>
    <div class="radio_container">
      <input type="radio" name="nb" value="2">
      <label class ="radio_label">bruto</label>
    </div>
    <div class="radio_container">
      <input type="radio" name="nb" value="3">
      <label class ="radio_label">n.v.t.</label>
    </div>
    <div class="clear_div"></div>
    <div class="radio_container">
      <input type="radio" name="btw" value="2" class="radio">
      <label class ="radio_label" >incl</label>
    </div>
    <div class="radio_container">
      <input type="radio" name="btw" value="3" class="radio">
      <label class ="radio_label" >excl</label>
    </div>
    <div class="radio_container">
      <input type="radio" name="btw" value="1" class="radio">
      <label class ="radio_label" >n.v.t.</label>
    </div>
    <div class="clear_div"></div>
    <div class="radio_container">
      <input type="radio" name="betaald" value="2">
      <label class="radio_label">ja</label>
    </div>
    <div class="radio_container">
      <input type="radio" name="betaald" value="1">
      <label class="radio_label">nee</label>
    </div>
    <div class="radio_container">
      <input type="radio" name="betaald" value="3">
      <label class="radio_label">deel</label>
    </div>
  </body>
</html>

Dat is het simpelste, denk ik. Een span kan je niet zomaar een width meegeven.

El Grimbo

14-08-2008 12:24

Hi Emmanuel

bedankt voor je reactie maar...
na nog meer puzzelen heb ik dit gevonden:

met een andere doctype declaratie werkt width wel voor labels: met onderstaande declaratie doet dezelfde code het perfect: (met radio_label als class)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
.radio_label{
    width: 70px;

}
</style>

</head>

<body>

            <div >
            <input type="radio" name="nb" value="1">
                        <label class ="radio_label">netto</label>
                <input type="radio" name="nb" value="2">
                        <label class ="radio_label">bruto</label>
                <input type="radio" name="nb" value="3">
                        <label class ="radio_label">n.v.t.</label>
            </div>
            <div >
             <input type="radio" name="btw" value="2" class="radio">
                    <label class ="radio_label" >incl</label>
            <input type="radio" name="btw" value="3" class="radio">
                    <label class ="radio_label" >excl</label>
            <input type="radio" name="btw" value="1" class="radio">
                    <label class ="radio_label" >n.v.t.</label>
            </div>
            <div >
                <input type="radio" name="betaald" value="2">
                    <label class="radio_label">ja</label>
            <input type="radio" name="betaald" value="1">
                    <label class="radio_label">nee</label>
            <input type="radio" name="betaald" value="3">
                    <label class="radio_label">deel</label>
            </div>
</body>
</html>

Reageren

Inloggen om te reageren