Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arranging Elements Within a TD Cell

    Hello, I'm working on my first website, and so I've been doing a lot of research, but I've reached a problem I can't seem to solve on my own.

    I have a table and in one of the cells, I am trying to place a centered text with two stacked buttons to the right. I know I could create another table in just this cell, with the text having a row-span of 2, but that seems unnecessarily complicated. Is there an easier and/or more graceful solution using css?

    Here's what I want it to look like:


    Here's what it currently looks like:


    Here's the code I have right now.
    Code:
    <td>
      <div class="ounum">45</div>
      <div class="oubut">
        <img id="ovr001" class="ou" alt="o" src="graphics/overRg.png" />
        <img id="und001" class="ou" alt="u" src="graphics/undrRg.png" />
      </div>
    </td>
    Code:
    div.ounum {
      float:left;
      vertical-align:middle;
    }
     
    div.oubut {
      float:left;
      display:inline;
      padding-left:2px;
    }
     
    img.ou {
      cursor:pointer;
    }

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    just add a break

    Code:
    <img id="ovr001" class="ou" alt="o" src="graphics/overRg.png" /><br/>
        <img id="und001" class="ou" alt="u" src="graphics/undrRg.png" />

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hmm, I tried that, but then the text portion isn't centered, even though it's div specifies "vertical-align:middle".


  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello TunesRus90,
    This should stack the two buttons -
    Code:
    img.ou {
      cursor:pointer;
    display: block;
    }
    Could remove those over/under id's then?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    ya then add line break,

    then for the text style add line-height , vertical-align will work only if the line height is sepcified

    Code:
    div.ounum {
      float:left;
      vertical-align:middle; line-height:24px;
    }
    You may have to change the line height accordingly

    regards

  • Users who have thanked jonweb2009 for this post:

    TunesRus90 (12-30-2009)

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ah yes, thank you jonweb2009. The line-height did the trick!

    Also, the id's are there because I was going to add a listener to call a javascript function every time one of the "ou" images was clicked, and the id's would allow me to determine which image specifically was clicked. Is there a better method to do this?

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    i think Id is the best bet,

    Glad my suggestion helped

    cheers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •