Avatar of Arnold Layne
Arnold Layne
Flag for United States of America asked on

descendant selector nav problem

I use descendant selectors a lot because I like to get every attribute that I can off the html page. Here''s my nav.

<div id="nav">
       
        <div id="home"></div>

            <ul class="navt">
                <li><a href="#" id="navLoan">LOAN CENTER</a></li>
                <li><a href="About.aspx" id="navAbout">ABOUT US</a></li>
                <li><a href="Contact.aspx" id="navContact">CONTACT US</a></li>
                <li><a href="Testimonials.aspx" id="navTestimonials">TESTIMONIALS</a></li>
                <li><a href="#" id="navResources">RESOURCES</a></li>
                <li><a href="#" id="navFAQ">FAQ</a></li>
                <li><a href="#" id="navHome">HOME</a></li>
            </ul>
        </div>

Here's the related css for the nav

.navt a
{
    color:#FFF;
    text-decoration:none;
    display:block;
    line-height: 45px;
    height:100%;
    padding: 0 25px;
    text-transform: uppercase;
    border-right:1px solid #424542;  
}

This empty div from above <div id="home"></div> is supposed to tell my css what the current page is and in this case, it's the home page. I want to add a background image to the nav link that corresponds to the current page (the home link). This doesn't work and doesn't inherit any styling.

#home #navHome
{
    background-image:url(..images/navtbgCurrentTop.png);
}

So how do I inherit all of the styling from the normal nav links and simply add a background image in the case of the link that represents the current page? Currently, it looks like none of the nav links have any styling and before I added the current page div (home div) and the associated css it worked great. I want to accomplish this without javascript and I know there must be a correct way to do this in css.
CSSHTML

Avatar of undefined
Last Comment
Arnold Layne

8/22/2022 - Mon
SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Arnold Layne

ASKER
They are both the same thing so i don't understand your question. Anyway, the real problem isn't whether the background image shows up, it's the fact that all styling gets lost and the links show as a normal li with a bullet and a vertical alignment instead of horizontal
ASKER CERTIFIED SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Arnold Layne

ASKER
Hi Chris, your suggestion sounds correct but it didn't work. As far as the empty div, if you read the code above, the empty div is not supposed to have the bg image, it''s just simply a way to declare it as a particular page so that I can style the correct anchor (nav link) with an id and give it that background image.
Arnold Layne

ASKER
Here's more css. Everything IS styled but I didn't post that part.

.navt
{
    background-color:#424142;
    background-image:url("../images/navtbg.png");
    background-repeat:repeat-x;
    height:45px;
}

.navt a
{
    color:#FFF;
    text-decoration:none;
    display:block;
    line-height: 45px;
    height:100%;
    padding: 0 25px;
    text-transform: uppercase;
    border-right:1px solid #424542;  
}

.navt li
{
    border-right:1px solid #212021;
}


.nav ul
{

}
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Arnold Layne

ASKER
Somehow, I did lose my styling for the li that i had. when i added it back, it worked.
Chris Stanyon

The styling you've now posted still doesn't contain any code to remove the bullets or align the LI horizontally!

I'm not sure I follow what you mean. I've never seen an empty div used to set the current page before. Normally, to set the current page, you just add a class to the relevant menu item, for example 'selected' or 'current' and style based on that:

<ul>
     <li><a href="page1.html">Page 1</a></li>
     <li><a href="page1.html">Page 1</a></li>
     <li class="current"><a href="page1.html">Page 1</a></li>
     <li><a href="page1.html">Page 1</a></li>
</ul>

Open in new window

Arnold Layne

ASKER
Yes I know, after I posted the css, I realized that I lost the styling for the li somehow. When i added it, it worked. As far as nesting the content within the div rather than a top empty div, that worked perfectly, which is why I rated that answer as the top one. As soon as you said that, i knew it was right. Thanks.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.