Web Analytics Made Easy -
StatCounter Hover border - can it change in function?? - CodingForum

Announcement

Collapse
No announcement yet.

Hover border - can it change in function??

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Hover border - can it change in function??

    Please take a look at the attached code.

    When I hover over the li item of 'portfolio' and then switch back and forth from hovering over 'portfolio' and 'contact us' it seems the space slightly increases and decreases.

    I know its a minor thing, but is there a way to rectify this in the current format? I know I could potentially restructure things, however ideally want to keep the current format.


    ------------------------------------------------------

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <style type="text/css">


    #bodywrapper {font-style:serif;
    color:gray; }

    .mainwrapper { width:800px;
    margin:auto;
    padding-top:25px; }

    .headnavandlogo {color:#5898ED;
    font-size:12px; }

    .headnavandlogo ul {list-style-type:none; }
    .headnav1 {float:right;
    padding-right:100px; }
    .headnav1 li {padding-bottom:3px;
    padding-top:5px;
    }
    .headnav2 {float:right; }
    .headnav2 li {padding-bottom:3px;
    padding-top:5px;}
    .headnav2 li:hover {border-bottom:solid;
    border-width:1px;}
    .headnav1 li:hover {border-bottom:solid;
    border-width:1px; }
    .homenav {border-bottom:solid;
    border-width:1px;
    margin-right:19px; }

    </style>
    </head>
    <body id="bodywrapper">
    <div class="mainwrapper">
    <div class="headnavandlogo">

    <ul class="headnav1">
    <li class="portfolio">PORTFOLIO</li>
    <li class="contactus">CONTACT US</li>
    </ul>

    <ul class="headnav2">
    <li class="homenav">HOME</li>
    <li class="servicesnav">SERVICES</li>
    </ul>

    </div>





    </div>
    </body>
    </html>

  • #2
    Fixed it, amended the padding on the portfolio ul to minus one to take account of the border

    Comment


    • #3
      Adding a border to an element increases its overall width and height by twice the border thickness.

      The css box model.

      Comment

      Working...
      X