Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Cannot modify nav bar

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

    Default Cannot modify nav bar

    Hi Guys,
    I have downloaded and installed the indent style sheet below:

    Code:
    <style type="text/css">
    
    .indentmenu{
    font: bold 15px Verdana;
    width: 100%; /*leave this value as is in most cases*/
    overflow: hidden;
    }
    
    .indentmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%; /*width of menu*/
    border: 1px solid #564c66; /*dark purple border*/
    border-width: 1px 0;
    background: black url(navbar/indentbg.gif) center center repeat-x;
    }
    
    .indentmenu ul li{
    display: inline;
    }
    
    .indentmenu ul li a{
    float: left;
    color: white; /*text color*/
    padding: 5px 11px;
    text-decoration: none;
    border-right: 1px solid #564c66; /*dark purple divider between menu items*/
    }
    
    .indentmenu ul li a:visited{
    color: white;
    }
    
    .indentmenu ul li a:hover, .indentmenu ul li .current{
    color: white !important; /*text color of selected and active item*/
    padding-top: 6px; /*shift text down 1px for selected and active item*/
    padding-bottom: 4px; /*shift text down 1px for selected and active item*/
    background: black url(navbar/indentbg2.gif) center center repeat-x;
    }
    
    </style>
    and I have some questions.

    1. I cannot modify the font. No matter which font I enter, the font on the nav bar is always Times Roman.
    2. When I center the nav bar, the height of it goes down significantly.
    Can someone help here?
    Thanks,
    Ed
    Last edited by james438; 12-08-2020 at 04:07 AM. Reason: format

  2. #2
    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,


    perhaps these modifications, may help you on your way...

    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>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <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 #f0f; /*  #564c66 dark purple border */
        background: #000 url(navbar/indentbg.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: 1px solid #f0f; /* #564c66 dark purple divider between menu items */
        font: bold 1em Verdana sans-serif;
        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/indentbg2.gif) center center repeat-x;
        color: #f0f; /*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>

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Thanks for the quick response.
    The nav bar centers nicely but the font is still Times Roman.

  4. #4
    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,

    there is nothing in the code I gave you that
    would display it as Times New Roman.

    Can you post a link to your site that displays
    it as that font?

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Coothead,
    I know that there is nothing in your code re Times New Roman.
    The website is not finished yet, in fact I have just started. But I have attached a screen shot how the nav bar looks.
    Thanks again,
    Ed
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	navbar.jpg 
Views:	54 
Size:	30.3 KB 
ID:	6410  

  6. #6
    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,

    without seeing the complete HTML and CSS that you
    are using it is difficult to see the cause of your problem.

    You have not said whether the "Times New Roman"
    is effecting the whole page or just the a elements in
    the menu.

    One possible cause could be something like this in your
    CSS code...
    Code:
    
    * {
        font-family:'times new roman'!important;
     }  
    
    ...which would effect the whole page, or this...
    Code:
    
    a {
        font-family:'times new roman'!important;
     }  
    
    ...which would only effect a elements

    coothead
    ~ the original bald headed old fart ~

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

    Default

    What I submitted in my original post IS the complete css, except that the verdana was arial.
    I downloaded it from this website, assuming it was a correct working code.
    The times roman font does not affect the entire website, just the nav bar.

  8. #8
    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,

    unless I can replicate your problem, I can see
    no possible way that I can help you.

    Put your page on line so that I may see it.

    coothead
    ~ the original bald headed old fart ~

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

    Default

    OK, thanks a lot for all your help.
    Ed

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

    Default

    Coothead,
    I've finally figured it out. I have modified this (took the sans serif out):
    .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*/
    }

    Thanks again for helping me out.
    Cheers,
    Ed

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
  •