Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Question How can I make the divider lines in my nav be the height of the NAV letters only?

    Below is the code I have for my site. However I just want the vertical divider lines between the links to be the height of the navigation letters and not the whole box. Is there something I can add to the
    Code:
    border-right
    to make it work?

    Code:
    #topNav nav li.folder {
        /*height: 42px;*/
    }
    #topNav nav li {
        border-right: 1px solid red;
        float: left;
        height: 42px;
        margin-right: 0;
        position: relative;
    }
    #topNav nav li:last-child{border-right:none;}

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove the border from #topNav nav li and set it to #topNav nav li a
    You might need to reduce the top/bottom paddings of the anchor and also set and extra rule to remove the border from the sub-nav elements (#topNav nav .folder ul li a), like border-right:none;

    PS:
    Code:
    #topNav nav li.folder {
        /*height: 42px;*/
    }
    The above CSS does nothing, so you may remove it completely. I was actually showing you to set the height on all <li>, in the other thread.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jddowell (09-12-2013)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •