#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2003
    Posts
    506
    Rep Power
    11

    aligning checkboxes with css


    I cannot seem to get this to work. I have placed the checkboxes in div and span tags with no success.

    I need to be able to create a series of rows (not an actual <table>) each with checkboxes and other data.

    Using tables kinda works but causes a lot more problems than it fixes.

    Here is some html, if you swap the pic file name for something on your computer you will see that the checkbox is ALWAYS at the bottom. I have tried everything to bring it to the middle of the row (vert), but could figure out anything.

    Thanks for any help you can offer.

    <html>
    <head>
    <style type="text/css">
    <!--
    .Box {
    background-color: #369;
    }

    .text {
    font-size: 14px;
    color: #FFF;
    }

    img {
    width: 150px;
    padding: 0;
    margin: 0;
    }
    -->
    </style>
    </head>

    <body>
    <div class="box">
    <input type="checkbox">
    <img src="SomePic">
    <span class="text">etetettet ssadasdasdas asd adas da asdasd a sdasd</span>
    </div>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2003
    Posts
    506
    Rep Power
    11
    i wasn't very clear.
    I need the checkboxes in the center. Aligning them at the top is do-able, but the middle doesn't seem to want to work
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2003
    Posts
    506
    Rep Power
    11
    I should also mention that I have tried vertical-align: middle;
    but it doesn't work
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    London, UK
    Posts
    45
    Rep Power
    13
    If you want the checkbox halfway up the image???

    this seems to work OK (adust margin-top to fit your image size)


    Code:
    <html>
      <head>
        <style type="text/css">
          <!--
          .Box {
          background-color: #369;
          }
    
    
          input.check {
          float: left;
          margin-top: 90px;
          }
    
    
          .text {
          font-size: 14px;
          color: #FFF;
          }
    
    
          img {
          width: 150px;
          padding: 0;
          margin: 0;
          }
          -->
        </style>
      </head>
    
      <body>
        <div class="box">
         <input class="check" type="checkbox">
    	<img src="imageSrc">
    	  <span class="text">etetettet ssadasdasdas asd adas da asdasd a sdasd</span>
        </div>
      </body>
    </html>
    Last edited by scopevale; November 1st, 2003 at 12:38 AM.
    Gary
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2003
    Posts
    506
    Rep Power
    11
    I think that might be the way that I have to do it, but there is no guarantee that the height of the pic will always be the same. I adjust the width of the pic to allow nice row flow, but unless I want to distort the pictures scale I don't adjust the height as well, but there may not be too much of an offset

    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo