...

View Full Version : Arranging Elements Within a TD Cell



TunesRus90
12-30-2009, 06:45 PM
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:
http://img682.imageshack.us/img682/9208/goaln.png

Here's what it currently looks like:
http://img706.imageshack.us/img706/4108/currenty.png

Here's the code I have right now.

<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>


div.ounum {
float:left;
vertical-align:middle;
}

div.oubut {
float:left;
display:inline;
padding-left:2px;
}

img.ou {
cursor:pointer;
}

jonweb2009
12-30-2009, 06:49 PM
just add a break


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

TunesRus90
12-30-2009, 07:00 PM
Hmm, I tried that, but then the text portion isn't centered, even though it's div specifies "vertical-align:middle".

http://img37.imageshack.us/img37/5525/picture1oln.png

Excavator
12-30-2009, 07:07 PM
Hello TunesRus90,
This should stack the two buttons -
img.ou {
cursor:pointer;
display: block;
}
Could remove those over/under id's then?

jonweb2009
12-30-2009, 07:11 PM
ya then add line break,

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


div.ounum {
float:left;
vertical-align:middle; line-height:24px;
}

You may have to change the line height accordingly

regards

TunesRus90
12-30-2009, 07:17 PM
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?

jonweb2009
12-30-2009, 07:19 PM
i think Id is the best bet,

Glad my suggestion helped

cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum