Spacing out the links in my nav bar

Discussion in 'Web Design' started by jeanm, Dec 11, 2010.

to remove all ads.
  1. jeanm

    jeanm Member

    Messages:
    148
    My site is very simplistic but I refuse to "go fancy" until I understand every step of what I'm doing first. I don't want to copy html from other sites if I can't understand all of it. "Fancy" will come later, I hope ;)

    I'm having trouble with my nav bar. I can't see how to move the various links further apart from each other.


    This is the code I have used in the CSS:

    div.navigation
    {
    height:50px;
    padding:0.5em;
    background-color:#87870D;
    color:#FFF6E6;
    }


    I have a page called navigation.php and this is the code:

    <a class="navigationtext" href="../index.htm">Home</a> |
    <a class="navigationtext" href="../railway-trip-ghan.htm">The Ghan</a> |
    <a class="navigationtext" href="../railway-trip-trans-siberian.htm">Trans Siberian</a> |
    <a class="navigationtext" href="../travel-information.htm">Travel Information</a> |
    <a class="navigationtext" href="../useful-contacts.html">Useful Contacts</a> |
    <a class="navigationtext" href="../travel-journals-blogs-articles">Travel Journals</a>


    This is the code I have on the actual page:

    <div class="navigation">
    <p style="text-align: center;"><?php include ("navigation.php"); ?></p>
    </div>



    When I look on the page in design mode the links are there but they are jammed up together too much. How can I separate them please?
     
  2. Denno

    Denno New Member

    Messages:
    51
    Pretty sure the padding is only on the inside of the DIV.

    You will need to add CSS styling for the <a> tag, giving that padding. You may want to remove the set height whilst you're testing too, that way things can expand as they wish, then you get a better understanding as to where they will go.
    But definitely need to style the link tag with some padding.

    Hope that helps
    Denno
     
  3. jeanm

    jeanm Member

    Messages:
    148
    Thanks Denno. I'll give it a try.
     
  4. jeanm

    jeanm Member

    Messages:
    148
    I decided to do it properly and go with a list for the nav bar and all has worked well except the text is now sitting a bit below the actual nav bar. I've been through the code so many times but I can't solve the problem. Could someone please tell me what I've got wrong. The CSS is:


    h1 {font-family: arial,helvetica,sans-serif; font-size: 14pt; color: #54542A; text-transform: capitalize;}
    h2 {font-family: arial,helvetica,sans-serif; font-size: 12pt; color: #54542A; text-transform: capitalize;}
    h3 {font-family: arial,helvetica,sans-serif; font-size: 10pt; color: #54542A}
    h4 {font-family: arial,helvetica,sans-serif; font-size: 9pt; color: #54542A; text-align: center}
    p,li {font-family: arial helvetica,sans-serif; font-size: 9pt; text-align: justify;}




    body {background-color: #D7D790; font-size: 100%; margin: 0px;padding: 0px;border: 0px;left: 0px;top: 0px;}



    a:link {font-family: arial,helvetica,sans-serif; color: #54542A; font-weight: bold;text-decoration: underline}
    a:visited {font-family: arial,helvetica,sans-serif; color: #6B6B00; font-weight: bold; text-decoration: underline}
    a:hover {font-family: arial,helvetica,sans-serif; color: #54542A; font-weight: bold; text-decoration: underline}
    a:active {font-family: arial,helvetica,sans-serif; color: #54542A; font-weight: bold; text-decoration: underline}



    div.container
    {
    width:900px;
    height:auto;
    background-color:#BDBD7E;
    margin-top:0px;
    margin-right:50px;
    margin-bottom:5px;
    margin-left:50px;
    border:1px #54542A;
    }


    div.header
    {
    height:203px;
    width: 900px;
    background-image: url(images-general/header900x203text.jpg);
    background-repeat: no-repeat;
    padding:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    }


    div.navigation
    {
    height:50px;
    padding:0.5em;
    background-color:#87870D;
    color:#FFF6E6;
    }


    div.content
    {
    width:645px;
    height:auto;
    float:left;
    margin:0;
    padding:1em;
    }


    div.right
    {
    height:auto;
    margin-left:680px;
    padding:1em;
    }


    div.footer
    {
    padding:0.5em;
    background-color: #87870D;
    color:#FFF6E6;
    }







    #nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; }
    background-color:#87870D;
    }

    #nav li {
    float: left; }

    #nav li a {
    display: block;
    padding: 8px 35px;
    text-decoration: none;
    font-weight: bold;
    color: #FAF9DD;
    }

    #nav li a:hover {
    text-decoration:hover;
    color: #FAF9DD;
    background-color: #fff; }




    div.image_descrip_left_landscape
    {
    float:left;
    width: 325px;
    height: 258px;
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
    font-size: 9pt;
    color: #54542A;
    font-style: italic;
    }


    div.image_descrip_right_landscape
    {
    float:left;
    width: 325px;
    height: 258px;
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
    font-size: 9pt;
    color: #54542A;
    font-style: italic;
    }


    div.image_descrip_left_portrait
    {
    float:left;
    width: 246px;
    height: 335px;
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
    font-size: 9pt;
    color: #54542A;
    font-style: italic;
    }


    div.image_descrip_right_portrait
    {
    float:left;
    width: 246px;
    height: 335px;
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
    font-size: 9pt;
    color: #54542A;
    font-style: italic;
    }


    div.advertisement1
    {
    float:left;
    width:300px;
    height:250px;
    }
     
  5. Denno

    Denno New Member

    Messages:
    51
    can I grab your new php snippet for the menu too?
     
  6. jeanm

    jeanm Member

    Messages:
    148
    Here we go:

    <ul id="nav">
    <li><a href="../index.htm">Home</a></li>
    <li><a href="../railway-trip-ghan.htm">The Ghan</a></li>
    <li><a href="../railway-trip-trans-siberian.htm">Trans Siberian</a></li>
    <li><a href="../travel-information.htm">Travel Information</a></li>
    <li><a href="../useful-contacts.htm">Useful Contacts</a></li>
    <li><a href="../travel-journals-blogs-articles.htm">Travel Journals</a></li>
    </ul>
     
  7. Denno

    Denno New Member

    Messages:
    51
    I'm not sure what the problem is?

    I've attached an image of how it looks where put the code into Dreamweaver.

    Can you explain what the problem is? (I also changed the font colour to black, as it's terribly hard to read the white on that background)

    Denno
     

    Attached Files:

  8. jeanm

    jeanm Member

    Messages:
    148
    The actual navigation area is dark green so the colour looks fine in reality.

    When I look at the design mode on Dreamweaver the navigation text looks perfect except it is about 3/4 inch below where it should be. I feel like it needs to be pushed up the page to sit it in the Navigation area proper.
     
  9. Denno

    Denno New Member

    Messages:
    51
    Could I please see a screenshot of how it appears in your Design view, with all the other elements there.
     
  10. jeanm

    jeanm Member

    Messages:
    148
    I've now got a screen shot saved to my desk top but how do I get it sent to you please?
     
  11. Denno

    Denno New Member

    Messages:
    51
    When you send a reply, you need to click on 'Go Advanced' (instead of using the quick reply at the bottom of the page. Or just click on Post Reply somewhere in the thread.

    You'll then be in the advanced text editor, you type your message as usual, then scroll down into the Additional Options, and press the button Manage Attachments.

    From there, a new window will pop up. In the first section of that new window press the Choose File button, navigate to your desktop (or wherever the screenshot is saved), select it and press Open. Then click on the upload button in the same section of the window that popped up (not the choose file dialog).

    The image will then be uploaded, you will see it above the Manage Attachments button.
    Make sure it's fully uploaded before pressing Submit Reply.

    Denno
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Don't rely on the Design view in DW, test it in a browser window. If you use browsers like firefox or chrome, they have excellent debugging tools that allow you to make minor adjustments to css properties and more on the fly.

    Firefox > FireBug
    Chrome > Developer Tools
     
  13. jeanm

    jeanm Member

    Messages:
    148
    Shock and horror! I've looked at it via browser and the navigation text is not in a horizontal line. It looks like a list and it spills down into the content area!

    Thanks for your patience guys.

    I'll attach the screen shot now.
     

    Attached Files:

  14. anna

    anna New Member

    Messages:
    542
    Jean, I agree with Denno, I think the white text is VERY hard to read on that light background. I would suggest, a charcoal color instead...
     
  15. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    I am gonna go out on a limb here and assume that this is not what you want :p

    Without seeing your page markup and css, it looks like you have a padding issue on either the list, list items or anchors. Here is a suggestion for you. Decide what height you want the links to be and define it. Remove any vertical padding or margins on the anchors and list items. So using the previous code in this thread as an example, your css would look like this:

    Code:
    #nav {
    margin: 0 0 3em 0;
    padding: 0;
    background-color:#87870D;
    }
    
    #nav li {
    float: left; 
    list-style: none;
    }
    
    #nav li a {
    display: block;
    padding: 0 35px;
    height:45px;  /* THIS IS MY GUESS, ADJUST ACCORDINGLY */
    line-height:45px;
    text-decoration: none;
    text-align:center;
    font-weight: bold;
    color: #FAF9DD;
    }
    
    #nav li a:hover {
    text-decoration:hover;
    background-color: #fff; }
    
    NOTE: When you define the height property, try using the line-height as well. If you set them to the same value this is always place your text vertically in the middle (applies to single text only). Also there is no need to define a property in the the psuedo class (":hover") if it has already been defined in the original style. On add items you want to change/alter.

    Good luck!
     
  16. jeanm

    jeanm Member

    Messages:
    148
    The white text looks daft because its hovering in a place it is not meant to be. When I can get it to sit in the green nav bar it will look good.

    John I'll follow through on your suggestions and see what happens.

    Many thanks everyone.

    Jean
     
  17. jeanm

    jeanm Member

    Messages:
    148
  18. Denno

    Denno New Member

    Messages:
    51
    May I ask, what is the purpose of <pre> tag?

    It is directly before the <ul id="nav">.

    I noticed it, didn't know what it did, removed it, and the page displays fine..

    so <pre> is your problem.

    Denno
     
  19. jeanm

    jeanm Member

    Messages:
    148
    Brilliant, brilliant, brilliant!! That wretched <pre> has crept in there a few times and I don't know where it keeps coming from. I hadn't spotted that it was back again. I've changed it into a <p> a couple of times before. If things go crazy again then that will be the first thing I check out. Thanks a million Denno and Pixel Pusher - you have both helped me so much.
     
  20. jeanm

    jeanm Member

    Messages:
    148
    John I see what you mean about not relying on Dreamweaver's design view. What I've created works well in Firefox and IE but in the Dreamwweaver design mode the navigation text is sitting in a much lower position. I think I will not worry about it. Thanks everyone for such helpful input.
     

Share This Page