Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25

Thread: Cannot modify nav bar

  1. #11
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,872
    Thanks
    2
    Thanked 266 Times in 261 Posts

    Default

    Hi there ems,

    I am pleased that you have managed to resolve your problem.

    coothead
    ~ the original bald headed old fart ~

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

    Default

    The only thing that doesn't work anymore is the 1px shift down when hovering. But that's OK.

  3. #13
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,872
    Thanks
    2
    Thanked 266 Times in 261 Posts

    Default

    Hi there ems

    post your full HTML and CSS code for me to test.

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Here it is:
    Code:
    /<style media="screen">
    body {
        font: normal 1em / 1.62em sans-serif;
     }
    
    .indentmenu {
        text-align: center;
     }
    
    .indentmenu ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        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 {
        display: inline-block;
        vertical-align:middle;
     }
    
    .indentmenu ul li a {
        display: block;
        padding: 0.32em 0.69em;
        border-right: 2px solid #FFFFFF; /* 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="#">link one</a>
       </li><li>
       	<a href="#">link two</a>
       </li><li>
       	<a href="#">link three</a>
       </li><li>
       	<a href="#">link four</a>
       </li>
      </ul>
     </div>
    
    </body>
    </html>
    
    <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>
    Last edited by james438; 12-10-2020 at 02:25 AM. Reason: format

  5. #15
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,872
    Thanks
    2
    Thanked 266 Times in 261 Posts

    Default

    Hi there ems,

    the hover effect works OK on these...

    1. Meeting Dates & Topics
    2. Members-Only Info
    3. Garden


    You will find that this...
    Code:
    
    .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*/
     }
    ...is moving About Us down 1px without hover.

    See image:-

    Click image for larger version. 

Name:	menu.jpg 
Views:	60 
Size:	8.0 KB 
ID:	6411

    coothead
    ~ the original bald headed old fart ~

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

    Default

    I was not talking about the hover effect, that works just fine.
    I'm talking about the 1px shift down when hovering. It shifts with your original code when I see Times Roman.
    However, when I take out the "sans serif" part and I see Verdana, the 1px shift when hovering does not happen.

  7. #17
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,872
    Thanks
    2
    Thanked 266 Times in 261 Posts

    Default

    Hi there esm,

    I am sorry but I cannot replicate any of the
    problems that you state that you are having.

    I use Firefox and Google Chrome to test
    my code, which browser(s) are you using
    to test yours?

    coothead
    ~ the original bald headed old fart ~

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

    Default

    OK, we're closing in.
    I normally use Opera (shift down does not work) but I just tested it with Firefox and it does work there.
    So, just on Opera problem. Thanks for the help.
    Cheers,
    Ed

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

    Default

    coothead,
    I just noticed another thing: to the left of each tab there seems to be what looks like a 5px gap that does not change when hovering.
    Is there any way to get rid of that gap?
    Thanks,
    Ed

  10. #20
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,872
    Thanks
    2
    Thanked 266 Times in 261 Posts

    Default

    Hi there esm,

    I am not sure what you mean.

    At present the a elements have this padding...

    normal state:-
    Code:
    
        padding: 0.32em 0.69em;
    hover state:-
    Code:
    
        padding: 0.36em 0.69em 0.28em;
    So what do you actually require?

    coothead
    ~ the original bald headed old fart ~

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
  •