• 0
Sign in to follow this  
Followers 0

Implementing CSS for navigation background images

Question

Posted · Report post

HI there, I would like to learn how to style my navigation more and add background images. For example something cool like this: http://beavory.com/ Any resources you can point me to? If not, a plug-in suggestion is to add something like this in so we can style the nav better since it really defines a site design IMHO. that would be so AWESOME. :) thanks so much for your help! love pagelines!!!!!

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Thanks for the compliment! Let's start with backgrounds. You can apply a background image to the menu on a menu item or whole menu basis. Learn more about doing this here: http://www.w3schools.com/css/css_background.asp Similarly, that same link should help you with the background images of various elements of your site. As for identifying those, we strongly recommend http://www.getfirebug.com which is an add-on tool for Firefox. This helps you to identify CSS elements in your site so you can apply changes correctly. Actually, it's a nifty little tool as you can edit live and see just how things will look before copying and pasting the code to make it standard for all your visitors. This might help a bit: http://www.pagelines.com/wiki/How_to_use_CSS_Inspection_Tools You may also want to take a look at http://www.cssplay.co.uk/menus/ for some guidance with styling menus. With that site, you identify the menu you like, then view source and it gives you examples of the CSS. See the section "Using Custom Code" http://www.pagelines.com/wiki/How_to_Get_Started_with_PageLines Hope this helps you get started.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanx for the links, both if you... the beavery site nav is quite cool though it uses javascript. I recommend starting off with css as rangelone also stated. If you have any questions, don't hesitate to ask.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That site is using a pretty cool effect that simply applies a left margin depending upon which menu item you are hovering on. I have no idea how to do it, but it's cool regardless! There are several CSS menu hacks available on the web. You just have to search for them. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks everyone! on a related note, is there a way with pagelines that would style background for sections and not just the whole background?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Glad we could help. :) To change the background for individual sections, you will need to add a background CSS elements to make it work (for each section). Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug for Firefox[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] for more info. Also please be sure to watch our Firebug video tutorial [url="http://www.pagelines.com/wiki/Custom_CSS"]here[/url]. And if you consider this topic resolved, please accept an answer. Thanks!

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  
Followers 0