jlindblom Posted April 1, 2012 Share Posted April 1, 2012 Good evening everybody! Hope all is well with you! First of all, my english is not the best. Please understand! Is there any way I can get these buttons next to each other? Here is the link to the button: http://project.jimmylindblom.se/ I have put them as a list with ul and il, and will put them as a menu in a wordpress theme. Instead of now, they are putting them selves above each other. I do want them in the style now, with shadow etc, and right now I have "position: absolute", which I guess I'll have to change to get them into the right order? The reason I want to run them as a list, is that I want to be able to add and remove features from the wordpress-theme and therefore not the buttons have the exact position of the "position: relative". Does anyone know how I can getto the style of the buttons in a similar way? Instead of start making those buttons as image files. Grateful for any help! And did I forget some information here, please tell me, and I will give you answers! The code: <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><style type="text/css"><!-- #menu { position: relative; float: right; width: 400px; padding-left: 70px; padding-right: 30px;} #menu a:hover { background-color: #d8d8d8;} #menu a:active { top:22px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;} #menu li { float: right; margin: 1px 1px 1px 1px; height: 21px; overflow: hidden;} #menu ul { font-size: 20px; list-style: none;} #menu a { display: inline-block; position: absolute; top: 20px; padding: 0 15px; font-size: 16px; height:38px; line-height:38px; font-weight: bold; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-decoration: none; background-color: #f2f2f2; color: #888888; box-shadow: 0px 2px 0px #c6c6c6; -moz-box-shadow: 0px 2px 0px #c6c6c6; -webkit-box-shadow: 0px 2px 0px #c6c6c6; right: 25px; -webkit-font-smoothing: antialiased;} --></style></head> <body> <div id="menu"> <ul><li><a href="#">Button Button Button Button</a></li> <li><a href="#">Button 1</a></li> </ul> </div></div> </body></html> Have a nice day! Thanks! Best regards,J Link to comment Share on other sites More sharing options...
ShadowMage Posted April 2, 2012 Share Posted April 2, 2012 Just remove the absolute positioning. You already have the li elements floated, so they should line up next to each other. Link to comment Share on other sites More sharing options...
jlindblom Posted April 3, 2012 Author Share Posted April 3, 2012 Thanks for your help and answer ShadowMage! Please see new result http://project.jimmylindblom.se/index_.html How to get the "press-down" feeling now? Because the button don't moves like last "version", see http://project.jimmylindblom.se/ Have a nice day! Link to comment Share on other sites More sharing options...
ShadowMage Posted April 4, 2012 Share Posted April 4, 2012 I thought you wanted them horizontally aligned? If so, add the float back to your li elements. For the "click" effect, just add a top margin of 2px or so to the a:active declaration. Link to comment Share on other sites More sharing options...
jlindblom Posted April 10, 2012 Author Share Posted April 10, 2012 Hello ShadowMage! Hope you're fine! Just want to thank you, couldn't do that until now, because I forgot my password and my account was locked! The button works fine after your solution! Thanks once again for the help! Have a nice day! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.