Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nav lists won’t space correctly!!!

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24881
    nchipping
    Member

    I am having trouble getting my navigation lists in my header to space properly, so that they can be viewable and used correctly. Here’s a screen shot of the problem:

    http://meandmyback.com/provident-living … messed.bmp

    Any help would be appreciated – I have tried a bunch of things and just can’t figure it out. Here’s the HTML, and then the CSS:

    Code:



    Provident Money

    3 STEPS
    TO YOUR
    SUCCESS…

    1. TRACK

    “You cannot improve that
    which you do not track.”

    Take control of your finances with
    our easy-to-use tracking and
    budgeting software and begin the
    journey to financial freedom.

    By the way, we thought it only
    fair to tell you that this is the only
    step our competitors provide. But
    there are still 2 vital steps…

    2. EVALUATE

    • Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.
    • Solid, provident advice in all major aspects of your financial life, provided by experts.

    3. DECIDE

    You will inevitably make some
    decisions on your own, but when
    it comes to your financial future,
    you want to know you’re getting
    the best advice possible.

    We are assembling the most
    qualified and wide team of
    professional advisors in one
    place than ever before.

    People

    The Success Spiral Go Arrow

    What is it? Learn about this powerful concept, and why it is the foundation of our provident philosophy, and your financial success!


    NOW FOR THE CSS

    Code:
    * {
    margin:0;
    padding:0;
    }
    #background {
    background-color: #364565;
    }
    #container {
    margin: 0 auto;
    padding-top: 70px;
    width: 910px;
    padding-bottom:inherit;
    }
    #header {
    height: 100px;
    width: 647px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:large;
    background-color:#FFF;
    }
    #header ul {
    list-style:none;
    display:block;
    float:right;
    width: 300px;
    }
    #header ul li {
    list-style:none;
    float: right;
    display:block;
    font-size:10px;
    margin-top: -30px;
    width: 70px;
    padding-left: 5px;
    padding-right: 5px;
    }
    #headerimage {
    margin:25px;
    }
    #header-login {
    float:right;
    margin: 0 auto;
    margin-top: 36px;
    }
    #header-login ul li {
    margin: 10px;
    padding: 5px;
    }
    #main {
    float: left;
    width: 638px;
    padding: 5px;
    margin-top: 12px;
    background-color:#FFF;
    }
    #main1 {
    float:left;
    width: 190px;
    padding:5px;
    margin: 5px;
    text-align:right;
    }
    #main2 {
    float: left;
    width: 190px;
    padding: 5px;
    margin: 5px;
    border-left: solid 1px #364565;
    border-right: solid 1px #364565;
    text-align:center;
    }
    #main2 ul li{
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    }
    #main3 {
    float:right;
    width:190px;
    padding: 5px;
    margin: 5px;
    text-align:left;
    }

    #main-right {
    float: right;
    width:249px;
    height:410px;
    margin-top: -103px;
    background-color: #FFF;
    }
    #main-right2 {
    float:right;
    width: 219px;
    height:120px;
    margin-left: 5px;
    margin-top: 12px;
    padding: 15px;
    background-color: #E8A722;
    font-family:Arial, Helvetica, sans-serif;
    color: #364565;
    }
    #main-right2 p {
    font-weight:500;
    }
    #align {
    margin-left: 150px;
    }
    #align2 {
    margin-left: 5px;
    }
    #main-right2 p b a {
    text-decoration:none;
    color: #364565;
    border:none;
    }
    #main-right2 p b a:hover {
    text-decoration: underline;
    color: #999;
    }
    #main-right2 p b a:visited {
    color: #364565;
    text-decoration:none;
    }
    #h1 {
    font-family: Arial, Helvetica, sans-serif;
    margin-left:310px;
    margin-top:-140px;
    margin-bottom:12px;
    }
    .clear {
    clear:both;
    }
    p {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    img {
    border:none;
    }

    #57754
    John Harris
    Member

    Your problem is

    Code:
    margin-top: -30px;

    it would make more sense to use

    Code:
    margin-bottom: 30px;

    OR

    Code:
    margin:0px 0px 30px 0px;

    Also once the spacing is corrected you will notice that your navigation will appear "backwards" like

    Code:
    ABOUT US FAQS FEATURES HOME

    To fix this u will need to change

    Code:
    #header ul {
    float:right;
    }
    #header ul li {
    float: right;
    }

    TO

    Code:
    #header ul {
    float:left;
    }
    #header ul li {
    float: left;
    }

    You may want to clean up the code some more though. It will definitely fix some of your problems down the road.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.