Hi Jeff, Sorry, but that snippet looks like a recipe for disaster.. Here's some feedback;
1/ You use <r:url /> as part of the image name. This means that, when you have deeper-nested pages, you would get image names like "products/cats.gif", which is not going to work. You could use <r:slug /> instead, which would only produce "cats.gif". 2/ You don't seem to understand the use of the r:navigation tag; <r:navigation urls="Title: /news | Title: /about | Title: /contact"> It's supposed to be something like urls="Blog: /news | About us: /about | Contact us: /contact" 3/ You use only images as content for your links. The fallback (alt attribute) is just the url, which makes for a very poor navigation for clients that cannot see images (think people surfing through WAP, people with a visual handicap, and probably foremost; spider bots like google and the like). What you need to do is provide a text entry that makes more sense as linktext, and then replace that text with the image you want through CSS. You will need a unique id attribute on your <li> and/or <a> tags. 4/ Perhaps you should look into the navigation_tags extension. The <r:nav /> tag could make your life much easier. Since you want to use images, you would want to use ids_for_links="true" or ids_for_lis="true". Check the (somewhat outdated) README at http://github.com/jomz/navigation_tags/tree/master I can not provide too much details about the CSS implementation, since that is my colleague's part of the job, but you can see a live implementation at http://www.indewulf.be. Also notice the plethora of handy css hooks r:nav provides. Regards, Benny > Hi All, > > Today is my first day building my site with Radiant -- I'm loving it! > > Once I got the basic layout, snippets, and pages implemented, I had to > figure out my navigation bar. It took me some tinkering, so I thought > I'd post the results on the wiki: > > > http://wiki.github.com/radiant/radiant/creating-a-ul-img-based-navigation-bar > > I'd appreciate any feedback or redirection if I did something ugly. I > wrestled with the wiki for a few minutes trying to figure out why > those extra grey spaces were showing up under each code block, but I > didn't crack the problem. > > - Jeff > _______________________________________________ Radiant mailing list Post: Radiant@radiantcms.org Search: http://radiantcms.org/mailing-list/search/ Site: http://lists.radiantcms.org/mailman/listinfo/radiant
