CODEWITHSUNDEEP
htmlcss
CMS_95
CMS_95

Reputation: 335

formatting web page check boxes into straight line

okay so my question is simple is there a way to center a list of check boxes but keep the check boxes in one line instead of a wave pattern? here is what I have as of right now.

     html>
     <Head>
     <center>
     <div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
     <H1>Select a program you want to run.</H1>
     <A href="file://C:\Windows/notepad.exe">Notepad</a>
     <div>
     <a href="file://D:\My Documents">Documents</a>
     <div>
     <a href="file://D:\Desktop\Student Applications">programs</a>
     <div>
     <a href="http://pilot.wright.edu">Pilot</a>
     <div>
     <form>
     <input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input>
     <div>
     <input type="checkbox">A3</input>
     <div>
     <input type="checkbox">CR</input>
     <div>
     <input type="checkbox">CPR</input>
     <div>
     <input type="checkbox">MM</input>
     <div>
     <input type="checkbox">IR</input>
     <div>
     <button type="submit" id="34">SUBMIT</button>
     </form>
     </center>
     </head>
     </html>

once you open this as an HTML you should be able to see what I am talking about. thanks in advance.

Upvotes: 0

Views: 2075

Answers (5)

hyunkeln
hyunkeln

Reputation: 419

There are some problems with your code, you need to place your code in a <body> tag inside <html> tag. Every <div> tag you open needs to be closed with a </div> tag or replace them with <br/> tags.

I think you can center your checkboxes by listing them and then aligning the list items to the left:

 <ul style='width:100px; list-style:none; border:1px solid black; text-align:left;'>
 <li><input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input></li>
 <li><input type="checkbox">A3</input></li>
 <li><input type="checkbox">CR</input></li>
 <li><input type="checkbox">CPR</input></li>
 <li><input type="checkbox">MM</input></li>
 <li><input type="checkbox">IR</input></li>
 </ul>

Width = 100px makes the whole list alignable to center, text-align affects the items so they are left-aligned. I've added a border so you can see whats going on.

It would be good if you remove the <CENTER> tag and apply some CSS to center the whole list.

You can give this a try in this fiddle: http://jsfiddle.net/cdZ6x/

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241098

You have each checkbox within a div, which has the property display:block, thus they appear on new lines. Either change the markup, and remove each div wrapped around the checkboxes.. or set display:inline-block or float:left on the div elements containing the checkboxes.

jsFiddle demo - Easiest option - remove the divs around each checkbox.

If I misunderstood, and you wanted them lined vertically see this jsFiddle demo.

Aside from that there are some serious syntax errors that need to be fixed.

  • <center> is soon to be depreciated, if not already is..
  • You cannot put the html in the head tag.
  • You didn't close most of the tags..

Upvotes: 1

JeremyS
JeremyS

Reputation: 437

CS_STEM: First thing I'd do is make sure you close all your html elements.

If you want these as a list in a straight line then make it a list rather than a bunch of divs, like so:

<div class="checkbox-list">
<ul>
<li><input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input></li>
<li><input type="checkbox">A3</input></li>
<li><input type="checkbox">CR</input></li>
<li><input type="checkbox">CPR</input></li>
<li><input type="checkbox">MM</input></li>
<li><input type="checkbox">IR</input></li>
</ul>
<button type="submit" id="34">SUBMIT</button>
</div>

It will look cleaner and other programmers will quickly see what you meant :)

Also, maybe it should be put in the body. They whole thing should look a bit more like so:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
<H1>Select a program you want to run.</H1>
<a href="file://C:\Windows/notepad.exe">Notepad</a>
<a href="file://D:\My Documents">Documents</a>
<a href="file://D:\Desktop\Student Applications">programs</a>
<a href="http://pilot.wright.edu">Pilot</a>
<div class="checkbox-list">
<ul>
<li><input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input></li>
<li><input type="checkbox">A3</input></li>
<li><input type="checkbox">CR</input></li>
<li><input type="checkbox">CPR</input></li>
<li><input type="checkbox">MM</input></li>
<li><input type="checkbox">IR</input></li>
</ul>
<button type="submit" id="34">SUBMIT</button>
</div>
</div>
</body>
</html>

Upvotes: 1

Psyrus
Psyrus

Reputation: 1321

There are literally hundreds of ways for you to achieve what you ask. Given your level of learning and given your approach, I would recommend this :

<html>
     <head>
        <style type="text/css">
            #checkboxOptions {
                width: 100px;
                margin: 0 0 0 50px;
                border:5px solid red;
                text-align: left;
            }
        </style>
     </head>
     <center>
         <div style="background-color:grey;color:black;border:5px solid black;width:600px;height:500px;font-size:18px;">
             <h1>Select a program you want to run.</h1>
             <a href="file://C:\Windows/notepad.exe">Notepad</a>
             <br />
             <a href="file://D:\My Documents">Documents</a>
             <br />
             <a href="file://D:\Desktop\Student Applications">programs</a>
             <br />
             <a href="http://pilot.wright.edu">Pilot</a>
             <br />
             <form>
                 <div id='checkboxOptions'>
                     <input type="checkbox" oncheck="file://D:\My Documents\1 CCE">CCE</input>
                     <br />
                     <input type="checkbox">A3</input>
                     <br />
                     <input type="checkbox">CR</input>
                     <br />
                     <input type="checkbox">CPR</input>
                     <br />
                     <input type="checkbox">MM</input>
                     <br />
                     <input type="checkbox">IR</input>
                 </div>
                 <button type="submit" id="34">SUBMIT</button>
             </form>
         </div>
     </center>
</html>

I have corrected the syntax errors I could find and have put the relevant styling into the head section of the document. I have also added a rather obvious border around the div in question so you can see what it is doing. Play around with the width attribute and the margin property to arrange it how you like.

Upvotes: 1

Web User
Web User

Reputation: 7736

  1. you are using centering <center>... remove the beginning/end CENTER tag first.
  2. end all starting DIVs with an ending DIV.
  3. In each DIV, add a style style="text-align:left;"

Upvotes: 1

Related Questions