Grow your CSS skills. Land your dream job.

nav bar links not spacing correctly – my first attempt

  • # May 1, 2009 at 3:36 am

    Ok – First techy post.

    Firstly, I’m a complete newb to CSS so please don’t shoot me down :D

    Have been watching the video podcasts and started on a Photoshop mockup ala Podcast #1, 2 & 3. Now, I’m struggling to get the nav links to line up correctly. Also, I was in thinking that the text links should have an area around them which can be clicked for the link? Is that correct? (therefore making it look like a button is the a link and not just the text) Hope this all makes sense with my non technical use of language :lol:

    Now. URL is http://www.portable-media-players.co.uk

    code I have created so far is:
    Index:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    style.css:

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    body {
    font-size: 1.3em
    font-family: Helvetica, sans-serif;
    background: url(images/banner-slice.jpg) repeat-x top #eff4a4;
    }
    li {
    font-size: 0.9em;
    }
    div#page-wrap {
    width: 792px;
    margin: 0 auto;
    }
    ul#nav {
    height: 216px;
    background: url(images/banner.jpg) no-repeat ;
    list-style: none;
    padding-left: 430px;
    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    width: 70px;
    float: left;
    margin-top: 170px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    }

    Hopefully you can see what I am getting at.
    I’m wondering whether it’s due to the nav buttons being off center and using the div#page-wrap is causing the width to act from the center of the page? Purely guessing really but that’s the only difference I could initially see between mine and the example in the podcast.

    Anyways, hoping someone can aid me in getting my first CSS site working :)

    Thanks in advance
    Ben

    # May 1, 2009 at 9:23 am

    Hi!

    I think you want to add

    Code:
    ul#nav li a {
    text-align: center;
    }

    to your CSS. That should center the text for the links.

    Hope that helps!

    # May 1, 2009 at 11:46 am

    Thanks ‘FriendofPugs’

    Code worked perfectly – tweaked the padding-left, after adding the suggested code, and now it’s centered in the button, and also has equal ‘active’ space to each word.

    Should there be an area above and below the word, to the edges of the button image which should be clickable? Or is that something I’d have to add as an addition, and is something beyond what a CSS starter should attempt? :D

    # May 1, 2009 at 12:11 pm

    It’s not ideal that you have your whole header background attached to your nav list, but this will give you what you want:

    Code:
    ul#nav li a {
    color:white;
    display:block;
    float:left;
    font-weight:bold;
    margin-top:160px;
    padding:10px 0;
    text-decoration:none;
    width:72px;
    }
    # May 1, 2009 at 2:16 pm

    Thanks Apostrophe. Worked perfectly!

    Am still learning the basics at the moment but may come back to you about the header background image sometime in the future to learn how it could be different.

    Onwards and Upwards!!

    # May 2, 2009 at 2:11 pm
    "BrittanyAdina" wrote:
    help me, any tutorial site for same kind of problem, I want to master css.

    You realize this website is called CSS Tricks, and there’s endless information on the "articles" and "videos" tab at the top of the page…. ? lol

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".