Page 3 of 3 FirstFirst 123
Results 21 to 25 of 25

Thread: Cannot modify nav bar

  1. #21
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have attached an enlarged pic of one of the tabs.
    Left of the "M" at the left end of the tab there is a gap that shows on all tabs when hovering, except the most-left "Home" tab.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	tab.jpg 
Views:	37 
Size:	20.5 KB 
ID:	6412  

  2. #22
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,798
    Thanks
    1
    Thanked 253 Times in 248 Posts

    Default

    Hi there esm.


    let's use CSS flex instead...
    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Untitled document</title>
    
    <!--
    The internal CSS should be transferred to an external file
    <link rel="stylesheet" href="screen.css" media="screen">
    -->
    
    <style media="screen">
    body {
        font: normal 1em / 1.62em sans-serif;
     }
    
    .indentmenu {
        display: flex;
        justify-content: center;
     }
    
    .indentmenu ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #38571A; /* dark green border */
        background: #000 url(navbar/indentgreen.gif) center center repeat-x;
        box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
     }
    
    .indentmenu ul li a {
        display: block;
        padding: 0.32em 0.69em; 
        border-right: 2px solid #fff;/* white divider between menu items */
        font: 1.25em Verdana;
        text-decoration: none;
        color: #fff; /*text color*/
     }
    
    .indentmenu ul li:last-of-type a {
        border-right: 0;
     }
    
    .indentmenu ul li a:visited {
        color: #fff;
     }
    
    .indentmenu ul li a:hover,
    .indentmenu ul li a:active, 
    .indentmenu ul li .current {
        padding-top: 0.36em; /*shift text down 1px for selected and active item*/
        padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/
        background: #000 url(navbar/indentgreen2.gif) center center repeat-x;
        color: #fff; /*text color of selected and active item*/
     }
    </style>
    
    </head>
    <body>
    
     <div class="indentmenu">
      <ul>
       <li><a href="index.html" class="current">About Us</a></li>
       <li><a href="meeting.htm">Meeting Dates & Topics</a></li>
       <li><a href="members.htm">Members-Only Info</a></li>
       <li><a href="garden.htm">Garden</a></li>
      </ul>
     </div>
    
    </body>
    </html>
    
    coothead
    ~ the original bald headed old fart ~

  3. #23
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Works like a charm, thanks again.
    Cheers,
    Ed

  4. #24
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,798
    Thanks
    1
    Thanked 253 Times in 248 Posts

    Default

    Hi there esm,

    by changing display: inline-block to display:flex it removed
    the 3px right and bottom margins that inline elements have.

    coothead
    ~ the original bald headed old fart ~

  5. #25
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK.
    My CSS knowledge doesn't go that far.

Similar Threads

  1. how to modify featuredcontentslider?
    By romy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-08-2011, 04:37 PM
  2. Help to modify Up Counter
    By BernardSullivan2001 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-26-2009, 08:01 AM
  3. Modify setcookie
    By hnpdyn in forum JavaScript
    Replies: 1
    Last Post: 02-13-2006, 06:26 AM
  4. Modify Script.
    By Cheng in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-05-2006, 01:22 PM
  5. Need To Modify
    By arimakidd in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-19-2005, 04:42 PM

Bookmarks

Posting Permissions

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