PDA

Click to See Complete Forum and Search --> : Buttons aligned in table?

Negger
09-18-2006, 04:41 AM
Hi, I've followed the tutorials on this site to create a row of aligned buttons inside a table, neatly arranged in a horizontal row - Excellent. However the buttons appears to take up approx 2X the amount of screen space their size demands ?
I've tried formatting the actual row size/column/cell size but it makes no difference. How do I force the buttons to simply take up the amount of screen space dictated by their apparent physical size ? I want to force the cell size to the same visible size as the button ?
Regards
Negger
bathurst_guy
09-18-2006, 04:47 AM
I don't quite understand your question. A link would help. But from what I can gather, just not setting a cell width makes it fit to its content.
Negger
09-18-2006, 05:06 AM
Many Thanks for prompt reply. I thought the same! It's as though the code that creates the Button has also created 'padding'. If you set the table borders to "1" to show them up, the cells are approx 2X the size of the button within, and I can't force them any smaller. I want to use this page as a 'Header' and therefore want to make it as shallow as possible, hence I would like the amount of space taken up to be exactly the size of the buttons. I hope this clarifies my problem ?
bathurst_guy
09-18-2006, 05:10 AM
Theres not really much I can help with without a link or the code.
Negger
09-18-2006, 05:37 AM
The table code is:
<TABLE width="100%" border=0>
<TR>
<TD Align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Standard Ref">
</FORM></TD><TD align=Center Width=17%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Warranted Ref"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Landlords Ins"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Select Policy"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="&nbsp;SSE Utilities &nbsp;"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Other Links"></FORM></TD></TR><TR>
<TD vAlign=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Privacy Policy"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Feedback Form"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Site Homepage"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Homepage"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Unused Link"></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Unused Link"></FORM></TD></TR></Table>

Which gives me a double row of buttons, six per line. I want the row to take up 100% of the screen width. It's the depth of the cells that is causing the problem rather than the width ? ( I haven't posted the page up yet) Many thanks for your interest!!
bathurst_guy
09-18-2006, 05:45 AM
Hows this:<html>
<body>
<TABLE width="100%" border=0>
<TR>
<TD Align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Standard Ref" style="width:100%";>
</FORM></TD><TD align=Center Width=17%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Warranted Ref" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Landlords Ins" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Select Policy" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="&nbsp;SSE Utilities &nbsp;" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Other Links" style="width:100%";></FORM></TD></TR><TR>
<TD vAlign=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Privacy Policy" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Feedback Form" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Site Homepage" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Homepage" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Unused Link" style="width:100%";></FORM></TD>
<TD align=Center Width=16.6%><FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Unused Link" style="width:100%";></FORM></TD></TR></Table>
</body>
</html>
Negger
09-18-2006, 12:58 PM
This has helped horizontally, in that the buttons are more compacted, despite the length of description on them - But they are still vertically challenged!! I've come up with a work-around though. By loading into a narrower frame that just displays the top row of buttons, I can then scroll down to reveal the second row. Though some folks may not bother to look for the second row, it does leave a larger main frame. Many thanks again for your input. (See separate post re: problems loading frame??)