kingb00zer Posted March 18, 2010 Share Posted March 18, 2010 Im trying to put 4 rows or 5 buttons into one table on this page im working on yet for some reason the buttons wont sit side by side, could anybody please help me understand why this is and hwo to fix it? Below is the code I used, though it only contains one row of buttons not the 4 rows.<html><body bgcolor="black"><br><br><br><br><table align="left" bgcolor="blue" cellpadding="1" cellspacing="1" width="200" ><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr></table><table align="center" bgcolor="grey" cellpadding="1" cellspacing="1" width="800" ><tr><th>thing one </th> </tr><tr><td><form action=""><input type="button" " value="PLYR01"></form> <form action=""><input type="button" value="PLYR02"></form> <form action=""><input type="button" value="PLYR03"></form> <form action=""><input type="button" value="PLYR04"></form> <form action=""><input type="button" value="PLYR05"></form> </td> </tr><tr><td> </td> </tr><tr><td> </td> </tr><tr><td> </td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
Synook Posted March 18, 2010 Share Posted March 18, 2010 Form is a block-level element. Why do you need so many forms, anyway?Also, it's good practice not to lay out HTML pages using tables. Link to comment Share on other sites More sharing options...
Miyako Posted March 18, 2010 Share Posted March 18, 2010 Form is a block-level element. Why do you need so many forms, anyway?Also, it's good practice not to lay out HTML pages using tables.It's true what Synook is saying, but if you still want to continue with this script you should do something like this:<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body bgcolor="black"><br><br><br><br><table align="left" bgcolor="blue" cellpadding="1" cellspacing="1" width="200" ><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr><tr> <td>menu option </td> </tr></table><table align="center" bgcolor="grey" cellpadding="1" cellspacing="1" width="800" ><tr><th>thing one </th> </tr><tr><td><form action=""><input type="button" " value="PLYR01"></form> <form action=""><input type="button" value="PLYR02"></form> <form action=""><input type="button" value="PLYR03"></form> <form action=""><input type="button" value="PLYR04"></form> <form action=""><input type="button" value="PLYR05"></form> </td> </tr><tr><td> </td> </tr><tr><td> </td> </tr><tr><td> </td> </tr></table></body></html> And also create a new file called style.css form, input[type="button"] { display: inline;} This will change the display-value of a form from "block" to "inline". Link to comment Share on other sites More sharing options...
kingb00zer Posted March 18, 2010 Author Share Posted March 18, 2010 Thanks guys I thought css may have been the answer. The reason I will have so many forms is because im maknig a rough layout for a game idea I have and althugh I cant say too much but I find the buttons are needed for the attacking page.Also if tables arent a good idea what do you think I should to instead? Link to comment Share on other sites More sharing options...
Miyako Posted March 18, 2010 Share Posted March 18, 2010 Thanks guys I thought css may have been the answer. The reason I will have so many forms is because im maknig a rough layout for a game idea I have and althugh I cant say too much but I find the buttons are needed for the attacking page.Also if tables arent a good idea what do you think I should to instead?You should use div's, and CSS to put them on the right place.Or you can use frames but that's really old, div's is the "new" technique. Link to comment Share on other sites More sharing options...
real_illusions Posted March 18, 2010 Share Posted March 18, 2010 div's is the "new" technique.Not that new..they've been around for years. The real new technique is HTML5's more semantic markup Link to comment Share on other sites More sharing options...
Synook Posted March 18, 2010 Share Posted March 18, 2010 You should use semantically appropriate elements, which will probably include some divisions, in a meaningful and logical order. Then style them with CSS. Link to comment Share on other sites More sharing options...
ShadowMage Posted March 18, 2010 Share Posted March 18, 2010 The reason I will have so many forms is because im maknig a rough layout for a game idea I have and althugh I cant say too much but I find the buttons are needed for the attacking page.You still shouldn't need all those forms. You can use one form and do whatever logic you need to do in PHP. If you need to submit to more than one script depending on which button is clicked, you can use JavaScript to change the action attribute of the form before submitting it. Link to comment Share on other sites More sharing options...
kingb00zer Posted March 19, 2010 Author Share Posted March 19, 2010 You still shouldn't need all those forms. You can use one form and do whatever logic you need to do in PHP. If you need to submit to more than one script depending on which button is clicked, you can use JavaScript to change the action attribute of the form before submitting it.So what your saying is instead of having the <form> tag for each of the buttons I can have that many buttons thru the one tag? Link to comment Share on other sites More sharing options...
Synook Posted March 19, 2010 Share Posted March 19, 2010 If you make them submit buttons, then the name of the clicked button will be sent through with the rest of the form. Link to comment Share on other sites More sharing options...
kingb00zer Posted March 22, 2010 Author Share Posted March 22, 2010 How would I go about resizing the buttons with css? Spacing is something else I would liek to do between the buttons also. Link to comment Share on other sites More sharing options...
real_illusions Posted March 22, 2010 Share Posted March 22, 2010 How would I go about resizing the buttons with css?You can give the submit button a class of 'submit', although you can target an input depending on in its type, but thats not supported across all browsers yet, and simply apply the values in CSS:input.submit{width:400px;height:10px;}Spacing is something else I would liek to do between the buttons also.Use some margins Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.