Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    I'm using HTML5 for a mockup site i'm building and the navigation doesn't seem to be working properly.

    The navigation is supposed to look like the following;

    HOME | PORTFOLIO | SERVICES | ABOUT | CONTACT

    But it looks like the following;

    HOMEPORTFOLIOSERVICESABOUTCONTACT | | | |

    Below is the code, can anyone help me figure out what is wrong? The code isn't perfect because its a 'test' site for learning purposes.

    CSS CODE;

    nav {
    margin-left: -40px;
    }

    nav ul {
    list-style: none;
    letter-spacing: 1px;
    color: #929292;
    text-transform: uppercase;
    font-family: 'QuicksandBold';
    font-size: 14px;
    word-spacing: 5px;
    text-decoration: none;
    }

    nav li {
    float: left;
    }

    nav ul li {
    display: inline;
    }

    nav ul li a {
    text-decoration: none;
    border: none;
    color: #929292;
    text-align: left;
    }

    nav ul li a:hover {
    text-decoration: none;
    border: none;
    }

    nav ul li a:active {
    text-decoration: none;
    border: none;
    }

    nav ul li a:visited {
    text-decoration: none;
    border: none;
    }

    Thanks.

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Every article I can finf about letter-spacing and word-spacing was written in 2008 or so - I have a feeling they may be deprecated by now.

    Try this - it will put a 5px margin on the right side of the list items, which will give you a 5px gap to the right of each word. Since each of them is a link you'll put it on the nav ul li a element and you can give more general properties to the ul.


    nav ul li a{
    list-style: none;
    [S][S]letter-spacing: 1px;[/S][/S]
    color: #929292;
    text-transform: uppercase;
    font-family: 'QuicksandBold';
    font-size: 14px;
    [S][S]word-spacing: 5px;[/S][/S]
    margin-right: 5px;
    text-decoration: none;
    }
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    I've decided to just leave the separators out and go without. I did try out this neat trick from another site which was;

    border-right:1px solid;


    But it didn't look right.

    Thanks for the help.

  5. #4
    Junior Member
    Join Date
    Jan 2013
    Location
    New York City
    Posts
    1
    Member #
    34423
    Hey Mark,

    Your markup seems incorrect. Your calling a nav but are not declaring if it is a id or class, anyways replace your code with the following I wrote up for you.

    http://jsfiddle.net/b9LkA/7/

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Shivam Bhalla, post: 246115
    Your markup seems incorrect. Your calling a nav but are not declaring if it is a id or class, anyways replace your code with the following I wrote up for you.

    http://jsfiddle.net/b9LkA/7/
    If it's the only <nav> on the page, you don't need to declare and id or class. That's the point of the new semantic tags in HTML5. Good work on that jsfiddle, though. It certainly does solve the issue, just using HTML4.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:12 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com