Jump to content

Centering A Spry Menu In A Div


Griffin

Recommended Posts

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

Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...