[Konnor]

Hi there,

I'm seemingly having 2 issues styling a nav bar in my footer menu and wondered if I could get some thoughts.

The nav bar looks like the following...

<div id="footer">
				
	<ul>
	    <li><a href="index.html">home</a></li>
	    <li><a href="#">about</a></li>
	    <li><a href="#">news</a></li>
	    <li><a href="#">services</a></li>
	    <li><a href="#">portfolio</a></li>
	    <li><a href="#">contact</a></li>
	</ul>
				
	<p> copyright &copy <a href="#">Matt O'Connor</a> 2007 - www.mattoconnor.co.uk </p>
				
</div><!-- End Footer Section -->

	div#footer ul li {
		color: #565656;
		padding-right: 4px;
		padding-left: 4px;
		float: left;
		border-right: 1px solid;
	}
		
	div#footer ul li:last-child a {
		border-right: none;
		background: red;
	}
		
	div#footer ul li a{
		color: #565656;
	}
	
div#footer p {
        clear: left;
        padding: 2px 0 2px 4px;
}

1. Why would the 'last-child' selector not work for the border on the right? It seems to be targeting correctly based on the red background displaying. I have tried putting this on the <a> as well to no avail.

2. I have a...

a:hover {
        text-decoration: none;
	color: #72a44c;  
}

specified at the top of my document, the colour of which I wanted to keep for the hover on this menu. However it seems having specified the colour against the a, the hover is no longer inherited. I assume I can add another bit of CSS for the hover specifically in this nav menu but I was curious to know why it doesn't inherit.

Many thanks,

This post has been edited by Konnor: 26 January 2012 - 07:41 PM

[Wickham]

Without testing, just a quick thought, the "a" tag is an inline element and borders won't work unless you add display: block; to the "a" tag style. I might be wrong.

[Bomb]

You need to add the class "last-child" to your list...

<li class="last-child"><a href="#">contact</a></li>

And to get the mouse over colour change you need to define the other states too...

a:link, a:visited, a:active {background: black;}
a:hover {color:red;}

**EDIT**

Try this...

div#footer ul li {
                color: #565656;
                padding-right: 4px;
                padding-left: 4px;
                float: left;
                border-right: 1px solid;
}
               
div#footer ul li:last-child {
                border-right: none;
}
                
div#footer ul li a{
                color: #565656;
}
        
div#footer p {
                clear: left;
                padding: 2px 0 2px 4px;
}


div#footer a:link, a:visited, a:active {
                color: #565656; text-decoration: none;
}

div#footer a:hover {
                color: #72a44c; text-decoration: none;
}

<div id="footer">
                                
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">news</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">portfolio</a></li>
            <li class="last-child"><a href="#">contact</a></li>
        </ul>
                                
        <p> copyright &copy <a href="#">Matt O'Connor</a> 2007 - 

www.mattoconnor.co.uk </p>
                                
</div><!-- End Footer Section -->

This post has been edited by Bomb: 26 January 2012 - 08:27 PM

[The Web Solution Provider]

Bomb, on 26 January 2012 - 08:00 PM, said:

You need to add the class "last-child" to your list...

<li class="last-child"><a href="#">contact</a></li>

And to get the mouse over colour change you need to define the other states too...

a:link, a:visited, a:active {background: black;}
a:hover {color:red;}

**EDIT**

Try this...

div#footer ul li {
                color: #565656;
                padding-right: 4px;
                padding-left: 4px;
                float: left;
                border-right: 1px solid;
        }
                
        div#footer ul li:last-child {
                border-right: none;
             
        }
                
        div#footer ul li a{
                color: #565656;
        }
        
div#footer p {
        clear: left;
        padding: 2px 0 2px 4px;
}


div#footer a:link, a:visited, a:active {
        color: black; text-decoration: none;
}

div#footer a:hover {
        color: #72a44c; text-decoration: none;
}

<div id="footer">
                                
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">news</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">portfolio</a></li>
            <li class="last-child"><a href="#">contact</a></li>
        </ul>
                                
        <p> copyright &copy <a href="#">Matt O'Connor</a> 2007 - 

www.mattoconnor.co.uk </p>
                                
</div><!-- End Footer Section -->

That won't work mate, adding that class to the LI. Because the css isnt set as a class its set as a selector. You would have to change div#footer ul li:last-child to div#footer ul li.last-child for your method to work.

Or from the orignal probably div#footer ul:last-child a might do it as well.

[Bomb]

The Web Solution Provider, on 26 January 2012 - 08:25 PM, said:

That won't work mate, adding that class to the LI. Because the css isnt set as a class its set as a selector. You would have to change div#footer ul li:last-child to div#footer ul li.last-child for your method to work.

Or from the orignal probably div#footer ul:last-child a might do it as well.

Yeah my mistake, forgot to change the ":" to "."

[The Web Solution Provider]

Bomb, on 26 January 2012 - 08:34 PM, said:

Yeah my mistake, forgot to change the ":" to "."

Lol didn't mean to be patronising.

[Wickham]

Yes, the last child needs moving to a new style which has border: none; to delete the end border:-

div#footer ul li:last-child {
		border-right: none; /*new style*/
	}
		
	div#footer ul li:last-child a {
		/*border-right: none;*/
		background: red;
	}

The markup stays as you had it in the first post.

and if you have styles beginning with div#footer then you need to repaet that in an extra style:-

div#footer a:hover {
        text-decoration: none;
	color: #72a44c;  
}

This post has been edited by Wickham: 26 January 2012 - 09:37 PM

[Konnor]

Wickham, on 26 January 2012 - 09:32 PM, said:

Yes, the last child needs moving to a new style which has border: none; to delete the end border:-

div#footer ul li:last-child {
		border-right: none; /*new style*/
	}
		
	div#footer ul li:last-child a {
		/*border-right: none;*/
		background: red;
	}

The markup stays as you had it in the first post.

and if you have styles beginning with div#footer then you need to repaet that in an extra style:-

div#footer a:hover {
        text-decoration: none;
	color: #72a44c;  
}

Excellent thank you. That's sorted it.