EricOnAdventure Posted May 23, 2016 Share Posted May 23, 2016 I have buttons and inside of those buttons are pictures and text. The pictures are all the same size, no problem with that, but as the text isn't the same size, nothing I do, seems to get the buttons to become the same size OR start on the same line ((I.E. I can set their size to 300px tall, and after that they are all the same size but they don't start on the same line. You can view the page here http://efunstudies.com/nvc/just enter nonsense until you get to the fourth page. Of you can check out the code(view source) here <!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>NVC Letter Templet</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="main"> <h2>Use NVC to express your needs.</h2><hr/> <span id="error"> <!----Initializing Session for errors---> </span> <form action="NVC_page_5.php" method="post"> Here is your letter to vbcvbcvb so far:<br><br> Dear vbcvbcvb,<br><br> Today I noticed that you... and this made me feel alive.<br><br> <hr width='130%'> To Finish this letter we need to examin your needs. Choose from one of the needs below or create your own.<br><br> <button type="submit" name="needvar" value="community, friends and a sense of belonging" class = "needvar"><img src="pics/community, friends and a sense of belonging.jpg" width="150" height="150" alt="community, friends and a sense of belonging" />I need community, friends and a sense of belonging</button> <button type="submit" name="needvar" value="to play and have fun" class = "needvar"><img src="pics/to play and have fun.jpg" width="150" height="150" alt="to play and have fun" />I need to play and have fun</button> <button type="submit" name="needvar" value="rest and relaxation" class = "needvar"><img src="pics/rest and relaxation.jpg" width="150" height="150" alt="rest and relaxation" />I need rest and relaxation</button> <button type="submit" name="needvar" value="to be heard and understood" class = "needvar"><img src="pics/to be heard and understood.jpg" width="150" height="150" alt="to be heard and understood" />I need to be heard and understood</button> <button type="submit" name="needvar" value="to understand others and empathize with them" class = "needvar"><img src="pics/to understand others and empathize with them.jpg" width="150" height="150" alt="to understand others and empathize with them" />I need to understand others and empathize with them</button> <button type="submit" name="needvar" value="to understand and self-empathize with myself" class = "needvar"><img src="pics/to understand and self-empathize with myself.jpg" width="150" height="150" alt="to understand and self-empathize with myself" />I need to understand and self-empathize with myself</button> <button type="submit" name="needvar" value="to demonstrate my capability, my competence and my skills" class = "needvar"><img src="pics/to demonstrate my capability, my competence and my skills.jpg" width="150" height="150" alt="to demonstrate my capability, my competence and my skills" />I need to demonstrate my capability, my competence and my skills</button> <button type="submit" name="needvar" value="a chance to learn, explore and discover new and wonderful things" class = "needvar"><img src="pics/a chance to learn, explore and discover new and wonderful things.jpg" width="150" height="150" alt="a chance to learn, explore and discover new and wonderful things" />I need a chance to learn, explore and discover new and wonderful things</button> <button type="submit" name="needvar" value="to have the freedom and autonomy to choose" class = "needvar"><img src="pics/to have the freedom and autonomy to choose.jpg" width="150" height="150" alt="to have the freedom and autonomy to choose" />I need to have the freedom and autonomy to choose</button> <button type="submit" name="needvar" value="to express myself and my creativity" class = "needvar"><img src="pics/to express myself and my creativity.jpg" width="150" height="150" alt="to express myself and my creativity" />I need to express myself and my creativity</button> <button type="submit" name="needvar" value="to feel safe and trust in others" class = "needvar"><img src="pics/to feel safe and trust in others.jpg" width="150" height="150" alt="to feel safe and trust in others" />I need to feel safe and trust in others</button> <button type="submit" name="needvar" value="to give and share" class = "needvar"><img src="pics/to give and share.jpg" width="150" height="150" alt="to give and share" />I need to give and share</button> <button type="submit" name="needvar" value="to provide help and support" class = "needvar"><img src="pics/to provide help and support.jpg" width="150" height="150" alt="to provide help and support" />I need to provide help and support</button> <button type="submit" name="needvar" value="to be respected, and to feel that I am mattered and considered" class = "needvar"><img src="pics/to be respected, and to feel that I am mattered and considered.jpg" width="150" height="150" alt="to be respected, and to feel that I am mattered and considered" />I need to be respected, and to feel that I am mattered and considered</button> </form> <form action="NVC_Other_need.php" method="post"> <button type="submit" name="needvar" value="Other - Write your own" class = "needvar" > <img src="pics/Other - Write your own.jpg" width="150" height="150" alt="Other - Write your own" /> Other - Write your own </button> </form> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Solution Psycho Posted May 23, 2016 Solution Share Posted May 23, 2016 There is no good solution for this. The browser is doing exactly what it should do. There are some things you can do to achieve what you want, but none are perfect. Here are some things you can do: 1. Use a table. You can try putting the buttons in the TDs and making their height 100%. I tried some variations with buttons and your CSS and didn't get good results. So, you could also use DIVs with an onclick event instead of the buttons 2. Use a fixed height DIV for the text inside the buttons. Use a height that will accommodate the the height needed for the button(s) with the most lines of text. This could be problematic if users have defined larger/smaller text sizes for their displays. 3. Use a fixed height for the buttons that will accommodate the one with the most lines of text. Has the same drawback as #2 Quote Link to comment Share on other sites More sharing options...
EricOnAdventure Posted May 24, 2016 Author Share Posted May 24, 2016 Option 2 was a great idea and the best based on how the form is generated, however now the pictures do not start at the top of the button but in the center. I've tried a few ways to get them to stay at the top but none have worked. Any advice? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.