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 4 of 4
  1. #1
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts

    Question li border-top:4px without moving text / content?

    How do I go about getting a border-top:1px solid #fff; with hover to a border-top:4px solid #fff; without moving content or text.

    Currently I've set the initial border-top state to have the same as the hover
    border same height

    initial border-top 1px height

    I'm sure that it's padding related but its just not working out.
    Any help would be appreciated!
    Last edited by student101; 04-09-2013 at 09:04 AM. Reason: link update
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there student101,


    does this help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>li hover</title>
    
    <style type="text/css">
    html, body {
        height:100%;
        padding:0;
        margin:0;
        background-color:#f2d33a;
        font-family:calibri,sans-serif;
        font-size:1em;
        color:#fff;
     }
    #nav {
        float:right;
        width:630px;
        background-color:#000;
    }
    ul.MenuBarHorizontal {
        width:600px;
        padding:0;
        margin:0;
        list-style-type:none;
        font-size:100%;
     }
    ul.MenuBarHorizontal li {
        position:relative;
        float:left;
        width:11em;
        margin:8px;
        border-top:1px solid #fff;
        text-align:center;
        cursor:pointer;
    }
    
    ul.MenuBarHorizontal a {
        display:block;
        padding:0.5em 0.75em;
        background-color:#000;
        color:#f2d33a;
        text-decoration:none;
    }
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        color:#fff
    }
    ul.MenuBarHorizontal li:hover, ul.MenuBarHorizontal li:focus {
        margin-top:5px;
        border-top:4px solid #f2d33a;
    }
    ul.MenuBarHorizontal li.current, ul.MenuBarHorizontal li .current {
        margin-top:5px;
        border-top:4px solid #f2d33a;
        color:#fff
    }
    </style>
    
    </head>
    <body>
    
    <div id="nav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
     <li class="current"><a href="#" title="About">About</a></li>
     <li><a href="#" title="Services">Services</a></li>
     <li><a href="#" title="Contact">Contact</a></li>
    </ul>
    </div>
    
    </body>
    </html>
    coothead

  • Users who have thanked coothead for this post:

    student101 (04-09-2013)

  • #3
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by coothead View Post
    Hi there student101,
    does this help...
    Yes it does, Thanks!
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    No problem, you're very welcome.

    coothead


  •  

    Posting Permissions

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