Comments on: CSS Text based navigation bar with images

By: Rebecca

Rebecca — Sat, 09 Jul 2011 11:11:32 +0000

HI Matt

This is a great tutorial and I have created my bar.

I have a problem…I’m no expert with html or css and I have created my website using iWeb and wondered if it was possible to get my menu bar into that. If so my next problem would be how to do it. I have no idea how it needs to be structured to work. Does the css and xhtml code go into the iWeb html snipet or does the XHTML bit only go in there and then the css in your folder? I’m stuck. My bar is exactly how I want it, but don’t know what to do next…

Can you help me with the structure?

Thx

By: Rob Stathem

Rob Stathem — Fri, 17 Jun 2011 08:44:58 +0000

This is a GREAT tutorial, and I’m going to bookmark it! Thanks Matt! :)

This is a bit off topic, but on the path of CSS and navigation. How does one create custom image bullets in between a horizontal navigation? I’m going to do a bit more research on this, but using background images for the actual list items puts bullets for EACH separate link, thus defeating the purpose of adding bullets “in between” a horizontal list. Even by using custom image bullets for the list items does not provide full placement/positioning control. Percentages might get you more accuracy, but it does not place bullets directly in the middle of each list item.

Thank you so much,
rob

By: cj

cj — Thu, 07 Apr 2011 20:41:17 +0000

Very cool menu generator. One problem I have though – I use a DW template with the menu in it – so the menu is the same on every page. I can’t move the class=”current” tag to a different link for each page.

So I had to take each:

ul#navbar li#navbar-1 a.current {
background-position:0px -80px
}

remove the class:

ul#navbar li#navbar-1 a {
background-position:0px -80px
}

and put that in the editable region in the head of each page

By: Matt

Matt — Thu, 24 Mar 2011 12:38:49 +0000

Glad to hear that, thanks all for the nice comments.

By: traci murphy

traci murphy — Mon, 14 Mar 2011 17:27:07 +0000

You just saved my sanity – I spent the last 24 hours trying to figure this all out. THANK YOU for sharing this great resource!

By: David Hughes

David Hughes — Thu, 23 Dec 2010 20:18:02 +0000

This is an awesome improved version of the old method of doing this. I know the article is 2 years old now, but I just stumbled across it and it works, perfectly.

I only wish I had found it earlier, would have been very useful!

Thank you so much for this, it’s a huge help.