Jump to content

Button


jlindblom
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...