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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Change navigation font in CSS style?

    Hello all. I have been trying to change the navigation links to a different font face which is Occidental. (I don't want to change the body font of the site though- just the navbar only) Here is my site for viewing:

    http://www.angelfire.com/joeyc123/tiindex

    If anyone could shed some light on this issue, I'd be delighted!
    Here is the style sheet coding URL and link:
    http://www.angelfire.com/joeyc123/tistyle.css
    Code:
     
     
    /* default elements */
     
     
     
    *{margin:0px;padding:0px}
     
     
    h1
    {
    font-family:impact;
    font-size:3.3em; 
    font-weight: normal;
    color:#333333;
    padding-left:5px;
    line-height:1.6em
    }
     
    p
    {
    font-family:impact;
    font-size:2.3em; 
    font-weight: normal;
    color:#555555;
     
    }
     
    a
    {
    color:#3399ff;
    font-size:0.9em; 
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    }
     
     
    a:link
    {
    color:#3399ff;
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    }
     
     
    a:visited
    {
    color:#3399ff;
    font-style:normal;
    font-weight:normal;
    text-decoration:underline;
    }
     
     
    a:hover
    {
    color:#3399ff; 
    font-style:normal;
    text-decoration:none;
    }
     
     
     
     
     
    /* Layout */
     
    body
     
    {
    background:url(tibg.gif) repeat-x #303030;
    font-family:impact;
    text-align: center;
    color: #333333;
    }
     
    #wrapper 
     
    {
    background:transparent;
    margin-top:0px;
    margin-right: auto;
    margin-bottom:0px;
    margin-left: auto;
    width:850px;
    }
     
     
    #header .logo
     
    {
    float:left;
    padding-top:0px;
    padding-left:17px;
    border: none;
    }
     
     
     
    #nav ul
     
    {
    list-style:none;
    margin-left:90px;
    padding-top:50px;
    }
     
     
    #nav li
     
    {
    text-align:center;
    float:left;
    margin-left:2px;
    padding-left:0px;
    padding-bottom:0px;
    }
     
    #nav ul li a
     
    {
    display:block;
    color:#ffffff;
    border-top:1px solid #46433e;
    border-left:1px solid #46433e;
    border-right:1px solid #46433e;
    line-height:2.5em;
    padding:0 10px 0 10px;
    background:transparent;
    font-weight:normal;
    font-size: 0.88em;
    font-face:arial narrow
    text-decoration: none;
    }
     
    #nav li a:hover
    {
    color: #131313;
    background-color:#ffffff;
    }
     
    #nav ul li .selected
    {
    color: #131313;
    background-color:#ffffff;
    }
     
     
     
    #content
     
    {
    float:left;
    margin-left:0px;
    margin-right:0px;
    width:850px;
    background:#000000;
    margin-bottom:10px;
    }
     
     
    #col1
     
    {
     
    height:358px;
    background: url(timainimage.jpg) no-repeat ;
    margin-top:30px;
    margin-left:10px;
    margin-right:30px;
    text-align:left;
    font-size:1.1em;
    border:8px solid #ffffff;
    }
     
     
    #col1 h1
    {
    display:block;
    font-size:1.4em;
    font-family:occidental;
    text-align:center;
    font-weight:normal;
    color:#ffffff;
    font-weight:normal;
    padding-bottom:0px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
    }
     
     
     
    #col1 p
     
    { 
    font: normal 0.9em impact;
    font-size:1.1em;
    color: #cccccc;
    padding:10px;
    text-align:center;
    }
     
    #col2
     
    {
    float:left;
    margin-left:0px;
    padding-left:30px;
    padding-right:10px;
    padding-bottom:30px;
    margin-top:20px;
    background: transparent;
    width:380px;
    text-align:center;
    font-size:1.1em;
    }
     
    #col2 h1
    {
    display:block;
    font-size:1.4em;
    font-family:impact;
    text-align:center;
    font-weight:normal;
    color:#ffffff;
    font-weight:normal;
    padding-bottom:0px;
    margin-top:5px;
    margin-bottom:5px;
    }
     
    #col2 p
     
    { 
    font: normal 0.9em impact;
    font-size:1.1em;
    margin-top:10px;
    color: #999999;
    text-align:center;
    margin-left:7px;
    }
     
    #col2 ul
    {
    list-style-type:none;
    margin-top:10px;
    }
     
    #col2 li 
    {
    text-align:left;
    background:url(tiarrow.gif) no-repeat center left;
    margin-top:5px;
    margin-left:15px;
    padding-left:0px;
    padding-bottom:0px;
    color:#ffffff;
    }
     
    #col2 ul li a
    {
    color:#e1e1e1;
    padding-left:20px;
    font-weight:normal;
    font-size: 0.9em;
    text-decoration: underline;
    }
     
    #col2 ul li a:hover
    {
    color: #fff;
    text-decoration:none;
    }
     
     
     
     
    #col3
     
    {
    float:right;
    background:url(tiquote.jpg) no-repeat;
    width:400px;
    height:300px;
    margin-right:10px;
    margin-top:40px;
    padding:0px;
    text-align:center;
    font-size:1.1em;
    }
     
     
    #col3 p
     
    { 
    font: italic 1.1em impact;
    font-size:1.1em;
    margin-top:0px;
    color: #f7f528;
    padding:35px 15px 15px 40px;
    text-align:left;
    }
     
    #col3 p .big
     
    { 
    float:left;
    font-family: impact;
    font-size:1.6em;
    color: #f7f528;
    padding-left:0px;
    text-align:left;
    }
     
     
    #footer
     
    {
    clear:both;
    margin-top:0px;
    background:transparent;
    color:#666666;;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 0px;
    padding-top:0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    }
     
    #footer p 
     
    {
    font-size:0.7em;
    font-family:impact;
    font-weight:normal;
    line-height: 1.4em;
    color:#a4a3a3;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:5px;
    text-align:left;
    margin:auto;
    }
     
    #footer a 
    {
    font-size:1em;
    text-decration:none;
    font-weight:normal;
    color:#fff710;
    text-align:center;
    }
     
    #footer a:hover
     
    {
    text-decoration:none;
    font-weight:normal;
    color:#fff710;
    text-align:center;
    }
    Last edited by Apostropartheid; 06-28-2009 at 09:34 PM.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You've obviously got a grasp on CSS, so I don't understand how this would escape you. Fonts are declared like this:
    Code:
    
    selector {
      font-family: typeface, family;
    }
    If you wanted Occidental for your navigation, you'd use
    Code:
    
    #nav {
      font-family: occidental, georgia, serif;
    }
    
    where georgia is a backup font, seeing as it's very, very unlikely someone will have Occidental installed on their computer.


  •  

    Posting Permissions

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