Adding a class to a menu

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

MCD -> Adding a class to a menu (8/30/2005 17:04:19)
I need to add a background image (arrow) to a few of the links on a popout menu. I have tried what seems everything and I'm still not getting what I need. Can anyone offer a suggestion or tell me why this doesn't work? CSS Code #nav a.arrow { background-image: url(../arrow.gif) center right no-repeat; } In my HTML I simply called the class: HTML <li><a class="arrow" href="#">Link 1</a> BTW - The rest of the menu is working fine.

Tailslide -> RE: Adding a class to a menu (8/31/2005 3:23:51)
Hi again! CSS: #nav a.arrow {background: url(../arrow.gif) no-repeat right center;} Your HTML is right. Here it is working: Test Page

MCD -> RE: Adding a class to a menu (8/31/2005 10:38:34)
Yep, still me Tailside and I am now past hair pulling stage. I know you are now happy. [:)] I cannot see any difference in your declaring a class and mine. Here they both are: Mine #nav a.arrow {background: url(../images/arrow.gif) no-repeat right center;} Yours #nav a.arrow {background: url(rightarrow.gif) no-repeat right center; } I am obviously missing something but no matter how much I study your code and other websites I cannot find it.

Tailslide -> RE: Adding a class to a menu (8/31/2005 10:45:00)
Hi See I told you CSS was fun! [:D] On your example at the start of this thread your code was slightly different: #nav a.arrow {background-image: url(../arrow.gif) center right no-repeat;} note the background-image rather than just background. Did you take out the "-image" from your original CSS? Edit: Just checked on your site itself - the CSS looks fine but I can't see the classes on the /staff.asp page - can you show us your test page?

d a v e -> RE: Adding a class to a menu (8/31/2005 10:52:16)
btw, a # hash (or octothorpe, or whatever...) is for an id i.e. a unique instance of that 'thingy' on a page. a class begins with a period/full stop .class #id

Tailslide -> RE: Adding a class to a menu (8/31/2005 10:53:59)
Dave - the #nav is for the <ul id="nav"> and the .arrow is the class for the link with the right arrow attached.

d a v e -> RE: Adding a class to a menu (8/31/2005 10:55:55)
oops sorry not concentrating - too busy listening to music while i was half reading the css. [:)]

MCD -> RE: Adding a class to a menu (8/31/2005 10:57:45)
I have continued to dicker and study so it is slightly different. You can see my pages at: www.fbcspringville.com/staff.asp

d a v e -> RE: Adding a class to a menu (8/31/2005 10:59:18)
quote: dicker are you allowed to say that sort of thing on a forum? ;)

Tailslide -> RE: Adding a class to a menu (8/31/2005 11:19:06)

Only thing is that the classes are missing from the links - should be like this:

<div id="navigation">
    <ul id="nav">
          <li><a href="index.asp">Home</a></li>
          <li><a href="staff.asp">Staff</a></li>
          <li><a href="calendar/index.asp">Calendar</a></li>
          <li><a href="prayer.asp">Prayer Requests</a></li>
          <li><a href="newsletter/default.asp">Newsletter</a></li>
          <li><a href="#" class="arrow">Ministries</a>
                 <ul>
                 <li><a href="gods_kids.asp">God's Kids</a></li>
                 <li><a href="little_chapel.asp">Little Chapel</a></li>
                 <li><a href="children.asp">Children</a></li>
                 <li><a href="student.asp">Students</a></li>
                 <li><a href="seniors.asp">Senior Adults</a></li>
                 <li><a href="music.asp">Music</a></li>
                 <li><a href="discipleship.asp">Discipleship</a></li>
                 <li><a href="evangelism.asp">Evangelism</a></li>
                 </ul>
          </li>
          <li><a href="#" class="arrow">Resources</a>
                  <ul>
                  <li><a href="bpnews.asp">Baptist Press</a></li>
                  <li><a href="history.asp">History</a></li>
                  <li><a href="links.asp">Links</a></li>
                  </ul>
          </li>
          <li><a href="salvation.asp">Seeking Jesus?</a></li>
          <li><a href="contact.asp">Contact Us</a></li>
          </ul>

Your CSS looks exactly right to me. Only other thing to check is the path to the image.

Tailslide -> RE: Adding a class to a menu (8/31/2005 11:22:08)
quote: ORIGINAL: d a v e oops sorry not concentrating - too busy listening to music while i was half reading the css. [:)] You youngsters (shakes fist in the air at no-one in particular)!

MCD -> RE: Adding a class to a menu (8/31/2005 16:32:02)
The problem seems to be that the navigation is in a FP include. Is there any solution to that problem? I got it to work in a single page without the include page.

MCD -> RE: Adding a class to a menu (8/31/2005 17:53:07)
Here is the solution to this mess. My FP was not updating my "include." Once I published the include by right clicking it telling FP to publish the file everything was okay. Thanks Tailslide for ALL your help. I learned a lot. I also found out I have a lot to learn and that CSS menus have endless possibilities.

caz -> RE: Adding a class to a menu (8/31/2005 18:01:30)
Well that explains the odd image path for the arrow, it didn't correspond with the rest of your images on that page. I was just about to post this, -The path to other images on that page is "images/imagename.ext", not "../images/imagename.ext". Is that the problem? Congratulations, I felt your pain. Gotta love FP. [;)]

Tailslide -> RE: Adding a class to a menu (8/31/2005 18:17:21)
quote: ORIGINAL: MCD Thanks Tailslide for ALL your help. I learned a lot. I also found out I have a lot to learn and that CSS menus have endless possibilities. No problem - glad it all worked out!

Page: [1]

0.09375