CODEWITHSUNDEEP
htmlcss
Johny
Johny

Reputation: 369

CSS: Highlight current menu item

I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong

HTML

<body id="home">


                <div id="topMenu">
                    <div class="nav-home" id="topMenuBlock"><a href="" id="home"><p>Home</p></a></div>
                    <div id="nav-about"><a href="" id="about"><p>About</p></a></div>
                    <div id="nav-rates"><a href="" id="rates"><p>Rates</p></a></div>
                    <div id="nav-faq"><a href="" id="faq"><p>FAQ</p></a></div>
                    <div id="nav-contact"><a href="" id="contactus"><p>Contact</p></a></div>
                    <div id="nav-careers"><a href="careers.html" id="contactus"><p>Careers</p></a></div>
                </div>

                <div id="rightTopMenu"></div>
        </div>...other stuff</body>

Then for the CSS I have the following:

#home a.nav-home{ border-bottom:2px solid white; }

Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?

Thanks.

Upvotes: 2

Views: 4456

Answers (3)

Jake Stoeffler
Jake Stoeffler

Reputation: 2905

Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.

Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.

Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):

#nav-home{ border-bottom:2px solid white; }

Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.

Upvotes: 1

No Results Found
No Results Found

Reputation: 102864

You've a little bit of a mess here.

Do the links HAVE to be in a List, or can I leave them in div's?

They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.

Problem with duplicate ids

  • You have <body id="home"> and <a href="" id="home">
  • You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)

You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.

You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:

  • #home {} because that's the id of the <a> element you want
  • .nav-home a {} - Selects the <a> inside an element with class="nav-home"

Upvotes: 2

aqua
aqua

Reputation: 3375

Your class identifier should be in the <a /> tag

You have

<div class="nav-home" id="topMenuBlock"><a href="" id="home"><p>Home</p></a></div>

but you want

<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>

Modify your CSS class accordingly.

Upvotes: 0

Related Questions