rain13 Posted February 11, 2012 Share Posted February 11, 2012 In this page GroupPermissionsTable ias always as wide as possible. How can I make it only as wide as needed? I could use fixed width in pixels but I'd prefer to see it dynamic. Any ideas about how to minimize width of GroupPermissionsTable to minimum required with out using fixed width? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> <title>Administration Control Panel</title> <STYLE TYPE="text/css"> body { font: 13px arial, helvetica, sans-serif; } td.this { font: 13px arial, helvetica, sans-serif; } #header ul { list-style: none; padding: 0; margin: 0; } #header li { float: left; border: 1px solid #307C99; border-bottom-width: 0; margin: 0 1 0 0; } li.Selected { position: relative; top: 1px; background-color: #dbedff; } li.NotSelected { position: relative; top: 1px; background-color: #99ccff; } #content { border: 1px solid #307C99; clear: both; background-color: #dbedff; } #GroupPermissionsTable { border: 1px solid #307C99; clear: both; background-color: #dbedff; width: auto; } TABLE,TR,TD,BODY,SELECT,INPUT,BUTTON,TEXTAREA{font-size :12px } INPUT.InputBox{margin:1px; width: 300px;} td.GroupsTable{ border-left: solid 1px #307C99; border-bottom: solid 1px #307C99; vertical-align: top; } td.LeftPanel{ width: 200px; vertical-align: top; } td.RightPanel{ vertical-align: top; vertical-align: top; } .GroupPermissions{ padding-top:5px; padding-left:5px; } </STYLE> </head><body><div style="text-align: left; width: 100%; background-color: rgb(153, 204, 255);"><h1>Administration Control Panel</h1></div><div id="header"> <ul> <li class="NotSelected"><a href="acp.php?id=1">General</a></li> <li class="Selected">Users and Groups</li> <li class="NotSelected"><a href="acp.php?id=3">Images</a></li> <li class="NotSelected"><a href="acp.php?id=4">Style</a></li> </ul></div><div id="content"><table cellspacing="2" cellpadding="2" border="0" style="text-align: left; width: 100%;"> <tbody> <tr> <td style="vertical-align: top; width: 200px;"><a href="?id=2&a=user">Manage users</a><br/> <a href="?id=2&a=group">Manage groups</a><br/> <a href="?id=2&a=grouppermissions">Manage group permissions</a><br/> <a href="?id=2&a=ban">Manage bans</a><br/> <br/> </td> <td style="vertical-align: top;"> <span id="header"> <ul> <li onclick="SetTab('user',1)" id="1" class="Selected">User</li> <li onclick="SetTab('moderator',2)" id="2" class="NotSelected">Moderator</li> <li onclick="SetTab('administrator',3)" id="3" class="NotSelected">Administrator</li> <li onclick="SetTab('forum',4)" id="4" class="NotSelected">Forum</li> </ul> </span> <div class="GroupPermissions" id="GroupPermissionsTable"> <table cellspacing="0" cellpadding="0" border="0"><tbody> <tr bgcolor="#428AFF" style="color: rgb(255, 255, 255); font-weight: bold;"><td style="width: 250px;">Permission</td><td style="width: 75px;"><a onclick="AllYesNo(false);" style="color: rgb(255, 255, 255);" href="#">Yes</a></td><td style="width: 75px;"><a onclick="AllYesNo(true);" style="color: rgb(255, 255, 255);" href="#">No</a></td></tr> <tr bgcolor="#99CCFF"><td>U_VIEWPROFILES</td><td><input type="radio" name="U_VIEWPROFILES" id="0yes"/></td><td><input type="radio" name="U_VIEWPROFILES" id="0no"/></td></tr> <tr bgcolor="#77B8FF"><td>U_IGNOREFLOOD</td><td><input type="radio" name="U_IGNOREFLOOD" id="1yes"/></td><td><input type="radio" name="U_IGNOREFLOOD" id="1no"/></td></tr> <tr bgcolor="#99CCFF"><td>U_DOWNLOADFILES</td><td><input type="radio" name="U_DOWNLOADFILES" id="2yes"/></td><td><input type="radio" name="U_DOWNLOADFILES" id="2no"/></td></tr> <tr bgcolor="#77B8FF"><td>U_ATTACH</td><td><input type="radio" name="U_ATTACH" id="3yes"/></td><td><input type="radio" name="U_ATTACH" id="3no"/></td></tr> <tr bgcolor="#99CCFF"><td>U_USESIG</td><td><input type="radio" name="U_USESIG" id="4yes"/></td><td><input type="radio" name="U_USESIG" id="4no"/></td></tr> <tr bgcolor="#77B8FF"><td>U_VIEWPROFILE</td><td><input type="radio" name="U_VIEWPROFILE" id="5yes"/></td><td><input type="radio" name="U_VIEWPROFILE" id="5no"/></td></tr> <tr bgcolor="#99CCFF"><td>U_EDITOWNPROFILE</td><td><input type="radio" name="U_EDITOWNPROFILE" id="6yes"/></td><td><input type="radio" name="U_EDITOWNPROFILE" id="6no"/></td></tr> <tr bgcolor="#77B8FF"><td>U_CANUSEAVATAR</td><td><input type="radio" name="U_CANUSEAVATAR" id="7yes"/></td><td><input type="radio" name="U_CANUSEAVATAR" id="7no"/></td></tr> <tr bgcolor="#99CCFF"><td>U_CHANGEDEFAULTGROUP</td><td><input type="radio" name="U_CHANGEDEFAULTGROUP" id="8yes"/></td><td><input type="radio" name="U_CHANGEDEFAULTGROUP" id="8no"/></td></tr> </tbody></table> </div> <div> <input type="button" value="Reset"/><input type="button" value="Submit"/> </div> </td> </tr> </tbody></table></div><br/><div style="text-align: left; width: 100%; background-color: rgb(153, 204, 255);"><center>***</center></div></body></html> Basically I want to change it from this: to this: Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2012 Share Posted February 11, 2012 Using float: left; should cause it to shrink to its content i.e the table. Link to comment Share on other sites More sharing options...
rain13 Posted February 11, 2012 Author Share Posted February 11, 2012 thanks. now just 1 more problem. Reset and Submit buttons are now right of it. How do I move these back to below of it? Link to comment Share on other sites More sharing options...
azel Posted February 11, 2012 Share Posted February 11, 2012 I think that you have to use float:left on the reset and submit buttons too. Link to comment Share on other sites More sharing options...
rain13 Posted February 11, 2012 Author Share Posted February 11, 2012 Wouldn't it make even more things got left? I thought of adding extra span or something around it with float down.. But I am not sure if it's good solution..... or if there's better one out there. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2012 Share Posted February 11, 2012 on the div container of the buttons use overflow:hidden OR clear: both; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.