Link to home
Start Free TrialLog in
Avatar of Arnold Layne
Arnold LayneFlag 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.
SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 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
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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
{

}
Somehow, I did lose my styling for the li that i had. when i added it back, it worked.
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

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.