ByronMcGrath ByronMcGrath - 6 months ago 10
CSS Question

CSS issues Nav Buttons

Hi I have some CSS issues

My problem is that my nav bar buttons are changing simply by moving the CSS code in the style sheet.
I also cant seem to get my border-right to work only on the :firstchild as it count to both first and lastchild
Here is an example of my issue with the style sheet code blocks moving that's affecting the results.

All the same code but different output:

http://jsfiddle.net/kyF3m/6/

http://jsfiddle.net/PsX27/

and I also recieve the following error with making my border-right work on the :firstchild (only)

The successful Result

The failed result

As mentioned I do have

li:last-child {
border-right: 0px;
position: relative;
padding: 15px;
padding-right: 20px;
padding-left: 12px;
top: 10px;
}

li:first-child {
padding: 37px;
padding-bottom: 12px;
position: relative;
top: 10px;
width: 150px;
right: 25px;
margin-left: -15px;
border-right: #525252 1px solid;
}


but it appears that it isn't working on this page.

Answer

Your structure was itself. you cannot use a a directly under ul. i have changed the approach a bit but the desired output has been achieved and will not change in any condition.

Link to fiddle: http://jsfiddle.net/PsX27/50/

HTML:

<body>
    <div id="Wrapper">
        <div id="Nav">
            <ul>
                <li><a href="ReviewPage.aspx">Review</a>
                </li>
                <li><a href="#.aspx">Your Reviews</a>
                </li>
            </ul>
        </div>
    </div>
</body>

CSS:

ul {
    list-style: none;
    padding:0;
    margin:0;
    text-indent:0;
    position: relative;
    background-color: transparent;
    font-family:'Lobster', cursive;
}
#Nav {
    height: 45px;
    width: 240px;
    margin-top: 0px;
    background-color: #242424;
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
li {
    display: inline-block;
    position: relative;
    text-align: center;
    background-color: transparent;
    cursor: pointer;
}
li a{
    display:inline-block;
    color: #808080;
    padding:11px 21px;
    text-decoration:none;
    border-right: #525252 1px solid;
}

li:last-child a{
    border-right:none;
}

li a:hover {
    color: #20a7b0;
}
Comments