Griffin Posted February 25, 2013 Report Share Posted February 25, 2013 Hello all I'm trying to centre a horizontal spry menu within a div, I've been looking everywhere to find a solution. I have 6 buttons to fit within a div of 960px, and the only thing I can see is that the spry buttons have to be set at a specified width eg 160px. The problem is the titles vary in length so the width has to be set to auto with padding, so some buttons will be more than 160px and some will be less. but it seems whatever I do my spry menu stays stubbornly to the left. I can play around with the padding but I think this would cause problems later on when people are looking at the site in different browsers, and operating systems. I use a mac and while it looks OK on my browsers it may not behave as I would hope for viewers using Windows, ie the fonts may resize and force the last button onto a new line or something. Any help would be appreciated Quote Link to comment Share on other sites More sharing options...
grabenair Posted February 25, 2013 Report Share Posted February 25, 2013 Do you have a link to the site for we can look at the code? Quote Link to comment Share on other sites More sharing options...
Griffin Posted February 25, 2013 Author Report Share Posted February 25, 2013 Sorry just working on it on my local disk at the moment, so haven't uploaded it to a server yet. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 25, 2013 Report Share Posted February 25, 2013 Without seeing the code, we cannot identify the problem. Quote Link to comment Share on other sites More sharing options...
Griffin Posted February 25, 2013 Author Report Share Posted February 25, 2013 I'll be posting a couple of pages in the next day or so. Hopefully you'll be able to shed some light on how thick I'm being. Cheers Quote Link to comment Share on other sites More sharing options...
Moloney Posted February 25, 2013 Report Share Posted February 25, 2013 Hey there, I'm not sure what a spry menu is but if it is just a normal horizontal navigation menu then I had this problem before. This was the first real problem that I came up against when I started using css a few months back and there is a post where others on this forum contributed to my solution. css positioning problem Maybe the following will help you find a solution: http://jsfiddle.net/j6ecR/ (inline-block method) --> the text-align:center; is what centers the li element. or perhaps something along these lines this could work for your either (modified to your requirements): http://jsfiddle.net/jDc5J/1/ (float:left; method) --> By setting a width for each li element, i think it should do what you want it to. The total of the 6 <li> widths must be 100% or 960px in your case. All the Best, Quote Link to comment Share on other sites More sharing options...
Griffin Posted February 25, 2013 Author Report Share Posted February 25, 2013 Thanks for your advice, I'll have a go Quote Link to comment Share on other sites More sharing options...
grabenair Posted February 25, 2013 Report Share Posted February 25, 2013 (edited) Stepenius Spry is what Dream Weaver thing. It is generated css and javascript. I went and made a spry menu bar in Dream Weaver. The only way I could move it from the left is to add this code to the SpryMenuBarHorizontal.css I put it at the bottom of the code for it is the last rule. Also do not forget to load the spry folder to your server when uploading your site. Just play with the 200px until you get it right. #MenuBar1 { margin: 0 0 0 200px; } This is shorthand code top, right, bottom, left, think of a clock 12,3,6,9. Edited February 25, 2013 by grabenair Quote Link to comment Share on other sites More sharing options...
Moloney Posted February 25, 2013 Report Share Posted February 25, 2013 I suppose that is the trouble it WYSISYG editors! You can't really control it that well. Quote Link to comment Share on other sites More sharing options...
grabenair Posted February 26, 2013 Report Share Posted February 26, 2013 (edited) It is not that you cannot control it that well. It is just with Dreamweaver if you have it generate code for you it takes a little while to learn what it is doing and how to edit it. As you use DreamWeaver use the split screen to see the code that it is written for you. It will help you see what is going on. But better yet it is better to learn to code and then use Dreamweaver to help speed up the process. Then again I can now write code faster than I can use the dialog window in Dreamweaver. When using the the spry in Dreamweaver it is easier, at least for me, to look at the html that it wrote and then write new css and add it to the bottom of the spry css that it wrote. That is how I got your code that I wrote for you in my last post. I did try to edit the spry css before I went and wrote a new rule. For some reason I could not get the margin: 0 auto to center so that is why I went with the way I did to make it work for you. Remember css is read from top to bottom so when using spry just target the id or class that you need and write a new rule and add it to the bottom. This may not be the best way, but it will work for you as you learn to write all your own code and not use Dreamweaver to do it for you. You can and should learn to use Firefox and Chrome developer tools, they will help you find the rule that is causing you problems. Firebug for Firefox is also a great tool. I have Dreamweaver cs6 but I prefer to write code in notepad++ I know I have been rambling but hope this helps you some. Edited February 26, 2013 by grabenair Quote Link to comment Share on other sites More sharing options...
grabenair Posted February 26, 2013 Report Share Posted February 26, 2013 Well I am awake now so not so much rambling. For a better explanation on why learn to code, like your dropdown menu you are having problems with, see DreamWeaver Myth in the DreamWever section as LSW is a better writer than I by far. 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.
Note: Your post will require moderator approval before it will be visible.