Overlay two borders

[Gwayn]

I need to overlay two borders:

_______________________

HTML: Select all

.navlist
{
margin: 0px 0px 0px 0px;
background-color: black;
width: 8.50em;
padding-bottom: 5em;
border-right: 0.50em solid red;
}

.navlist li a
{
display:block;
background-color: blue;
padding: 0.0em 0.0em 0.0em 1.0em;
border-right: 0.50em solid red;
}

_________________________


Well i need to overlay them cause in a .navlist li a:hover Only the <li> <a>
border will have to change color. Anyway with this code i got two borders
side by side, like:
.navlist li a ------
.navlist _____

But in vertical ... well how to overlay them?

[herkalees]

50 points for confusing me. Can you post a link or your source code?

[Gwayn]

Originally Posted by herkalees

50 points for confusing me. Can you post a link or your source code?

Thanks for the points

Well ill try to be more explicative:

HTML: Select all

<ul class="navlist">
<li><a href="#"><img src="X.gif"/></a></li>
<li><a href="#"><img src="Y.gif"/></a></li>
<li><a href="#"><img src="Z.gif"/></a></li>
</ul>

PHP: Select all

.navlist
{
margin: 0px 0px 0px 0px;
background-color: black;
width: 8.50em;
padding-bottom: 5em;
border-right: 0.50em solid red; 
}
 
.navlist li a
{
display:block;
background-color: blue;
padding: 0.0em 0.0em 0.0em 1.0em;
border-right: 0.50em solid red;
} 

Ok Now...







How i can get this?

[herkalees]

Below is different CSS, but it does what you want. It removed the background right-side border from the <ul>, and puts it into all anchors.

As far as I know, a border defined for a parent element (the <ul> in your case) will always be outside any child elements (the <li> in your case).

This method below just sticks the border on the same element, but changes it based on user actions.

Code: Select all

.navlist {
	width: 8.50em;
}
 .navlist li a {
	display: block;
	border-right: 0.50em solid blue;
}
 .navlist li a:hover {
	border-right: 0.50em solid green;
}

[Gwayn]

Originally Posted by herkalees

Code: Select all

.navlist {
    width: 8.50em;
}
 .navlist li a {
    display: block;
    border-right: 0.50em solid blue;
}
 .navlist li a:hover {
    border-right: 0.50em solid green;
}

Doesn't work.
This apply the border only at the link element, it means that the border appears broken: ----
Like the ".navlist li a" of the image 1, and then changes color when mouse over... but i need a unique continue border.

I could put empty list elements among the list elements that contain the links but i always get that empty black space among the list elements and i cannot eliminate them, i tried with all the attributes [border, padding, margin] in all elements [div, ul, li, li a] the black space still stays...

Any ideas?