locked
Navigation Menu Sizing Incorrect RRS feed

  • Question

  • I just started learning how to make a website and getting familiar with code so there may be messes and usless code.

    What I Want:

    I have my navigation menu at the top of the page in a blue bar.  Its edges need to be inline with the bottom navigation bar (blue). 

    Problem Is:

    The top nav's bar hangs out a bit too far on the right side (every page).

    More Info:

    I view the pages in Firefox 11.0 but it shows the same problem in Internet Explorer 8.0.

    The site is being made for 1024 x 768 (Although EW4 says 1142 x 441 on the bottom right?).

    www.traveltrips.ca

    • Edited by ViralStepUp Friday, April 20, 2012 11:56 PM Add/Remove Information
    Friday, April 20, 2012 7:40 PM

Answers

  • "The top nav's bar hangs out a bit too far on the right side (every page). "

    Table cells will expand when their contents don't fit.  You've set the table cell width to match the link width, but you've got table cells, table rows, lists, list items, and links, all of which have default padding, margin, border behavior, cell spacing.  You can try to zero out and border-collapse everything (you've tried, but not hit everything) ... or just reduce the width of the links and make them fit.  Try changing "width: 256px" in your #navMenu UL LI A style to, say 249px.


    • Edited by KathyW2 Saturday, April 21, 2012 1:06 AM
    • Marked as answer by ViralStepUp Saturday, April 21, 2012 1:53 AM
    Saturday, April 21, 2012 1:05 AM

All replies

  • Please read the Forum FAQs and Guidelines - Start Here post. If you still have a question after reading that, let us know.

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, April 20, 2012 9:39 PM
  • Yes, you CAN link to the page. Put it on the current site with a temporary page name. Don't link to it from within the site. Easy.

    Or, throw it up on free space provided by your ISP. That's all explained in the FAQ.

    Then, come back here and post a link to just that page (with all the graphics, etc.) and we can see it and figure out easily what's wrong.

    The FAQ exists for a very good reason.

    You have to help us help you.


    Titanic, the movie, as CSS:

    @mixin iceberg {
         float: none;
    }

    #titanic {
         @include iceberg;
    }


    Friday, April 20, 2012 11:11 PM
  • "The top nav's bar hangs out a bit too far on the right side (every page). "

    Table cells will expand when their contents don't fit.  You've set the table cell width to match the link width, but you've got table cells, table rows, lists, list items, and links, all of which have default padding, margin, border behavior, cell spacing.  You can try to zero out and border-collapse everything (you've tried, but not hit everything) ... or just reduce the width of the links and make them fit.  Try changing "width: 256px" in your #navMenu UL LI A style to, say 249px.


    • Edited by KathyW2 Saturday, April 21, 2012 1:06 AM
    • Marked as answer by ViralStepUp Saturday, April 21, 2012 1:53 AM
    Saturday, April 21, 2012 1:05 AM
  • Thank you KathyW2.

    Under table properties I had Cell padding: 1 and Cell Spacing: 2.  This caused every cell to be 6px too big I guess. 

    Cheers

    Saturday, April 21, 2012 1:56 AM