Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base
Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter

runboard.com       You are not logged in.

Page:  1  2 

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 10023
Karma: 269 (+328/-59)
Reply | Quote
PD Menu Navbar spacing


Well, clever me I decided to start making my navigation bar links into a navbar with a PD menu on ]this board.

The problem is the spacing between the two PD Menus... I wanted to keep the small green spacing you see between the first two regular links but for some reason that green spacing went away when I made the PD menu for the Runboard links... I don't understand why the spacing vanished...

---

Advertise Boards On TRDConceptsDE
3/20/2013, 3:30 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Cereal Killer Profile
Live feed
Blog
Friends
Miscellaneous info


Global user

Registered: 05-2006
Posts: 153
Karma: 6 (+8/-2)
Reply | Quote
Re: PD Menu Navbar spacing


I was just bugging Lesa about drop downs yesterday emoticon I think you need to add padding to your '.menu li' class. I could be entirely wrong though lol. Like with mine on pandemonium, it has padding: [sign in to see URL];

Last edited by Cereal Killer, 3/20/2013, 3:52 pm


---

3/20/2013, 3:51 pm Link to post  
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24992
Karma: 420 (+473/-53)
Reply | Quote
Re: PD Menu Navbar spacing


Hi Rick,

I changed the display of .menu li to inline-block, and that seemed to do the trick.

---
Runboard Knowledge Base
Website Creation Tutorials
3/20/2013, 4:26 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 10023
Karma: 269 (+328/-59)
Reply | Quote
Re: PD Menu Navbar spacing


That fixed the spacing but with that inline-block declaration in place the PD menu will show but not allow you to scroll onto the menu to select a choice (at least in Chrome, Safari, Maxthon and IE8)!

---

Advertise Boards On TRDConceptsDE
3/21/2013, 12:36 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24992
Karma: 420 (+473/-53)
Reply | Quote
Re: PD Menu Navbar spacing


I had only checked with FF, but I see what you're talking about in Chrome.

It might be easier to just grab the code off of Pandemonium, or write one yourself. To see the minimum amount of code necessary to make it work, you can check out this ]fiddle I made. Just un-comment one section at a time, then hit the 'Run' button after each section is commented to see its effect. Of course, some of that stuff would be combined when used in practice, but this might help you get a better handle on how it works, and how much is needed in order to make it work.

---
Runboard Knowledge Base
Website Creation Tutorials
3/21/2013, 12:53 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 10023
Karma: 269 (+328/-59)
Reply | Quote
Re: PD Menu Navbar spacing


Welll... If I am going to write one myself it may as well be fancy right? emoticon

I did my basic coding using all kinds of odd colors (read multiple shades of grey) and then took a look to see what I had done to my poor little board. It isn't as bad as I thought it would be but "margin: 0 auto" didn't get my UL title links to center on the bar like I thought it would (always something right)...

I will be fiddling with the colors for awhile to get the links and pull down menus looking right but the UL titles not centering has me a little bummed out...

---

Advertise Boards On TRDConceptsDE
3/21/2013, 3:10 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24992
Karma: 420 (+473/-53)
Reply | Quote
Re: PD Menu Navbar spacing


Try text-align: center; for the main menu instead. Don't define a width, and don't change it to inline-block. I know I said to do use inline-block in chat, but I momentarily forgot that you can't do auto margins with inline-block.

]Here's another fiddle for you. This one has a sub-sub menu, but I kept the code as basic as I could, except for the addition of borders, background color, and changing the cursor to a hand when it hovers on the menu.

Last edited by Lesigner Girl, 3/21/2013, 4:16 am


---
Runboard Knowledge Base
Website Creation Tutorials
3/21/2013, 4:09 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 10023
Karma: 269 (+328/-59)
Reply | Quote
Re: PD Menu Navbar spacing


I think I got it done, with enough CSS to handle any future expansions I might feel like doing and with my very first "text shadow" and "graduated background." emoticon

Thank you for the assistance, hints, and clubbing over the head Lesa. emoticon

---

Advertise Boards On TRDConceptsDE
3/21/2013, 4:02 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24992
Karma: 420 (+473/-53)
Reply | Quote
Re: PD Menu Navbar spacing


You're welcome, Rick. emoticon The gradient looks nice. emoticon

Just one thing I would add. You can add a transparent border to the non-hovered state, to avoid having things jump around when you hover on them. Alternatively, one thing I used to do before I could do transparent borders was to add a margin, then tell it not to have a margin in the hover state.

I hope this helps. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
3/21/2013, 6:58 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 10023
Karma: 269 (+328/-59)
Reply | Quote
Re: PD Menu Navbar spacing


Thank you, the gradient png is my 4th or 5th try to get one that blended well with everything. Funny thing though, this one was the one that I really didn't like when it was in the graphics editor but looked the best when I tried it on the board itself! Go figure...

I had placed a 1px top only border on the hover state which is why it was jumping around. So I thought about it and decided to go with a left and right border instead so things don't jiggle. I am trying to decide what the right border color should be to enhance the button effect but this looks good enough to let me relax a bit and do some other stuff for awhile. emoticon

---

Advertise Boards On TRDConceptsDE
3/22/2013, 3:55 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 


Add a reply

Page:  1  2 



You are not logged in (login)