Jump to content
Sign in to follow this  
catpage

How to style menus

Recommended Posts

catpage

Some custom menu styling questions (moved here from an old 'answered' topic where I had foolishly posted at the end of the thread.): I am using the style element background-image:url('myimage.jpg'); to set a graphic in the menu to get a nice gradation effect. When I set the same background-image in #nav-row the graphic extends to the edge of the content area instead of stopping short, but it does not occupy the same vertical height as the menu itself so looks odd. How might I correct this? Also drop-down menus would look better NOT using the background image and probably with the horizontal line gaps between items closed up. What style element needs to be set? menubkgng2.jpg Also how would one get rid of the clever 'edge' styling on menu text which does not work in this mode? How too could one add vertical dividers between each menu item in the row? Many menu styling questions here... I have not spotted a guide which is what is needed. Any help with any one or more of the above much appreciated!

Share this post


Link to post
Share on other sites
kastelic
Is there any way you could provide a link to the site, or upload it to a live server if it is not? And are you using Platform Pro or Pagelines 2.0?

Share this post


Link to post
Share on other sites
catpage
Sorry it is on a private development server at the moment. The site is using Pagelines 2.0.1 Custom code looks like this at present: #nav_row { background-image:url('./wp-content/uploads/2012/01/menubkg2.jpg'); } #nav_row ul li a { color: #dddddd ; background-image:url('./wp-content/uploads/2012/01/menubkg2.jpg'); }

Share this post


Link to post
Share on other sites
Rob
I'm not a CSS guru, but we just had a similar problem (without the graphics) where changing the font altered the size it occupies and brought the menu items to a smaller size. If you have Firebug http://www.getfirebug.com you might also be able to see the padding for the menu items and adjust that. No guarantees on that but it couldn't hurt.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
catpage
Yes, Firebug investigations may be the way - I was hoping that someone at Pagelines might point me in the right direction for some of the above, but perhaps I am being lazy - I should look through style.css and try to figure what rtl.css is about!

Share this post


Link to post
Share on other sites
kastelic
rtl.css is for Right to Left languages . I would try setting the background image to the list items themselves rather than the whole list For example ul li not just ul

Share this post


Link to post
Share on other sites
catpage
Background images are set in #nav_row ul li a {} Dont seem to be able to unset them with .sub-nav { background-image:none } (or variations including ul li and a )

Share this post


Link to post
Share on other sites
JohnMagic
I always find it strange when staff ask for url for a site in development. Only real amateurs develop sites online in public. Its stated in the thread that the site is on a dev server. Some documentation on the menu system, the superfish js, the css and how the framework interact with the code would be nice. Catpage: It would be easier to help you if you were more precise in describing what the problem is and what you want to achieve. Maybe you can post images with arrows showing the problems ?

Share this post


Link to post
Share on other sites
catrina
My apologies, can you please post images with arrows pointing to the issues you're having?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
catpage
You are correct [b]JohnMagic[/b] I am not allowed to make the site public at this stage of development! [b]catrina[/b] here is a graphic (same as above but with arrows and notes) - hopefully you can see that the blue horizontal bar has a nasty 'step' in it's lower edge? The top edge is a bit odd too at the join, but no step as such.. [img]http://www.diditon.com/clients/images/menubkgng2b.jpg[/img]

Share this post


Link to post
Share on other sites
kastelic
Sorry but without seeing the site live its just too hard to give you any useful css (for me anyway). I can suggest you look into child and sibling selectors to avoid styling every anchor tag down the line. (for the part where you don't want the background to affect the sub-menu.) http://css-tricks.com/child-and-sibling-selectors/

Share this post


Link to post
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

Sign in to follow this  

×