Avatar of nikola_mk
nikola_mk
 asked on

How to write CSS and HTML with Checkbox like screen?

HI,

 Can somebody send me css and html code for form like picture?

Thanks
screen.JPG
Web Languages and StandardsHTMLCSS

Avatar of undefined
Last Comment
ziffgone

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
ziffgone

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
nikola_mk

ASKER
Thanks man!
nikola_mk

ASKER
ziffgone,
can you tell me how can i put these commponents in one div ?
I can't put in div ( giv is on top of commponents)

here is code

 
 <div id=d_komp>  
                                      
                                      
                                      <div id="lft">
                                          <p>0B53>@8X0</p>
                                        </div>
                                       <div id="rgt">
                                            <p><input type="checkbox" value="wc" name="wc"> WC</p>
                                            <p><input type="checkbox" value="wc3" name="wc3"> "5@0A0   </p>
                                            <p><input type="checkbox" value="wc6" name="wc6"> "       </p>
                                            <p><input type="checkbox" value="wc1" name="wc1"> 0Z0     </p>
                                            <p><input type="checkbox" value="wc4" name="wc4"> 2>@     </p>
                                            <p><input type="checkbox" value="wc7" name="wc7"> ;8<0    </p>
                                            <p><input type="checkbox" value="wc2" name="wc2"> CX=0    </p>
                                            <p><input type="checkbox" value="wc5" name="wc5"> 0@:8=3  </p>
                                            <p><input type="checkbox" value="wc8" name="wc8"> =B5@=5B </p>
                                       </div>
 
 
CSS for d_komp 
#d_komp	{
	border-top:solid 1px #993333;
	border-bottom:solid 1px #dddddd;
	width: 510px;
    margin-left: auto ;
    margin-right: auto ;
	padding-top:30px;
	padding-bottom:10px;
}

Open in new window

ziffgone

Try this:


<div id="d_komp">
<p id="lft">Select:</p>
<p class="rgt"><input type="checkbox" value="wc" name="wc"> WC</p>
<p class="rgt"><input type="checkbox" value="wc3" name="wc3"> WC <span>3</span></p>
<p class="rgt"><input type="checkbox" value="wc6" name="wc6"> WC <span>6</span></p>
<br class="brk" /><br class="brk" /><!--[if IE]><br class="brk" /><![endif]-->
<p class="rgt"><input type="checkbox" value="wc1" name="wc1"> WC <span>1</span></p>
<p class="rgt"><input type="checkbox" value="wc4" name="wc4"> WC <span>4</span></p>
<p class="rgt"><input type="checkbox" value="wc7" name="wc7"> WC <span>7</span></p>
<br class="brk" /><br class="brk" /><!--[if IE]><br class="brk" /><![endif]-->
<p class="rgt"><input type="checkbox" value="wc2" name="wc2"> WC <span>2</span></p>
<p class="rgt"><input type="checkbox" value="wc5" name="wc5"> WC <span>5</span></p>
<p class="rgt"><input type="checkbox" value="wc8" name="wc8"> WC <span>8</span></p>
<br class="brk" /><br class="brk" /><!--[if IE]><br class="brk" /><![endif]-->
</div>
 
// Add the following CSS to your style sheet:
 
#lft {
        width:50px;
        height:70px;
        margin: 10px 0px 30px 60px;
        float:left;
        font-weight:bold;
        font-size:1.2em;
}
.rgt {
        float:left;
        margin: 10px 0px 10px 20px;
        font-weight:bold;
        width:80px;
}
.rgt span {
        font-size:1.2em;
}
.brk {
        margin:10px 0px 0px 0px;
}

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy